---
title: "Interactive integration example"
description: "Using TinyMCE to create a reusable template with both read-only and editable sections, and with included mail merge tags."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/ie-template-creation/"
md_url: "https://www.tiny.cloud/docs/tinymce/6/ie-template-creation/index.md"
version: "6"
last_updated: "2024-02-13T00:35:02Z"
tokens: 1983
---
Important This page documents TinyMCE 6. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/ie-template-creation/).
# Interactive integration example

## Multi-root editing and document template creation

This interactive example demonstrates a basic working example of TinyMCE being used as a reusable template creator and editor.

It includes numerous plugins and configuration settings but highlights the following TinyMCE plugins and configuration options in particular:

- **[Merge Tags](../mergetags/)** — Allows the insertion of merge tags (also known as personalization tokens, or mail merge fields).
- **[`newdocument_content`](../content-behavior-options/#newdocument_content)** — Sets the content a new editor contains when the File → New document menu item is invoked.
- **[`editable_root`](../non-editable-content-options/#editable_root)** — Sets the initial editable state of a TinyMCE instance’s root.
- **[`editable_class`](../non-editable-content-options/#editable_class)** — Specifies the class name that TinyMCE will use to determine which areas of content are editable.

> **Note:** Refer to [Non-editable content options](../non-editable-content-options/) for more detailed `noneditable` configuration information.
**Example**

```js
const content_style = `

// In a more typical environment this constant would be a file, style.css,
// referenced in the tinymce.init configuration with the content_css option.

body {
  background-color: #f0eeee;
  padding: 1rem;
}

section {
  padding: 4rem 4rem 1rem;
  box-sizing: border-box;
  max-width: 1050px;
  min-width: 820px;
  min-height: 600px;
  margin: 2rem auto;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
  background-image: url("images/template-document-body-landscape_2x.png");
  background-size: 100%;
  background-position: right bottom;
  background-repeat: no-repeat;
  display: grid;
  grid-template-columns: auto 220px;
  grid-template-rows: auto 60px;
  column-gap: 2rem;
  row-gap: 1rem;
}

section header,
section aside {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

section main {
  position: relative;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

section footer {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
}

section main:empty::before,
section main:has(> br[data-mce-bogus]:first-child)::before {
  content: "Write something...";
  position: absolute;
  top: 0;
  left: 0;
  color: #999;
}

section main > * {
  margin: 0;
}

section main > * + * {
  margin-top: .5rem;
}

section.cover {
  background-color: #fed330;
  background-image: url("images/template-document-cover-landscape_2x.png");
  background-size: cover;
  background-position: right bottom;
  background-repeat: no-repeat;
}

section.cover main {
  align-self: center;
}

section.cover h1 {
  font-weight: 900;
  font-size: 5rem;
  letter-spacing: -1px;
  line-height: 1em;
  margin-bottom: 2.5rem;
}

section.end {
  background-color: #2C3A47;
  background-image: url("images/template-document-end-landscape_2x.png");
  background-size: 100%;
  background-position: right bottom;
  background-repeat: no-repeat;
  color: #C0C4C8;
}

section.end  a {
  color: #fff;
}

.editable:hover:not(:focus) {
  outline: 3px solid #b4d7ff;
  outline-offset: 8px;
}

.editable:focus {
  outline: none;
}
`;

tinymce.init({
  selector: 'textarea#template-creation',
  plugins: 'anchor autolink link lists image code advcode mergetags wordcount',
  toolbar: 'undo redo | blocks | bold italic strikethrough backcolor | mergetags | link image | align bullist numlist | code ',
  height: 900,
  editable_root: false,
  editable_class: 'editable',
  content_style,
  elementpath: false,
  newdocument_content: '<section class="cover"><header><img src="../_images/ie-template-creation/template-document-logo_2x.png" alt="demo document logo with triangle shapes" width="160" height="106"></header><main class="editable"><h1>Project proposal template</h1><p>*{client.givenname}* *{client.familyname}*</p><p>*{client.company}*</p></main><footer><p><small>Confidential</small></p></footer></section><section><main class="editable"><h1>Executive summary</h1><p>*{client.company}* has requested assistance with asserting, building and implementing X which may include</p><ul><li>Deliverable 1</li><li>Deliverable 2</li><li>Deliverable 3</li></ul><p>Our team has significant experience in your industry and has a successful track record with similar clients and projects. We pride ourselves on delivering only the best results for our clients so that they see an increase in productivity that has lasting results for their business.</p><p>*{submission.date}*</p></main></section><section><main class="editable"><h1>Process</h1><p>We work closely with you to build and fulfill the project’s needs by *{completion.date}*.</p><p>We do this by establishing clear goals and a comprehensive solution based on *{client.company}*’s needs.</p><p>Our process is as follows.</p><h2>Phase 1: initial consultation</h2><p>Our expert team reviews any and all project-related systems and determines:<p><ul><li>existing pain points; and</li><li>existing leverage opportunities.</li></ul><p>Based on this initial consultation we develop a solutions list.</p><h2>Phase 2: solution model</h2><p>Working with your team we implement the selected solution.</p><p>This allows us to tailor the solution specifically for *{client.company}*’s needs, ensuring the solution does not include services you do not need and should not pay for.</p><h2>Phase 3: implementation</h2><p>Once we have agreed on a solution, our team implements the project plan.</p><p>We will first deliver a detailed outline of the plan with a timeline that includes all relevant due dates and deliverables.</p></main></section><section class="end"><main class="editable"><p><span style="font-size: 20px;">Acme Projects have been helping customers for over 20 years. Since the beginning the focus has always been quality and delivery. Over six thousand customers over 4 continents, Acme is there for you, when you need it.</span></p><p>&nbsp;</p><p><span style="font-size: 20px;">Please reach out to our region associates for any inquiries</span></p><p>&nbsp;</p><p>&nbsp;</p><p><img src="../_images/ie-template-creation/template-document-fredrik_2x.png" alt="profile picture of one staff member" width="84" height="84"></p><p>Fredrik Danielsson <br>+46 70 1740605 <br><a href="mailto:fredrik.danielsson@example.com">fredrik.danielsson@example.com</a></p><p>&nbsp;</p><p><img src="../_images/ie-template-creation/template-document-viola_2x.png" alt="profile picture of a second staff member" width="84" height="84"></p><p>Viola From <br>+46 70 1740699 <br><a href="mailto:viola.from@example.com">viola.from@example.com</a></p></main></section>',
  mergetags_prefix: '*{',
  mergetags_suffix: '}*',
  mergetags_list: [
    {
      title: 'Client',
      menu: [
            {
              value: 'client.givenname',
              title: 'Given name'
            },
            {
              value: 'client.familyname',
              title: 'Family name'
            },
            {
              value: 'client.company',
              title: 'Company'
            }
            ]
    },
    {
      title: 'Schedule',
      menu: [
            {
              value: 'submission.date',
              title: 'Submission date'
            },
            {
              value: 'completion.date',
              title: 'Completion date'
            }
            ]
    },
  ],
});
```