← Toda a documentação

Modelos de conteúdo

Uma caixa de diálogo que oferece documentos prontos definidos por você, como atas de reunião, um relatório de bug ou uma carta padrão. O autor escolhe um em uma grade de prévias ao vivo, e ele passa a ser o conteúdo do editor.

A caixa de diálogo Insert Template com uma caixa de busca, a contagem de 3 modelos e três cards de prévia: Meeting notes, Bug report (selecionado) e Thank-you letter, com os botões Cancel e Replace Content
Três modelos de htmlTemplates. "Bug report" está selecionado; o rodapé diz o que Replace Content vai fazer.

Ative o recurso

O recurso é o plugin inserttemplate.js (também incluído em plugins/all_plugins.js). O item da barra de ferramentas é inserttemplate (dica de ferramenta "Insert Template"); ele já está nas barras de ferramentas default e full. A lista de modelos fica vazia até você definir htmlTemplates:

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css" />
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/inserttemplate.js"></script>

<div id="div_editor1"><p>Draft notes go here.</p></div>
<script>
var editor1 = new RichTextEditor("#div_editor1", {
  toolbar: "custom",
  toolbar_custom: "{bold,italic,underline}|{inserttemplate}|{undo,redo}",
  htmlTemplates: [
    ["Meeting notes", "<h2>Meeting notes</h2><p><strong>Date:</strong> </p><p><strong>Attendees:</strong> </p><h3>Decisions</h3><ul><li></li></ul>", "Date, attendees, decisions"],
    { title: "Bug report", html: "<h2>Bug report</h2><p><strong>Steps to reproduce</strong></p><ol><li></li></ol><p><strong>Expected</strong></p><p><strong>Actual</strong></p>", description: "Steps, expected and actual result" },
    { title: "Thank-you letter", html: "<p>Dear [Name],</p><p>Thank you for your order. We will ship it within two working days.</p><p>Kind regards,<br>The Support Team</p>", description: "Order confirmation reply" }
  ]
});
</script>

Sem modelos, a caixa de diálogo abre e diz "No templates are available."

Opções

OpçãoPadrãoO que faz
htmlTemplates[]Os modelos. Cada item pode ter qualquer uma das formas abaixo; itens sem HTML são ignorados.
text_inserttemplate"Insert Template"Dica de ferramenta do botão da barra de ferramentas.

Formas que um item pode ter:

  • ["Title", "<p>html</p>", "description"]: um array; a descrição é opcional.
  • { title, html, description }: um objeto. name ou text também servem para o título, content para o HTML, meta para a descrição, e id é mantido se você fornecer um.
  • "<p>html</p>": uma string simples, exibida como "Template 1", "Template 2" e assim por diante.

A descrição é a linha cinza abaixo do título do card. Sem ela, o card mostra os primeiros 80 caracteres do texto do modelo, emendados sem espaços entre os parágrafos; por isso, uma descrição curta fica mais legível.

As outras palavras da caixa de diálogo vêm de chaves do pacote de idioma: text_tp_copy, text_tp_search, text_tp_replace, text_tp_select, text_tp_ready, text_tp_nomatch, text_tp_none, text_tp_count1, text_tp_countn.

Como usar

  • Clique no botão da barra de ferramentas ou chame editor1.execCommand("inserttemplate"). O menu de barra o lista como "Template".
  • A caixa de busca filtra pelo título, pela descrição e pelo texto do modelo. Buscar "expected" deixa apenas "Bug report".
  • Clique em um card para selecioná-lo e depois em Replace Content. Um clique duplo aplica o modelo na hora.
  • Ctrl+Z depois de aplicar traz de volta o documento como estava antes, incluindo as edições feitas logo antes.

O que você precisa saber

Um modelo substitui o documento inteiro; ele não é inserido na posição do cursor. A caixa de diálogo avisa isso ("replace the current editor content"). Para inserir um trecho na posição do cursor, use editor.insertHTML() a partir do seu próprio botão.

  • O HTML do modelo passa pelo editor como qualquer outro conteúdo. No teste acima, o modelo "Bug report" saiu assim: 
    <h2 id="bug-report">Bug report</h2>
<p><b>Steps to reproduce</b></p>
<ol><li></li></ol>
<p><b>Expected</b></p>
<p><b>Actual</b></p>
    O editor gravou <strong> como <b> e deu um id ao título. Nada marca o conteúdo como vindo de um modelo.
  • As prévias são o HTML do modelo desenhado em tamanho reduzido dentro da caixa de diálogo; por isso, usam os estilos da página, e não a folha de estilo de conteúdo do editor.
  • Os modelos ficam na configuração da sua página. Para carregá-los de um servidor, busque a lista antes de criar o editor e passe-a como htmlTemplates.

Relacionados: demonstração de modelos, setHTMLCode, configuração.