START NOW: Free 14-day trial
of Premium plugins

Upgrade your plugins
and maximize your output

Increase productivity and usage

Increase workflow, engagement and adoption
Less time spent on fixes and support
Manage technical debt

PowerPaste is 99.9% accurate = less support tickets

The impact of premium plugins

Self-hosting gives control. Premium plugins
add velocity.

Increased productivity

Decrease support tickets by up to 90%^[1]
Reduce content creation time by 90%^[4]

Deeper engagement

Increase the user engagement of a platform by 85%^[2]
Increase customer gross retention and net retention^[5]

Accelerated outputs

Increase developer velocity and save hundreds of thousands of dollars a year^[3]
Halve your development time and deploy projects twice as fast^[6]

19+ WYSIWYG premium features

Six most popular features

Clean copy-and-paste = less support tickets

Cleanly copy-pastes content from Word, Excel and Google Docs
Has helped dev teams decrease support tickets by 40%
Automatically cleans up rogue formatting in pasted content
Option to strip or preserve advanced formatting
Underlying HTML code doesn't break
99.9% accuracy rate

Explore PowerPaste →

"This is one of the areas where TinyMCE really shines. The PowerPaste plugin is incredible. You can copy content out of Word and have a reliable translation of it into HTML on the other side. It’s one of the big wow factors when we do demos of our product."

Dan Plaskon|CEO, Better Impact

Maximize your developer velocity
with premium plugins

McKinsey research proves that high
developer velocity achieves

4 – 5 times

faster revenue growth^*

55%

higher innovation^*

65%

more innovative with stronger tools^**

Combine TinyMCE core editor and premium plugins

Explore your use case

Event Registration Landing Page

The basic editing experience every CMS should start with: includes all the familiar editing controls your users expect plus PowerPaste, Accessibility Checker, Enhanced Image Editing and more.

