Modèles de contenu

Une boîte de dialogue propose les documents prédéfinis que vous définissez : compte rendu de réunion, rapport de bogue ou lettre type, par exemple. L’auteur en choisit un dans une grille d’aperçus et celui-ci devient le contenu de l’éditeur.

La boîte de dialogue Insert Template avec un champ de recherche, un total de 3 modèles et trois cartes d’aperçu : Meeting notes, Bug report (sélectionné) et Thank-you letter, avec les boutons Cancel et Replace Content — Trois modèles définis dans `htmlTemplates`. « Bug report » est sélectionné ; le pied de la boîte de dialogue indique ce que fera Replace Content.

Activation

Cette fonctionnalité est fournie par le plugin inserttemplate.js (également inclus dans plugins/all_plugins.js). L’élément de la barre d’outils est inserttemplate (infobulle « Insert Template ») ; il figure déjà dans les barres d’outils default et full. La liste des modèles reste vide tant que vous n’avez pas défini 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>

Sans modèles, la boîte de dialogue s’ouvre et affiche « No templates are available. »

Options

Option	Valeur par défaut	Fonctionnement
`htmlTemplates`	`[]`	Les modèles. Chaque élément peut prendre l’une des formes ci-dessous ; les éléments sans HTML sont ignorés.
`text_inserttemplate`	`"Insert Template"`	Infobulle du bouton de la barre d’outils.

Formes possibles d’un élément :

["Title", "html", "description"] : un tableau ; la description est facultative.
{ title, html, description } : un objet. name ou text conviennent aussi pour le titre, content pour le HTML, meta pour la description, et id est conservé si vous en fournissez un.
"html" : une chaîne seule, affichée sous le nom « Template 1 », « Template 2 », etc.

La description est la ligne grise sous le titre de la carte. Sans description, la carte affiche les 80 premiers caractères du texte du modèle, concaténés sans espaces entre les paragraphes : une courte description est donc plus lisible.

Les autres textes de la boîte de dialogue proviennent des clés du module de langue : 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.

Utilisation

Cliquez sur le bouton de la barre d’outils ou appelez editor1.execCommand("inserttemplate"). Le menu de commandes slash le présente sous le nom « Template ».
Le champ de recherche filtre sur le titre, la description et le texte du modèle. Une recherche de « expected » ne conserve que « Bug report ».
Cliquez sur une carte pour la sélectionner, puis sur Replace Content. Un double-clic applique immédiatement le modèle.
Après l’application, Ctrl+Z restaure le document dans son état antérieur, y compris les modifications effectuées juste avant.

À savoir

Un modèle remplace le document entier ; il n’est pas inséré à la position du curseur. La boîte de dialogue le précise (« replace the current editor content »). Pour insérer un fragment à la position du curseur, utilisez editor.insertHTML() depuis votre propre bouton.

Le HTML du modèle est traité par l’éditeur comme tout autre contenu. Dans l’exemple ci-dessus, le modèle « Bug report » a produit :
```
<h2 id="bug-report">Bug report</h2>
Steps to reproduce
<ol><li></li></ol>
Expected
Actual
```
L’éditeur a écrit  sous la forme  et a attribué au titre un id. Rien ne signale que le contenu provient d’un modèle.
Les aperçus affichent le HTML du modèle en petit dans la boîte de dialogue : ils utilisent donc les styles de la page, et non la feuille de style du contenu de l’éditeur.
Les modèles figurent dans la configuration de votre page. Pour les charger depuis un serveur, récupérez la liste avant de créer l’éditeur et transmettez-la dans htmlTemplates.

Voir aussi : démonstration des modèles, setHTMLCode, configuration.