Vue2Editor

src/components/html/Vue2Editor.vue

Form High 3 usos

Editor de HTML rico para criação de templates de e-mail de campanhas e relationship templates. Dois modos intercambiáveis via toggle interno: (1) WYSIWYG com VueEditor (Quill) com toolbar completa e upload de imagens; (2) Editor de código HTML com VueAceEditor + preview renderizado. Suporta inserção de variáveis {{tag}} com validação contra tagList. Ao salvar, monta HTML completo com DOCTYPE e adiciona footer de cancelamento de inscrição automaticamente.

Domínio específico: não é um editor genérico — tem footer de unsubscribe hardcoded, DOCTYPE completo e validação de variáveis contra planilha. Usar apenas para templates de email marketing.

Modo WYSIWYG (campanhas de email)

Editor Quill com toolbar rica. setData é o trigger para salvar: pai seta true → componente monta HTML completo e emite @htmlContent → pai reseta para false. @removeTag sinaliza para resetar :tag após inserção.

Editor Visual

Código HTML

Clique para adicionar uma variável ao conteúdo:

Olá, {{nome}}!

Você tem um novo pedido confirmado. Confira os detalhes abaixo e entre em contato caso precise de ajuda.

— Equipe Pedbot Commerce

<Vue2Editor
  @htmlContent="handleHTMLContent"
  @removeTag="tagToReplace = ''"
  @templateError="templateError"
  :tagList="tagList"
  :setData="setEmailData"
  :tag="tagToReplace"
/>

Modo HTML Bruto

Toggle interno ativado — VueAceEditor substitui o Quill. O código HTML é editado diretamente com syntax highlighting. Um preview v-html é exibido abaixo. O conteúdo é transferido automaticamente entre modos ao trocar o toggle. O pai não controla o modo inicial.

Editor Visual

Código HTML

<h2 style="text-align:center">Olá, {{nome}}</h2> <p>Você tem um novo pedido confirmado com número {{pedido}}.</p> <p style="color:#0491FF">Valor total: {{valor}}</p> <hr/> <p style="font-size:12px;color:#888">Equipe Pedbot Commerce</p>

Preview

Olá, {{nome}}

Você tem um novo pedido confirmado com número {{pedido}}.

Valor total: {{valor}}

Equipe Pedbot Commerce

<!-- Modo HTML é controlado pelo toggle interno — o pai não passa props para isso -->
<!-- Ao clicar o toggle, o componente troca entre VueEditor (Quill) e VueAceEditor -->
<!-- O conteúdo é transferido entre os modos automaticamente -->
<Vue2Editor
  @htmlContent="handleHTMLContent"
  @removeTag="tagToReplace = ''"
  @templateError="templateError"
  :tagList="tagList"
  :setData="setEmailData"
  :tag="tagToReplace"
/>

Com tagList e validação

tagList valida se as variáveis {{}} do HTML existem no dataset — se alguma for inválida, @templateError é emitido em vez de @htmlContent. Os botões de tags são exibidos pelo componente pai (não pelo Vue2Editor). ref='model-email' é o padrão em relationship templates.

Variáveis disponíveis (clique para inserir no editor):

Editor Visual

Código HTML

Prezado(a) {{nome}},

Seu pedido {{pedido}} foi processado. O valor cobrado foi {{valor}}. Uma confirmação foi enviada para {{email}}.

Erro de validação: A variável {{telefone}} não está na lista de colunas da planilha. Verifique o template e tente novamente.

<Vue2Editor
  @htmlContent="handleHTMLContent"
  @templateError="templateError"
  :set-data:="true"
  @removeTag="tagToReplace = ''"
  :tagList="filteredTagList"
  :tag="tagToReplace"
  ref="model-email"
/>

API

<!-- setData: trigger para montar e emitir o HTML final -->
<!-- tag: variável a inserir no cursor. Pai seta; componente emite @removeTag após inserir -->
<!-- tagList: variáveis válidas. Se HTML tiver var inválida → @templateError em vez de @htmlContent -->
<Vue2Editor
  :setData="setEmailData"
  :tag="tagToReplace"
  :tagList="['nome', 'email', 'pedido', 'valor']"
  ref="htmlEditor"
  @htmlContent="onHtmlContent"
  @removeTag="tagToReplace = ''"
  @templateError="onTemplateError"
/>

Props

Nome	Tipo	Default	Obrig.	Descrição
`setData`	Boolean	—	Sim	Trigger para salvar. Pai seta `true` → componente monta HTML e emite `@htmlContent` → pai reseta para `false`.
`tag`	String	`""`	Sim	Variável a inserir no cursor (`{{tag}}`). Componente emite `@removeTag` após inserir.
`tagList`	Array	`[]`	—	Variáveis válidas para o template. Usada para validar `{{}}` no HTML. Se alguma var for inválida, emite `@templateError` em vez de `@htmlContent`.

Eventos

Nome	Payload	Descrição
`htmlContent`	String \| null	HTML completo montado: DOCTYPE + `<html>` + `<body>` + conteúdo + footer de unsubscribe. `null` se vazio.
`removeTag`	—	Emitido após inserir `:tag` no editor. Sinaliza ao pai para resetar `:tag` para `''`.
`templateError`	String	HTML contém variáveis `{{}}` fora da `tagList`. Payload: mensagem de erro.

Fluxo de setData (salvar)

Verifica se há conteúdo (retorna null se vazio)
Cria footer de unsubscribe com link dinâmico (baseUrl + tenant + /unsubscribe/email/)
Se WYSIWYG: converte ql-align-center/right para inline styles
Monta HTML completo: <!DOCTYPE html> + <html> + <body> + conteúdo + footer
Valida variáveis {{}} contra tagList
Emite @htmlContent com HTML final ou @templateError se validação falhar

Toolbar Quill (WYSIWYG)

Headers: false/H1–H6 · Bold · Italic · Underline · Align (left/center/right/justify) · Blockquote · Code-block · Ordered/Bullet/Check list · Indent ±1 · Color/Background · Link · Image (upload custom, limite 2MB, Bearer token) · Video · Clean

Dependências

Vuesax: vs-switch (toggle WYSIWYG/HTML), $vs.loading, $vs.notify
External: vue2-editor (VueEditor/Quill), vue2-ace-editor (VueAceEditor), axios (upload imagem), quill CSS
Store: auth.bearer (token para upload de imagem)
Utils: getBaseUrl(), getCurrentTenant() — para montar URL de unsubscribe

Onde é usado

src/views/relationship-templates/New.vue
src/views/relationship-templates/Edit.vue
src/views/campaigns/ViewCampaign.vue