1<!--
2The best way to create a templated web page editor in TinymCE is using
3Multi-Root Editing. This allows you to load your entire page template
4into the editor, make it read-only, then specify which regions you want
5editable using a custom CSS class.
6
7This example loads Google Fonts and Bootstrap CSS into the editor, to
8mimic what the web page will look like when it's published, eliminating
9the need to preview.
10-->
11<!doctype html>
12<html lang="en">
13<head>
14<meta charset="utf-8">
15<title>TinyMCE Landing Page Example</title>
16<meta name="viewport" content="width=device-width, initial-scale=1">
17<!-- Load Google fonts -->
18<link rel="preconnect" href="https://fonts.googleapis.com">
19<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
20<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap" rel="stylesheet">
21<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
22
23<script>
24  // TinyMCE CMS Starter Config
25
26  // Initialize TinyMCE
27  tinymce.init({
28
29    // Select the element(s) to add TinyMCE to using any valid CSS selector
30    selector: '#editor',
31
32    // To make TinyMCE leaner, only include the plugins you need
33    plugins: 'a11ychecker advcode advtemplate advlist advtable anchor autocorrect autosave editimage image link linkchecker lists media mediaembed pageembed powerpaste searchreplace table template tinymcespellchecker typography visualblocks wordcount',
34
35    // Define the toolbar
36    // https://www.tiny.cloud/docs/tinymce/6/toolbar-configuration-options/#basic-toolbar-options
37    toolbar: 'undo redo | styles fontsizeinput | bold italic | align bullist numlist | table link image media pageembed | spellcheckdialog a11ycheck code | inserttemplate',
38
39    // Make the toolbar sticky so it's visible as users scroll through the email
40    // https://www.tiny.cloud/docs/tinymce/6/menus-configuration-options/#toolbar_sticky
41    toolbar_sticky: true,
42
43    toolbar_mode: 'wrap',
44
45    // Set editor height
46    height: 620,
47
48    // Enable Multi-Root Editing by setting editable_root to false. This makes the
49    // entire contents of the editor non-editable by default
50    // https://www.tiny.cloud/docs/tinymce/6/content-behavior-options/#editable_root
51    editable_root: false,
52
53    // Specify which class to use to identify the regions that are editable
54    // https://www.tiny.cloud/docs/tinymce/6/content-behavior-options/#editable_class
55    editable_class: 'tiny-editable',
56
57    // Disable the element path in the status bar to avoid user confusion while
58    // navigating the multiple editable regions inside the editor
59    elementpath: false,
60
61    // We don't want users to be able to resize images by using
62    // drag and drop because it can break layout templates.
63    // https://www.tiny.cloud/docs/tinymce/6/content-behavior-options/#object_resizing
64    object_resizing: false,
65
66    // Disable editor resizing
67    // https://www.tiny.cloud/docs/tinymce/6/editor-size-options/#resize
68    resize: false,
69
70    // Enable captions for images
71    // https://www.tiny.cloud/docs/tinymce/6/image/#image_caption
72    image_caption: true,
73
74    // Only allow certain image types to be added to emails
75    // https://www.tiny.cloud/docs/tinymce/6/file-image-upload/#images_file_types
76    images_file_types: "jpeg,jpg,png,gif",
77
78    // The style_formats option controls the styleformat toolbar button menu
79    // https://www.tiny.cloud/docs/tinymce/6/user-formatting-options/#style_formats
80    style_formats: [
81      {title: 'Heading 1', block: 'h1'},
82      {title: 'Heading 2', block: 'h2'},
83      {title: 'Heading 3', block: 'h3'},
84      {title: 'Paragraph', block: 'p'},
85      {title: 'Blockquote', block: 'blockquote'},
86      {title: 'Fancy list', selector: 'ul', classes: 'fancy'},
87      ],
88
89    // Enable inline mode for Advanced Code Editor
90    // https://www.tiny.cloud/docs/tinymce/6/advcode/
91    advcode_inline: true,
92
93    // You can add your own words (e.g. brand names) to the spell checker dictionary
94    // https://www.tiny.cloud/docs/tinymce/6/introduction-to-tiny-spellchecker/
95    spellchecker_ignore_list: [ 'CMS', 'devs' ],
96
97    // Specify which WCAG level for the Accessibility Checker to check against
98    // https://www.tiny.cloud/docs/tinymce/6/a11ychecker/
99    a11ychecker_level: 'aaa',
100
101    // Advanced Templates lets users create, modify and organize content snippets
102    // inside the editor. This example uses a basic configuration, where you
103    // specify the content snippets in the config. Check out the docs for how to
104    // enable users to create their own snippets.
105    // https://www.tiny.cloud/docs/tinymce/6/advanced-templates/
106    advtemplate_templates: [
107      {
108        title: "About us",
109        content:
110          '<h2>About our company</h2>\n<p><a href="https://tiny.cloud">XYZ Inc.</a> is a global leader in providing innovative solutions to businesses. We provide our clients with the latest technology, state-of-the-art equipment, and experienced professionals to help them stay ahead of their competition. Our comprehensive suite of services, from cloud computing and big data analytics to mobile and e-commerce solutions, ensures that all of our clients have the resources they need to stay competitive in an ever-changing business landscape. Our commitment to customer service and satisfaction is second to none, and we strive to be a reliable and trusted partner for our clients.</p>',
111      },
112    ],
113
114    // Load bootstrap CSS inside the editor
115    content_css: 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css',
116
117    // Apply CSS styles within the editor to style the content and apply styles
118    // to editable regions
119    content_style: `
120    :root {
121      --bs-primary-rgb: 62, 92, 210;
122      --bs-border-radius: 0;
123      --bs-border-radius-lg: 0;
124    }
125
126    html {
127      font-size: 16px;
128    }
129
130    .tiny-logo {
131      position: absolute;
132      top: 2rem;
133      left: 2rem;
134    }
135
136    h1 {
137      font-size: 2.75rem;
138    }
139
140    h1,
141    h2,
142    h3 {
143      margin-bottom: .5em;
144    }
145
146    ul.fancy li {
147      margin-bottom: .5em;
148    }
149
150    ul.fancy li::marker {
151      content: '✅  ';
152    }
153
154    .tiny-hero {
155      background-image: url(images/sbc-cms-template-cover.png);
156      background-size: cover;
157      background-position: center center;
158    }
159
160    /* Form styling */
161    @media screen and (min-width: 768px) {
162      .register-form {
163        margin-bottom: -200px;
164      }
165    }
166
167    /* Prevent users clicking in the form */
168    form {
169      pointer-events: none;
170    }
171
172    /* Edit area functional css */
173    .tiny-editable {
174      position: relative;
175    }
176    .tiny-editable:hover:not(:focus),
177    .tiny-editable:focus {
178      outline: 3px solid #b4d7ff;
179      outline-offset: 4px;
180    }
181
182    /* Edit placeholder */
183    .tiny-editable:empty::before,
184    .tiny-editable:has(> br[data-mce-bogus]:first-child)::before {
185      content: "Write here...";
186      position: absolute;
187      top: 0;
188      left: 0;
189      color: #999;
190    }
191    `
192  });
193</script>
194<style>
195  body {
196    margin: 2rem;
197  }
198
199  main {
200    max-width: 1100px;
201    margin: auto;
202  }
203</style>
204</head>
205
206<body>
207<main>
208  <textarea id="editor">
209    <div class="container-fluid text-bg-dark pt-5 tiny-hero">
210      <img src="images/sbc-cms-template-logo.png" alt="The Tiny Technologies logo" class="tiny-logo" width="120">
211      <div class="container-lg">
212        <div class="row gx-5 py-5">
213          <div class="offset-xl-1 col-xl-6 col-lg-7 col-md-7 col-sm-12 pt-5">
214            <div class="tiny-editable">
215              <p>This is a sample landing page built using TinyMCE</p>
216              <h1>Adding rich text editing to your CMS</h1>
217              <p><span style="font-size: 22px;">Wednesday, December 16, 2023</span><br><span style="font-size: 22px;">5:00 - 7:00 PM</span></p>
218            </div>
219          </div>
220          <div class="col-xl-4 col-lg-5 col-md-5 col-sm-12 register-form">
221            <div class="bg-primary p-3">
222              <h2 class="text-center my-3">Register now</h2>
223              <form>
224                <div class="mb-2">
225                  <label for="first-name" class="form-label">First name</label>
226                  <input type="text" class="form-control" id="first-name">
227                </div>
228                <div class="mb-2">
229                  <label for="last-name" class="form-label">Last name</label>
230                  <input type="text" class="form-control" id="last-name">
231                </div>
232                <div class="mb-2">
233                  <label for="email" class="form-label">Email address</label>
234                  <input type="email" class="form-control" id="email">
235                </div>
236                <div class="text-center my-3">
237                  <button type="submit" class="btn btn-info btn-lg text-white px-5 py-2">Register</button>
238                </div>
239              </form>
240            </div>
241          </div>
242        </div>
243      </div>
244    </div>
245
246    <div class="container-fluid">
247      <div class="container-lg">
248        <div class="row gx-5 py-5">
249          <div class="offset-xl-1 col-xl-6 col-lg-7 col-md-7 col-sm-12">
250            <div class="tiny-editable">
251              <h2>Are you:</h2>
252              <ul class="fancy">
253                <li style="font-size: 20px;"><span style="font-size: 20px;">Building a new CMS and need rich text editor functionality?</span></li>
254                <li style="font-size: 20px;"><span style="font-size: 20px;">Extending an existing CMS and need to add more rich text editor functionality, or enhance the default editor?</span></li>
255              </ul>
256              <p><span style="font-size: 20px;">Then use the only WYSIWYG editor that&rsquo;s trusted by 1.5M devs.</span></p>
257            </div>
258          </div>
259        </div>
260      </div>
261    </div>
262
263    <div class="container-fluid bg-primary text-white">
264      <div class="container-lg">
265        <div class="row gx-5 py-5 justify-content-center">
266          <div class="col-md-10 col-lg-8 col-xl-6 text-center">
267            <div class="tiny-editable">
268              <h2>How it works</h2>
269              <p>This landing page was built using TinyMCE.</p>
270              <p>All you have to do is define your page structure, which regions are editable, and then which TinyMCE features you want enabled.</p>
271              <p>Play around with this demo to see how TinyMCE works as a CMS WYSIWYG editor!</p>
272            </div>
273          </div>
274        </div>
275      </div>
276
277      <div class="container-lg">
278        <div class="row gx-5 pb-5">
279          <div class="col text-center">
280            <div class="tiny-editable"><img src="images/sbc-cms-template-face-1.png" alt="Portrait of Andrew Mitchell" width="200px">
281              <h3><span style="font-size: 20px;">Andrew Mitchell</span></h3>
282              <p>Chief Technology Officer (CTO)<br>Syntech Solutions</p>
283            </div>
284          </div>
285          <div class="col text-center">
286            <div class="tiny-editable"><img src="images/sbc-cms-template-face-2.png" alt="Portrait of Jennifer Lee" width="200"
287              height="200">
288              <h3><span style="font-size: 20px;">Jennifer Lee</span></h3>
289              <p>Director of Product Development<br>Stellar Innovations</p>
290            </div>
291          </div>
292          <div class="col text-center">
293            <div class="tiny-editable"><img src="images/sbc-cms-template-face-3.png" alt="Portrait of David Faraguay" width="200"
294              height="200">
295              <h3><span style="font-size: 20px;">David Faraguay</span></h3>
296              <p>Senior Data Scientist<br>QuantumTech Labs</p>
297            </div>
298          </div>
299        </div>
300      </div>
301    </div>
302
303    <div class="container-fluid">
304      <div class="container-lg">
305        <div class="row gx-5 py-4">
306          <div class="col offset-xl-1">
307            <p>Tiny Technologies, Inc. 2023</p>
308          </div>
309        </div>
310      </div>
311    </div>
312
313  </textarea>
314</main>
315</body>
316</html>

