<h1>Template Plugin: Advanced Templates</h1>
    <p>This is an example of using more advanced template source with the <a href="https://www.tiny.cloud/docs/plugins/template/" target="_blank">template</a> plugin in TinyMCE 5.</p>
    <p>For this example, the template source is within the TinyMCE init configuration. This will make it easier to
      play with the example. In a real-world use case, you may like to use <a href="https://www.tiny.cloud/docs/plugins/template/#templates" class="_blank">externally hosted templates</a>.</p>
    <p>When using advanced templates like this, place the "<a href="https://www.tiny.cloud/docs/plugins/template/#makingtemplates" target="_blanl">mceTmpl</a>"
      class to the wrapper of the actual content you want inserted. TinyMCE will insert this element as the actual template.</p>
body {
  margin: 2rem 1.5rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial,

main {
  max-width: 720px;
  margin: auto;

section {
  margin-bottom: 3rem;

h1 {
  font-size: 1.75rem;
  font-weight: bold;

a {
  color: rgb(25, 118, 210);
  font-weight: bold;
  text-decoration: none;

a:hover {
  color: rgb(145, 180, 225);
  selector: "textarea",
  plugins: "template code",
  toolbar: "template code",
  menubar: false,

  min_height: 380,
  templates: [
      title: "Advanced Template template example",
        'This template has additional markup that is shown in the "preview" of the template, but is not inserted in to TinyMCE.',
        "<body>" +
        '<p style="color: red; font-weight:bold;">This appears in the template preview, but will not be inserted in to TinyMCE.</p>' +
        '<div class="mceTmpl">' +
        "<p>This is the actual template content that will be inserted.</p>" +
        "<ul>" +
        "<li>And can include nested elements</li>" +
        "<li>So your templates can still include your complex HTML</li>" +
        "</ul>" +
        "</div>" +

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5/tinymce.min.js