← Gesamte Dokumentation

Inhaltsvorlagen

Ein Dialog, der von Ihnen definierte vorgefertigte Dokumente anbietet, z. B. Besprechungsnotizen, einen Fehlerbericht oder einen Standardbrief. Der Autor wählt eines aus einem Raster von Live-Vorschauen aus und es wird zum Inhalt des Herausgebers.

Das Dialogfeld „Vorlage einfügen“ mit einem Suchfeld, einer Anzahl von 3 Vorlagen und drei Vorschaukarten: Besprechungsnotizen, Fehlerbericht (ausgewählt) und Dankesbrief mit den Schaltflächen „Abbrechen“ und „Inhalt ersetzen“.
Drei Vorlagen vonhtmlTemplates. "Bug report"ist ausgewählt; In der Fußzeile steht, was „Content ersetzen“ bewirkt.

Schalten Sie es ein

Die Funktion ist dieinserttemplate.jsPlugin (auch inplugins/all_plugins.js). Das Symbolleistenelement istinserttemplate(Tooltip"Insert Template"); es ist bereits in derdefaultUndfullSymbolleisten. Die Vorlagenliste ist leer, bis Sie sie festlegenhtmlTemplates:

<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>

Ohne Vorlagen wird der Dialog geöffnet und sagt"No templates are available."

Optionen

OptionStandardWas es bewirkt
htmlTemplates[]Die Vorlagen. Jedes Element kann eine der folgenden Formen haben; Elemente ohne HTML werden übersprungen.
text_inserttemplate"Insert Template"Tooltip der Symbolleistenschaltfläche.

Formen, die ein Artikel annehmen kann:

  • ["Title", "<p>html</p>", "description"]: ein Array; Die Beschreibung ist optional.
  • { title, html, description }: ein Objekt.nameodertextarbeite auch für den Titel,contentfür das HTML,metafür die Beschreibung, undidbleibt erhalten, wenn Sie eine geben.
  • "<p>html</p>": eine nackte Saite, dargestellt als"Template 1" , "Template 2"und so weiter.

Die Beschreibung ist die graue Linie unter dem Kartentitel. Ohne diese werden auf der Karte die ersten 80 Zeichen des Vorlagentextes angezeigt, fortlaufend ohne Leerzeichen zwischen den Absätzen, sodass eine kurze Beschreibung besser lesbar ist.

Die anderen Wörter des Dialogs stammen aus Sprachpaketschlüsseln: 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.

Verwenden

  • Klicken Sie auf die Symbolleistenschaltfläche oder rufen Sie editor1.execCommand("inserttemplate") auf. Das Slash-Menü listet es als "Template" .
    • auf
  • Das Suchfeld filtert nach Titel, Beschreibung und dem Text der Vorlage. Die Suche nach "expected" ergibt nur "Bug report" .
  • Klicken Sie auf eine Karte, um sie auszuwählen, und klicken Sie dann auf „Inhalt ersetzen“. Ein Doppelklick wendet die Vorlage sofort an.
  • Strg+Z bringt nach der Anwendung das Dokument in den ursprünglichen Zustand zurück, einschließlich der unmittelbar zuvor vorgenommenen Änderungen.

Wissenswertes

Eine Vorlage ersetzt das gesamte Dokument; es wird nicht an der Einfügemarke eingefügt. Der Dialog sagt es ("replace the current editor content"). Um ein Snippet an der Einfügemarke einzufügen, verwenden Sie editor.insertHTML() über Ihre eigene Schaltfläche.

  • Der HTML-Code der Vorlage durchläuft den Editor wie jeder andere Inhalt. Im obigen Durchlauf wurde die "Bug report"-Vorlage wie folgt ausgegeben: 
    <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>
    Der Herausgeber schrieb <strong> als <b> und gab der Überschrift einen id. Nichts kennzeichnet den Inhalt als aus einer Vorlage stammend.
  • Bei den Vorschauen handelt es sich um die HTML-Vorlage, die klein im Dialog dargestellt wird, sodass sie die Stile der Seite und nicht das Inhalts-Stylesheet des Editors verwenden.
  • Vorlagen befinden sich in der Konfiguration Ihrer Seite. Um sie von einem Server zu laden, rufen Sie die Liste ab, bevor Sie den Editor erstellen, und übergeben Sie sie als htmlTemplates.

Verwandt: Vorlagen-Demo, setHTMLCode, Konfiguration.