Edit

Settings

Send or Schedule

Actions ▾

The basic editing experience every email software should start with: includes all the familiar editing controls your users expect plus Link Checker, Emojis, Enhanced Image Editing and more.

1<!--
2The best way to create emails using TinyMCE is using Multi-Root Editing.
3This allows you to load your entire email into the editor, make it
4read-only, then specify which regions you want editable using a custom
5CSS class.
6-->
7<!doctype html>
8<html>
9<head>
10<meta charset="utf-8">
11<title>Marketing email editor using Multi-Root Editing</title>
12<meta name="viewport" content="width=device-width, initial-scale=1">
13<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
14<script>
15  // TinyMCE Email & Messaging Starter Config
16
17  tinymce.init({
18    // Select the element(s) to add TinyMCE to using any valid CSS selector
19    selector: '#editor',
20
21    // To make TinyMCE leaner, only include the plugins you need
22    plugins: 'advcode advtemplate a11ychecker autocorrect autolink emoticons image inlinecss link linkchecker lists mergetags powerpaste tinymcespellchecker help',
23
24    // Define the toolbar
25    // https://www.tiny.cloud/docs/tinymce/6/toolbar-configuration-options/#basic-toolbar-options
26    toolbar: 'undo redo | styles | bold italic forecolor | link image emoticons | align | mergetags inserttemplate | spellcheckdialog a11ycheck | code removeformat',
27
28    // Make the toolbar sticky so it's visible as users scroll through the email
29    // https://www.tiny.cloud/docs/tinymce/6/menus-configuration-options/#toolbar_sticky
30    toolbar_sticky: true,
31
32    // Toggle the menubar off to get a leaner visual experience
33    // https://www.tiny.cloud/docs/tinymce/6/menus-configuration-options/
34    menubar: false,
35
36    // Set editor height
37    height: 1020,
38
39    // Enable Multi-Root Editing by setting editable_root to false. This makes the
40    // entire contents of the editor non-editable by default
41    // https://www.tiny.cloud/docs/tinymce/6/content-behavior-options/#editable_root
42    editable_root: false,
43
44    // Specify which class to use to identify the regions that are editable
45    // https://www.tiny.cloud/docs/tinymce/6/content-behavior-options/#editable_class
46    editable_class: 'tiny-editable',
47
48    // Disable the element path in the status bar to avoid user confusion while
49    // navigating the multiple editable regions inside the editor
50    elementpath: false,
51
52    // Disable the default "dotted line" visual aid for table borders, since this
53    // email is a series of tables inside tables and the visual aid would be
54    // distracting
55    visual: false,
56
57    // In emails we don't use targets for links so we hide the
58    // target drop down in the link dialog
59    // https://www.tiny.cloud/docs/tinymce/6/link/#link_target_list
60    link_target_list: false,
61
62    // A common feature for email marketing tools is to provide a prepopulated
63    // list of links to choose. Here we define that list.
64    // https://www.tiny.cloud/docs/tinymce/6/link/#link_list
65    link_list: [
66      { title: "Features", value: 'https://www.tiny.cloud/tinymce/features/' },
67      { title: "Docs", value: 'https://www.tiny.cloud/pricing/' },
68      { title: "Pricing", value: 'https://www.tiny.cloud/docs/tinymce/6/' }
69      ],
70
71    // We don't want users to be able to resize images by using
72    // drag and drop because it can break layout templates.
73    // https://www.tiny.cloud/docs/tinymce/6/content-behavior-options/#object_resizing
74    object_resizing: false,
75
76    // The formats option is where custom formatting options are defined.
77    // In this case we define a couple of headings and a button appearance
78    // for links. HTML Emails require inlining the CSS. Fortunately the
79    // styles property makes that easy.
80    // https://www.tiny.cloud/docs/tinymce/6/content-formatting/
81    formats: {
82      h1: { block: 'h1', styles: { fontSize: '24px', color: '#335dff' } },
83      h2: { block: 'h2', styles: { fontSize: '20px' } },
84      largetext: { block: 'p', styles: { fontSize: '20px' } },
85      calltoaction: { selector: 'a', styles: { backgroundColor: '#335dff', padding: '12px 16px', color: '#ffffff', borderRadius: '4px', textDecoration: 'none', display: 'inline-block' } }
86    },
87
88    // The style_formats option controls the styleformat toolbar button menu
89    // https://www.tiny.cloud/docs/tinymce/6/user-formatting-options/#style_formats
90    style_formats: [
91      { title: 'Paragraph', format: 'p' },
92      { title: 'Heading 1', format: 'h1' },
93      { title: 'Heading 2', format: 'h2' },
94      { title: 'Large text', format: 'largetext' },
95      { title: 'Button styles' },
96      { title: 'Call-to-action', format: 'calltoaction' },
97      ],
98
99    // Only allow certain image types to be added to emails
100    // https://www.tiny.cloud/docs/tinymce/6/file-image-upload/#images_file_types
101    images_file_types: "jpeg,jpg,png,gif",
102
103    // You can add your own words (e.g. brand names) to the spell checker dictionary
104    // https://www.tiny.cloud/docs/tinymce/6/introduction-to-tiny-spellchecker/
105    spellchecker_ignore_list: [ 'i.e', 'Mailchimp', 'CSS-inlined' ],
106
107    // Merge Tags lets users add non-editable personalization tokens to your content, so
108    // your app can then merge the personalized content into emails before sending
109    // https://www.tiny.cloud/docs/tinymce/6/mergetags/
110    mergetags_list: [
111    {
112      title: "Contact",
113      menu: [{
114        value: 'Contact.FirstName',
115        title: 'Contact First Name'
116      },
117      {
118        value: 'Contact.LastName',
119        title: 'Contact Last Name'
120      },
121      {
122        value: 'Contact.Email',
123        title: 'Contact Email'
124      }
125      ]
126    },
127    {
128      title: "Sender",
129      menu: [{
130        value: 'Sender.FirstName',
131        title: 'Sender First Name'
132      },
133      {
134        value: 'Sender.LastName',
135        title: 'Sender Last name'
136      },
137      {
138        value: 'Sender.Email',
139        title: 'Sender Email'
140      }
141      ]
142    },
143    {
144      title: 'Subscription',
145      menu: [{
146        value: 'Subscription.UnsubscribeLink',
147        title: 'Unsubscribe Link'
148      },
149      {
150        value: 'Subscription.Preferences',
151        title: 'Subscription Preferences'
152      }
153      ]
154    }
155    ],
156
157
158    // Advanced Templates lets users create, modify and organize content snippets
159    // inside the editor. This example uses a basic configuration, where you
160    // specify the content snippets in the config. Check out the docs for how to
161    // enable users to create their own snippets.
162    // https://www.tiny.cloud/docs/tinymce/6/advanced-templates/
163    advtemplate_templates: [
164      {
165        title: "Newsletter intro",
166        content:
167          '<h1 style="font-size: 24px; color: rgb(51, 93, 255); font-family:Arial;">TinyMCE Newsletter</h1>\n<p style="font-family:Arial;">Welcome to your monthly digest of all things TinyMCE, where you&quot;ll find helpful tips, how-tos, and stories of how people are using rich text editing to bring their apps to new heights!</p>',
168      },
169      {
170        title: "CTA Button",
171        content:
172          '<p><a style="background-color: rgb(51, 93, 255); padding: 12px 16px; color: rgb(255, 255, 255); border-radius: 4px; text-decoration: none; display: inline-block; font-family:Arial;" href="https://tiny.cloud/pricing">Get started with your 14-day free trial</a></p>',
173      },
174      {
175        title: "Footer",
176        content:
177          '<p style="text-align: center; font-size: 10px; font-family:Arial;">You received this email at because you previously subscribed.</p>\n<p style="text-align: center; font-size: 10px; font-family:Arial;">{{Subscription.Preferences}} | {{Subscription.UnsubscribeLink}}</p>',
178      },
179    ],
180
181    // Apply CSS styles within the editor to style the content and apply styles
182    // to editable regions
183    content_style: `
184      body {
185        background-color: #f9f9fb;
186      }
187
188      /* Edit area functional css */
189      .tiny-editable {
190        position: relative;
191      }
192      .tiny-editable:hover:not(:focus),
193      .tiny-editable:focus {
194        outline: 3px solid #b4d7ff;
195        outline-offset: 4px;
196      }
197
198      /* Create an edit placeholder */
199      .tiny-editable:empty::before,
200      .tiny-editable:has(> br[data-mce-bogus]:first-child)::before {
201        content: "Write here...";
202        position: absolute;
203        top: 0;
204        left: 0;
205        color: #999;
206      }
207    `
208  });
209</script>
210<style>
211  body {
212    margin: 1rem 2rem;
213    font-family:Arial, sans-serif;
214  }
215
216  main {
217    max-width: 980px;
218    margin: auto;
219  }
220</style>
221</head>
222
223<body>
224<main>
225  <textarea id="editor">
226
227    <table style="background-color: #f9f9fb; width: 100%;" border="0">
228      <tr>
229        <td align="center">
230
231          <table border="0" width="100%" style="max-width: 660px; width: 100%; background-color: #0b132c; border: 2px solid #eee; border-radius: 8px 8px 0 0; overflow: hidden" cellpadding="0" cellspacing="0">
232            <tr>
233
234              <td style="padding: 32px 8px 16px 64px;" width="50%">
235                <img src="images/sbc-cms-template-logo.png" alt="The Tiny Technologies logo" class="tiny-logo" width="120" data-mce-src="images/sbc-cms-template-logo.png">
236                <div class="tiny-editable" style="font-family: 'helvetica', sans-serif; color: #fff; font-size: 16px; line-height: 1.5;">
237                  <h1>Email creation made simple!</h1>
238                </div>
239              </td>
240              <td style="padding: 16px 64px 16px 8px;" width="50%">
241                <img src="images/sbc-email-cover.png" width="256" height="256" alt="">
242              </td>
243            </tr>
244          </table>
245
246          <table border="0" width="100%" style="max-width: 660px; width: 100%; background-color: #ffffff; border: 2px solid #eee; border-radius: 8px; overflow: hidden" cellpadding="0" cellspacing="0">
247            <tr>
248              <td style="padding: 16px 64px 0;" colspan="2">
249                <div class="tiny-editable" style="font-family: 'helvetica', sans-serif; color: #243376;">
250                  <p style="font-size: 20px; text-align: center;">Hey {{First.Name}},</p>
251                  <p style="font-size: 20px; text-align: center;">What are you building?</p>
252                </div>
253              </td>
254            </tr>
255            <tr>
256              <td style="padding: 0 8px 16px 64px;" width="50%">
257                <div class="tiny-editable" style="font-family: 'helvetica', sans-serif; color: #243376;">
258                  <p style="text-align: center;"><img src="images/sbc-email-webmail.png" alt="Illustration of an email" width="256" height="186"></p>
259                  <p style="text-align: center;">An email client?<br><span style="color: rgb(149, 165, 166);"><em>i.e. the next Gmail</em></span></p>
260                </div>
261              </td>
262              <td style="padding: 0 64px 16px 8px;" width="50%">
263                <div class="tiny-editable" style="font-family: 'helvetica', sans-serif; color: #243376;">
264                  <p style="text-align: center;"><img src="images/sbc-email-marketingemail.png" alt="Illustration of a marketing email" width="256" height="186"></p>
265                  <p style="text-align: center;">Email marketing software?<em><br></em><span style="color: rgb(149, 165, 166);"><em>i.e. the next Mailchimp</em>
266                  </div>
267                </td>
268              </tr>
269              <tr>
270                <td style="padding: 0 64px 16px;" colspan="2">
271                  <div class="tiny-editable" style="font-family: 'helvetica', sans-serif; color: #243376;">
272                    <h2 style="text-align: center; font-size: 20px;">Then use the only WYSIWYG editor <br>trusted by 1.5M developers.</h2>
273                    <p style="text-align: center;"><a style="background-color: rgb(51, 93, 255); padding: 12px 16px; color: rgb(255, 255, 255); border-radius: 4px; text-decoration: none; display: inline-block;" href="https://tiny.cloud">Try TinyMCE free for 14 days</a></p>
274                    <p style="text-align: center;">💙 This email was built with TinyMCE 💙</p>
275                    <p style="text-align: center;">First, import your layout, and then specify editable regions. Next, define your merge tags and content snippets.</p>
276                    <p style="text-align: center;">When it&rsquo;s time to hit send, generate&nbsp;CSS-inlined HTML that&rsquo;s ready for the inbox with one simple API call.</p>
277                  </div>
278                </td>
279              </tr>
280              <tr>
281                <td style="background-color: #eff0f6; padding: 24px 64px;" colspan="2">
282                  <p style="margin: 0; font-family: 'helvetica'; font-size: 12px; color: #a0a9c5;"><a href="#" style="color: #a0a9c5;">Update your email preferences</a> or <a href="#" style="color: #a0a9c5;">unsubscribe</a>.</p>
283                  <p style="margin: 0; font-family: 'helvetica'; font-size: 12px; color: #a0a9c5;">Tiny Technologies | 2100 Geng Road, Palo Alto, CA 94303 USA</p>
284                </td>
285              </tr>
286            </table>
287        </td>
288      </tr>
289    </table>
290
291  </textarea>
292
293  <p>💡 TinyMCE's <a href="https://www.tiny.cloud/docs/tinymce/6/inline-css/">Inline CSS</a> plugin can be used to process the editor contents and apply all CSS styles inline, helping to make content ready for the inbox. Open up dev tools and click the button below to see the CSS-inlined editor contents in the console.</p>
294    <button onclick="tinymce.get('editor').plugins.inlinecss.getContent().then((value) => { console.log(value.html); });">Get Inlined CSS</button>
295</main>
296
297</body>
298</html>

