Demos
Browse all demos

Document Templates

Start a document from a template: a searchable browser with a preview of each template, filled from your own list.

  • config.htmlTemplates is your list: objects with a title, a description and the HTML, or the short form ["Title", "<p>HTML</p>"].
  • The inserttemplate button opens the browser. Search matches titles, descriptions and the template text; double-click a template, or select it and press Replace Content.
  • The template replaces the document as one step, so Undo brings the previous content back.
<div id="div_editor1"></div>
<script>
    var config = {};
    config.toolbar = "mytoolbar";
    config.toolbar_mytoolbar = "{inserttemplate}|{bold,italic,underline}|{paragraphs}|{undo,redo}";
    config.htmlTemplates = [
        { title: "Meeting notes", description: "Attendees, agenda, decisions, actions",
          html: "<h2>Meeting notes</h2><p><strong>Date:</strong> </p>..." },
        { title: "Bug report", description: "Steps, expected, actual",
          html: "<h2>Bug report</h2><h3>Steps to reproduce</h3><ol><li></li></ol>..." },
        // or the short form: ["Title", "<p>HTML</p>", "description"]
    ];

    var editor1 = new RichTextEditor("#div_editor1", config);

    // Open the browser from your own button:
    // editor1.execCommand("inserttemplate");
</script>