Plantillas de contenido

Un cuadro de diálogo que ofrece documentos predefinidos por ti, como notas de reuniones, informes de errores o cartas estándar. El autor elige uno en una cuadrícula de vistas previas en vivo y este pasa a ser el contenido del editor.

El cuadro de diálogo Insert Template con un cuadro de búsqueda, un recuento de 3 plantillas y tres tarjetas de vista previa: Meeting notes, Bug report (seleccionada) y Thank-you letter, con los botones Cancel y Replace Content — Tres plantillas de `htmlTemplates`. Está seleccionada "Bug report"; el pie indica qué hará Replace Content.

Cómo activarlo

Esta función la ofrece el plugin inserttemplate.js (también incluido en plugins/all_plugins.js). El elemento de la barra de herramientas es inserttemplate (texto de ayuda "Insert Template"); ya está en las barras default y full . La lista de plantillas está vacía hasta que configures 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>

Si no hay plantillas, el cuadro de diálogo se abre y muestra "No templates are available.".

Opciones

Opción	Valor predeterminado	Función
`htmlTemplates`	`[]`	Las plantillas. Cada elemento puede adoptar cualquiera de las formas siguientes; se omiten los que no tienen HTML.
`text_inserttemplate`	`"Insert Template"`	Texto de ayuda del botón de la barra de herramientas.

Formas que puede adoptar un elemento:

["Title", "html", "description"]: un arreglo; la descripción es opcional.
{ title, html, description }: un objeto. name o text también sirven para el título, content para el HTML, meta para la descripción, y id se conserva si lo proporcionas.
"html": una cadena sin más, que se muestra como "Template 1", "Template 2", etc.

La descripción es la línea gris que aparece bajo el título de la tarjeta. Si no hay una, la tarjeta muestra los primeros 80 caracteres del texto de la plantilla, unidos sin espacios entre párrafos, por lo que una descripción breve resulta más legible.

Los demás textos del cuadro de diálogo proceden de las claves del paquete 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.

Cómo usarlo

Haz clic en el botón de la barra de herramientas o llama a editor1.execCommand("inserttemplate"). El menú de comandos con barra lo muestra como "Template".
El cuadro de búsqueda filtra por título, descripción y texto de la plantilla. Al buscar "expected", solo queda "Bug report".
Haz clic en una tarjeta para seleccionarla y después en Replace Content. Un doble clic aplica la plantilla de inmediato.
Al pulsar Ctrl+Z después de aplicarla se restaura el documento tal como estaba antes, incluidas las ediciones realizadas justo antes.

Aspectos a tener en cuenta

Una plantilla sustituye todo el documento; no se inserta en la posición del cursor. El cuadro de diálogo lo indica ("replace the current editor content"). Para insertar un fragmento donde está el cursor, usa editor.insertHTML() desde tu propio botón.

El HTML de la plantilla pasa por el editor como cualquier otro contenido. En la ejecución anterior, la plantilla "Bug report" produjo:
```
<h2 id="bug-report">Bug report</h2>
Steps to reproduce
<ol><li></li></ol>
Expected
Actual
```
El editor escribió  como  y asignó al encabezado un id. Nada indica que el contenido proceda de una plantilla.
Las vistas previas muestran el HTML de la plantilla a escala reducida dentro del cuadro de diálogo, por lo que usan los estilos de la página y no la hoja de estilos del contenido del editor.
Las plantillas residen en la configuración de tu página. Para cargarlas desde un servidor, obtén la lista antes de crear el editor y pásala como htmlTemplates.

Relacionado: demo de plantillas, setHTMLCode, configuración.