What’s your document management editing project?

The basic editing experience every DMS should start with: includes all the editing controls your users expect plus PowerPaste, Comments, Enhanced Image Editing and more.

1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title>TinyMCE DMS Starter Config</title>
6  <meta name="viewport" content="width=device-width, initial-scale=1">
7  <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
8
9  <script>
10    // TinyMCE Document Management System (DMS) Starter Config
11    // Quick start video - https://www.youtube.com/watch?v=_Pp1xnhQqec
12
13    tinymce.init({
14      // Select the element(s) to add TinyMCE to using any valid CSS selector
15      selector: "#editor",
16
17      // Tip - To keep TinyMCE lean, only include the plugins you need.
18      plugins: "advcode advlist advtable advtemplate anchor autocorrect autolink autosave casechange charmap checklist codesample directionality editimage emoticons export footnotes formatpainter help image insertdatetime link linkchecker lists media mediaembed mergetags nonbreaking pagebreak permanentpen powerpaste searchreplace table tableofcontents tinycomments tinymcespellchecker typography visualblocks visualchars wordcount",
19
20      // Configure the toolbar so it fits your app. There are many
21      // different configuration options available:
22      // https://www.tiny.cloud/docs/tinymce/6/toolbar-configuration-options/
23      toolbar: "undo redo spellcheckdialog  | blocks fontfamily fontsizeinput | bold italic underline forecolor backcolor | link image addcomment showcomments  | align lineheight checklist bullist numlist | indent outdent | inserttemplate | removeformat typography",
24
25      // Enable Multi-Root Editing by setting the editable_root option to false
26      // This sets everything in the editor to be non-editable. Specify editable
27      // regions by adding contenteditable="true" to elements.
28      // TODO: Link to docs article (to publish end of June)
29      editable_root: false,
30
31      // The height option accepts any valid CSS for height
32      // If your editor is expected to get larger than the viewport,
33      // the sticky toolbar is useful for keeping the controls
34      // always visible
35      // https://www.tiny.cloud/docs/tinymce/6/editor-size-options/
36      // https://www.tiny.cloud/docs/tinymce/6/menus-configuration-options/#toolbar_sticky
37      height: '700px',
38      toolbar_sticky: true,
39
40      // You can customize the look and feel of the UI using skins and icons.
41      // In this demo we are using the premium 'thin' icon pack, which matches popular
42      // document editing experiences.
43      // https://www.tiny.cloud/docs/tinymce/6/editor-icons/
44      //
45      // The icons option is disabled by default in this config, but can be enabled
46      // by uncommenting the lines below. In order for it to load properly, you must
47      // be on a premium plan or trial, and load TinyMCE from the cloud or be
48      // running a fully self-hosted deployment.
49      //
50      // icons: 'thin',
51
52      // The autosave plugin helps prevent data loss if the end-user accidentally
53      // closes the browser by storing the content in the browser's local storage
54      // There are many configuration options to control things like save interval
55      // and retention. The below option loads any unsaved content from local
56      // storage into TinyMCE
57      // https://www.tiny.cloud/docs/tinymce/6/autosave/#autosave_restore_when_empty
58      autosave_restore_when_empty: true,
59
60      // Enable Spell Checker Pro and specify the default and available languages
61      // https://www.tiny.cloud/docs/tinymce/6/introduction-to-tiny-spellchecker/
62      spellchecker_active: true,
63      spellchecker_language: 'en_US',
64      spellchecker_languages: 'English (United States)=en_US,English (United Kingdom)=en_GB,Danish=da,French=fr,German=de,Italian=it,Polish=pl,Spanish=es,Swedish=sv',
65
66      // Advanced Typography allows users to apply 25+ typographic conventions to their content.
67      // Specify the language(s) you want the plugin to use. In this case we are just allowing
68      // English, but an array of languages can also be specified.
69      // https://www.tiny.cloud/docs/tinymce/6/advanced-typography/
70      typography_langs: [ 'en-US' ],
71      typography_default_lang: 'en-US',
72
73      // The Tiny Comments plugin enables you to quickly get collaboration up and
74      // running. There are a lot of options, but here are the most basic
75      // ones to get you started
76      // https://www.tiny.cloud/docs/tinymce/6/introduction-to-tiny-comments/
77      tinycomments_mode: 'embedded',
78      tinycomments_author: 'rmartel',
79      tinycomments_author_name: 'Rosalina Martel',
80      tinycomments_author_avatar: 'https://www.tiny.cloud/images/avatars/avatar-RosalinaMartel.jpg',
81
82      // Show the comments sidebar by default to encourage collaboration and discovery
83      // https://www.tiny.cloud/docs/tinymce/6/customsidebar/#sidebar_show
84      sidebar_show: 'showcomments',
85
86      // Merge Tags lets users add non-editable merge tags to your content, so your
87      // app can then populate dynamic content into rendered documents
88      // https://www.tiny.cloud/docs/tinymce/6/mergetags/
89      mergetags_list: [
90        {
91          value: 'Document.Title',
92          title: 'Document Title'
93        },
94        {
95          value: 'Publish.Date',
96          title: 'Publish Date'
97        },
98        {
99          value: 'Author.Name',
100          title: 'Author Name'
101        }
102      ],
103
104      // Advanced Templates lets users create and reuse content snippets
105      // This configuration makes use of the advtemplate_template option,
106      // which allows you to specify pre-defined content snippets inside
107      // the config. You can also connect Advanced Templates to your database
108      // and allow users to create their own snippets.
109      // https://www.tiny.cloud/docs/tinymce/6/advanced-templates/
110      advtemplate_templates: [
111        {
112          title: 'Non-compete clause',
113          content: '<h3>NON-COMPETE</h3>\n<p>This agreement contains a non-compete clause, which prohibits the&nbsp;{{Employee.Name}} from directly or indirectly engaging in similar activities to those performed in their employment with the Company, within {{Distance.Miles}} miles of the Company&rsquo;s business premises, for a period of {{Noncompete.Years}} years after the termination of their employment. This clause shall apply regardless of whether the Employee is employed by a competitor or any other third party.</p>'
114        },
115        {
116          title: 'Corporate hierarchy diagram',
117          content: '<p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.postimg.cc/tJ82QN1H/corporate-hierarchy.png" width="282" height="248"></p>'
118        },
119        {
120          title: 'More reusable document content',
121          content: '<p>Insert any HTML content as a template!</p>'
122        }
123      ],
124
125      // The following CSS will be injected into the editor, extending
126      // the default styles.
127      // In a real world scenario, it's recommended to use the content_css
128      // option to load a separate CSS file. This makes editing easier too.
129      // https://www.tiny.cloud/docs/tinymce/6/add-css-options/
130      content_style: `
131        body {
132          background: #fff;
133        }
134
135        /* Disable the blue "focus" border for the editable region */
136        .editable-section:focus-visible {
137          outline: none !important;
138        }
139
140        .header,
141        .footer {
142          font-size: 0.8rem;
143          color: #ddd;
144        }
145
146        .header {
147          display: flex;
148          justify-content: space-between;
149          padding: 0 0 1rem 0;
150        }
151
152        .header .right-text {
153          text-align: right;
154        }
155
156        .footer {
157          padding:2rem 0 0 0;
158          text-align: center;
159        }
160
161        /* Apply page-like styling */
162        @media (min-width: 840px) {
163          html {
164            background: #eceef4;
165            min-height: 100%;
166            padding: 0.5rem;
167          }
168
169          body {
170            background-color: #fff;
171            box-shadow: 0 0 4px rgba(0, 0, 0, .15);
172            box-sizing: border-box;
173            margin: 1rem auto 0;
174            max-width: 820px;
175            min-height: calc(100vh - 1rem);
176            padding: 2rem 6rem 2rem 6rem;
177          }
178        }
179      `,
180    });
181  </script>
182  <style>
183    body {
184      margin: 4rem auto;
185      padding: 0 2rem;
186      background-color: #f9f9fb;
187    }
188
189    main {
190      width: 100%;
191    }
192  </style>
193</head>
194<body>
195  <main>
196    <textarea id="editor">
197      <div class="header">
198        <span class="left-text">This is a non-editable header</span>
199        <span class="right-text">August 12, 2023</span>
200      </div>
201      <div class="editable-section" contenteditable="true">
202        <h1 style="text-align: center;"><span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_95621585221662750341026" data-mce-annotation="tinycomments">What&rsquo;s</span> your Document Management editing project?&nbsp;</h1>
203        <p style="text-align: center;">Are you:</p>
204        <table style="border-collapse: collapse; width: 100%;" border="1"><colgroup> <col style="width: 50%;"> <col style="width: 50%;"> </colgroup>
205          <tbody>
206            <tr>
207              <td style="text-align: center;"><strong><span style="font-size: 36pt;">📝</span><br><br>Building a next-generation document creation solution</strong> and want to offer the best rich text editing experience to your content creators?</td>
208              <td>
209                <p style="text-align: center;"><span style="font-size: 36pt;"><strong>🗂️</strong></span></p>
210                <p style="text-align: center;"><strong>Developing an innovative documentation system</strong> to organize, track, store, and share documents, and you want to add editing capabilities?</p>
211              </td>
212            </tr>
213          </tbody>
214        </table>
215        <p style="text-align: center;">Or perhaps it&rsquo;s both? Then use the only WYSIWYG editor that&rsquo;s trusted by <a href="https://tiny.cloud" target="_blank" rel="noopener">1.5M developers</a>.</p>
216        <h3>Curious about TinyMCE?</h3>
217        <p>Play with this demo to see how TinyMCE works! Try out these popular document creation functions:</p>
218        <ul>
219          <li>Copy complex rich content from another app into the editor</li>
220          <li>Add or resolve a comment</li>
221          <li>Drag-and-drop an image from your computer, then edit it within TinyMCE</li>
222          <li>Insert {{dynamic.content}} into the document using Merge Tags (start typing "{{")</li>
223          <li>Any other functionality that you would expect in a document editor!</li>
224        </ul>
225        <p>Watch the video below to see how easy it is to get started (embedded in one click using <em>Enhanced Media Embed</em>):</p>
226        <div style="left: 0px; width: 100%; height: 0px; position: relative; padding-bottom: 56.25%; max-width: 650px;" data-ephox-embed-iri="https://www.youtube.com/watch?v=_Pp1xnhQqec"><iframe style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; border: 0px;" src="https://www.youtube.com/embed/_Pp1xnhQqec?rel=0&amp;controls=0" scrolling="no" allowfullscreen="allowfullscreen"></iframe></div>
227      </div>
228      <div class="footer">
229        Copyright 2023 ACME Document Solutions
230      </div>
231      <!--tinycomments|2.1|data:application/json;base64,eyJtY2UtY29udmVyc2F0aW9uXzk1NjIxNTg1MjIxNjYyNzUwMzQxMDI2Ijp7InVpZCI6Im1jZS1jb252ZXJzYXRpb25fOTU2MjE1ODUyMjE2NjI3NTAzNDEwMjYiLCJjb21tZW50cyI6W3sidWlkIjoibWNlLWNvbnZlcnNhdGlvbl85NTYyMTU4NTIyMTY2Mjc1MDM0MTAyNiIsImF1dGhvciI6InJtYXJ0ZWwiLCJhdXRob3JOYW1lIjoiUm9zYWxpbmEgTWFydGVsIiwiYXV0aG9yQXZhdGFyIjoiaHR0cHM6Ly93d3cudGlueS5jbG91ZC9pbWFnZXMvYXZhdGFycy9hdmF0YXItUm9zYWxpbmFNYXJ0ZWwuanBnIiwiY29udGVudCI6IkNhbiB3ZSBpbmNyZWFzZSB0aGUgc2l6ZSBvZiB0aGUgaGVhZGluZz8iLCJjcmVhdGVkQXQiOiIyMDIyLTA5LTA5VDE5OjA1OjQxLjAyNVoiLCJtb2RpZmllZEF0IjoiMjAyMi0wOS0wOVQxOTowNTo0MS4wMjVaIn0seyJ1aWQiOiJtY2UtcmVwbHlfNzk5MTUxODA5MjE2NjI3NTA1NTM5MjYiLCJhdXRob3IiOiJhdmlzbWFyYSIsImF1dGhvck5hbWUiOiJBbmdlbCBWaXNtYXJhIiwiYXV0aG9yQXZhdGFyIjoiaHR0cHM6Ly93d3cudGlueS5jbG91ZC9pbWFnZXMvYXZhdGFycy9hdmF0YXItQW5nZWxWaXNtYXJhLmpwZyIsImNvbnRlbnQiOiJTdXJlIHRoaW5nIOKAkyBob3cncyB0aGlzPyIsImNyZWF0ZWRBdCI6IjIwMjItMDktMDlUMTk6MDk6MTMuOTI2WiIsIm1vZGlmaWVkQXQiOiIyMDIyLTA5LTA5VDE5OjA5OjEzLjkyNloifV19fQ==-->
232    </textarea>
233  </main>
234</body>
235</html>

New Task

Log a Call

New Event

FromSarah Humberson <shumberson@tiny.cloud>ToArt Vandelay <art@vandelay.website>SubjectFollowing up on our call

Related toVandelay Industries

Send

Schedule

Save draft

The basic editing experience every CRM should start with. Includes all the editing controls your users expect, plus PowerPaste, Spell Checker Pro, Templates and more.

1<!--
2This is an example of how you can use TinyMCE for the email capability
3within your CRM. The config can be adapted to other use cases like logging
4calls, writing opportunity descriptions, creating events, and more.
5-->
6
7<!doctype html>
8<html>
9<head>
10<meta charset="utf-8">
11<title>TinyMCE CRM Starter Config (Email Functionality)</title>
12<meta name="viewport" content="width=device-width, initial-scale=1">
13<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
14<script>
15  // TinyMCE CRM Starter Config
16  // Quick start video - https://www.youtube.com/watch?v=XK2fKzou_s0
17
18  tinymce.init({
19    // Select the element(s) to add TinyMCE to using any valid CSS selector
20    selector: '#editor',
21
22    // Tip - To keep TinyMCE lean, only include the plugins you need.
23    plugins: 'advcode advtemplate autocorrect autoresize editimage emoticons image inlinecss link linkchecker lists mergetags powerpaste tinymcespellchecker',
24
25    // To minimize our editor's impact on a busy CRM screen, hide the menubar and statusbar
26    // https://www.tiny.cloud/docs/tinymce/6/menus-configuration-options/#main-editor-menubar-behavior
27    // https://www.tiny.cloud/docs/tinymce/6/statusbar-configuration-options/
28    menubar: false,
29    statusbar: false,
30
31    // The autoresize plugin adjusts the height of the editor as content
32    // expands, up to a max height.
33    // https://www.tiny.cloud/docs/tinymce/6/autoresize/
34    min_height: 300,
35    max_height: 500,
36    autoresize_bottom_margin: 20,
37
38    // This option allows you to specify the buttons and the order that they
39    // will appear on TinyMCE's toolbar.
40    // https://www.tiny.cloud/docs/tinymce/6/toolbar-configuration-options/
41    toolbar: 'undo redo spellchecker | formatgroup | link emoticons image inserttemplate mergetags | code',
42
43    // Toolbar groups is a useful concept for organizing the toolbar into
44    // sub toolbars that show up as a floating toolbar.
45    // This particular toolbar config is inspired by Gmail.
46    // https://www.tiny.cloud/docs/tinymce/6/toolbar-configuration-options/#toolbar_groups
47    toolbar_groups: {
48      formatgroup: {
49        icon: 'format',
50        tooltip: 'Formatting',
51        items: 'blocks fontfamily fontsize | bold italic underline strikethrough forecolor | align bullist numlist outdent indent blockquote'
52      }
53    },
54
55    // Move the toolbar below the editable area instead of on top
56    // https://www.tiny.cloud/docs/tinymce/6/menus-configuration-options/#toolbar_location
57    toolbar_location: 'bottom',
58
59    // Advanced Code Editor lets power users edit the editor's underlying HTML in real time,
60    // with indents and color coding. Enable inline view for a more seamless code editing
61    // experience.
62    // https://www.tiny.cloud/docs/tinymce/6/advcode/
63    advcode_inline: true,
64
65    // You can customize the font size and units using font_size_formats
66    // Use pixels when sending email according to best practices
67    // https://www.tiny.cloud/docs/tinymce/6/user-formatting-options/#font_size_formats
68    font_size_formats: "8px 10px 12px 14px 18px 24px 36px",
69
70    // The formats option is where custom formatting options are defined.
71    // In this case we define a couple of headings and text formats.
72    // The p is configured to match against multiple formats to make sure
73    // the styleselect toolbar menu button shows paragraphs as enabled on
74    // p tags that lacks style attribute. The first item in the array will
75    // be the one applied when choosing the format via the styleselect
76    // toolbar button.
77    // https://www.tiny.cloud/docs/tinymce/6/content-formatting/#formats
78    formats: {
79      h1: {block: 'h1'},
80      h2: {block: 'h2'},
81      p: [
82        {block: 'p'},
83        {selector: 'p'}
84      ],
85      small: {block: 'small', styles: {fontSize: '12px', color: '#aaaaaa'}}
86    },
87
88    // An alternative to the styleselect toolbar button is the formatselect button
89    // which is a simpler version of the styleselect button. It is configured
90    // using the block_formats option.
91    // https://www.tiny.cloud/docs/tinymce/6/user-formatting-options/#block_formats
92    block_formats: 'Normal=p; Heading=h1; Sub heading=h2; Small=small',
93
94    // In order to force TinyMCE to apply inline styles to the default paragraph
95    // text (required by email), we can use forced_root_block together with
96    // forced_root_block_attrs.
97    // https://www.tiny.cloud/docs/tinymce/6/content-filtering/#forced_root_block
98    forced_root_block: 'p',
99    forced_root_block_attrs: {'style': 'font-size: 14px; font-family: helvetica, arial, sans-serif;'},
100
101    // Only allow certain image types to be uploaded to your CRM or sent via emails
102    // https://www.tiny.cloud/docs/tinymce/6/file-image-upload/#images_file_types
103    images_file_types: "jpeg,jpg,png,gif",
104
105    // In some cases, you may want to disable the spell checker by default as red squiggly
106    // underlines may become a distraction on a busy CRM screen
107    // Spell Checker Pro can still be toggle on/off by the user, using the toolbar or menubar
108    // https://www.tiny.cloud/docs/tinymce/6/introduction-to-tiny-spellchecker/
109    spellchecker_active: false,
110
111    // To increase productivity and minimize extra formatting from other apps, disable
112    // the PowerPaste dialog box and paste over cleaned HTML only
113    // https://www.tiny.cloud/docs/tinymce/6/powerpaste-options/
114    powerpaste_word_import: 'clean',
115    powerpaste_googledocs_import: 'clean',
116    powerpaste_html_import: 'clean',
117
118    // In emails we don't use targets for links so we hide the target drop down in the link
119    // dialog. If using this config for another CRM use case, for example knowledge base
120    // page creation, you can remove this setting.
121    // https://www.tiny.cloud/docs/tinymce/6/link/#link_target_list
122    link_target_list: false,
123
124    // A common feature for email marketing tools is to provide a prepopulated
125    // list of links to choose. Here we define that list.
126    // https://www.tiny.cloud/docs/tinymce/6/link/#link_list
127    link_list: [
128      { title: "Product demo", value: "https://www.tiny.cloud/" },
129      { title: "Pricing", value: "https://www.tiny.cloud/pricing/" },
130      { title: "Sign up", value: "https://www.tiny.cloud/signup/" },
131      {
132        title: "Case studies",
133        value: "https://www.tiny.cloud/solutions/content-authoring-tool/",
134        menu: [
135          { title: "Thomson Reuters", value: "https://assets.ctfassets.net/sn6g75ou164i/529dmerPtej8eu8wxRFSIQ/9eeeacaf7c7f45b43db991a7064c354d/tiny-case-study-thomson-reuters.pdf" },
136          { title: "Morning Brew", value: "https://assets.ctfassets.net/sn6g75ou164i/5Y5ETFsqsbxrn8KrfxxuSn/eba8bdd4be3b378b167bc9e9016f9206/tiny-case-study-morning-brew_1_.pdf" },
137          { title: "Accelo", value: "https://assets.ctfassets.net/sn6g75ou164i/4Zg8kQr3vcRpwWCcjwuwTy/0363c30c76032d69d25b68a6a625126b/tiny-case-study-accelo.pdf" }
138        ]
139      }
140    ],
141
142    // Merge Tags lets users add non-editable personalization tokens to your content, so your
143    // app can then merge the personalized content into emails before sending
144    // https://www.tiny.cloud/docs/tinymce/6/mergetags/
145    mergetags_list: [
146      {
147        title: "Lead",
148        menu: [{
149          value: 'Lead.FirstName',
150          title: 'Lead First Name'
151        },
152        {
153          value: 'Lead.LastName',
154          title: 'Lead Last Name'
155        },
156        {
157          value: 'Lead.Organization',
158          title: 'Lead Organization'
159        },
160        {
161          value: 'Lead.Email',
162          title: 'Lead Email'
163        }
164        ]
165      },
166      {
167        title: "Sender",
168        menu: [{
169          value: 'Sender.FirstName',
170          title: 'Sender First Name'
171        },
172        {
173          value: 'Sender.LastName',
174          title: 'Sender Last Name'
175        },
176        {
177          value: 'Sender.Organization',
178          title: 'Sender Organization'
179        },
180        {
181          value: 'Sender.Email',
182          title: 'Sender Email'
183        }
184        ]
185      },
186      {
187        title: 'Subscription',
188        menu: [{
189          value: 'Subscription.UnsubscribeLink',
190          title: 'Unsubscribe Link'
191        },
192        {
193          value: 'Subscription.Preferences',
194          title: 'Subscription Preferences'
195        }
196        ]
197      }
198    ],
199
200    // Advanced Templates lets users create, modify and organize content snippets
201    // inside the editor. This example uses a basic configuration, where you
202    // specify the content snippets in the config. Check out the docs for how to
203    // enable users to create their own snippets.
204    // https://www.tiny.cloud/docs/tinymce/6/advanced-templates/
205    advtemplate_templates: [
206      {
207        title: 'Outbound email',
208        content: '<p style="font-size: 14px; font-family: helvetica, arial, sans-serif;">Hi {{Lead.FirstName}},</p><p style="font-size: 14px; font-family: helvetica, arial, sans-serif;">My name is {{Sender.FirstName}} with {{Sender.Organization}}.</p><p style="font-size: 14px; font-family: helvetica, arial, sans-serif;">We help companies just like yours securely store data in the cloud. I wanted to learn how you handle data storage at {{Lead.Organization}} and show you some of the exciting technology we&quot;re working on.</p><p style="font-size: 14px; font-family: helvetica, arial, sans-serif;">Are you available for a quick call tomorrow afternoon?</p><p style="font-size: 14px; font-family: helvetica, arial, sans-serif;">{{Sender.FirstName}}</p>'
209      },
210      {
211        title: 'Follow-up email',
212        content: '<p style="font-size: 14px; font-family: helvetica, arial, sans-serif;">Hi {{Lead.FirstName}},</p><p style="font-size: 14px; font-family: helvetica, arial, sans-serif;">Thank you for taking the time to explore a potential partnership today! It felt like our product could help you solve some of the issues that you&rsquo;re having within {{Lead.Organization}}, especially in these areas:</p><ul><li style="font-size: 14px; font-family: helvetica, arial, sans-serif;">The offsite data warehouse will allow you to guarantee business continuity</li><li style="font-size: 14px; font-family: helvetica, arial, sans-serif;">Metered usage will ensure you only pay for what you consume</li><li style="font-size: 14px; font-family: helvetica, arial, sans-serif;">Level III security protocols will mean you will meet security requirements for your jurisdiction</li></ul><p style="font-size: 14px; font-family: helvetica, arial, sans-serif;">I understand that now you will discuss and agree internally on the next step. Please let me know if you have any questions or if there is anything I can do to help. If not, I&rsquo;ll talk to you next week.</p><p style="font-size: 14px; font-family: helvetica, arial, sans-serif;">Best,<br>{{Sender.FirstName}}</p>'
213      }
214    ],
215
216    // The following css will be injected into the editor, extending
217    // the default styles.
218    // In a real world scenario, with much more custom styles for headings
219    // links, tables, images etc, it's recommended to use the content_css
220    // option to load a separate CSS file. This makes editing easier too.
221    // https://www.tiny.cloud/docs/tinymce/6/add-css-options/
222    content_style: `
223      body {
224        font-family: -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
225        font-size: 14px;
226        line-height: 1.5rem;
227      }
228
229      h1 {
230        font-size: 24px;
231      }
232
233      h2 {
234        font-size: 18px;
235      }
236    `
237
238    // Next step: Check out Tiny Drive for easy cloud storage of your users'
239    // images and media. Integrates seamlessly with TinyMCE.
240    // https://www.tiny.cloud/drive/
241
242  });
243</script>
244<style>
245    body {
246        font-family: -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
247        font-size: 14px;
248        margin: 2rem;
249    }
250
251    main {
252        max-width: 800px;
253        margin: auto;
254    }
255</style>
256</head>
257<body>
258<main>
259<textarea id="editor">
260  <p>Hi {{Lead.FirstName}},</p>
261  <h2>What's your CRM editor project?</h2>
262  <p>Are you:</p>
263  <ul>
264    <li>Building a new CRM and need to add rich text editing capabilities?</li>
265    <li>Extending your existing CRM and need a more extensive rich text editor?</li>
266  </ul>
267  <p>Then use the only WYSIWYG CRM editor that&rsquo;s trusted by 1.5M devs.</p>
268  <p><strong>Curious about TinyMCE? </strong>Play with this demo to see how our CRM editor works 😊</p>
269  <p>Press <img src="https://tiny.cloud/images/solutions/crm-editor/demo/i_formatting.png" width="18" height="18" alt="Formatting">&nbsp;to see how a toolbar group works, and click on <img src="https://tiny.cloud/images/solutions/crm-editor/demo/i_insert_template.png" width="18" height="18" alt="Insert Template"> and <img src="https://tiny.cloud/images/solutions/crm-editor/demo/i_insert_token.png" width="18" height="18" alt="Insert Token"> for inspiration to include pre-defined and user defined templates, as well as merge tags.</p>
270</textarea>
271<p>💡 TinyMCE's <a href="https://www.tiny.cloud/docs/tinymce/6/inline-css/">Inline CSS</a> plugin can be used to process the editor contents and apply all CSS styles inline, helping to make content ready for the inbox. Open up dev tools and click the button below to see the CSS-inlined editor contents in the console.</p>
272<button onclick="tinymce.activeEditor.plugins.inlinecss.getContent().then((value) => { console.log(value.html); });">Get Inlined CSS</button>
273</main>
274</body>
275</html>

[DEMO] Show TinyMCE in action

Comments

Add a comment ...

Great job! 👍

Done

Details

Assignee

Mike Smith

Reporter

Tiny

Status

Ready

Labels

TinyMCE6

Team