Tiny Logo
14-day Cloud trial
Start today. For free.

One editor. 50+ features. Zero constraints. After your trial, retain the advanced features.

Try Professional Plan for FREE
PricingContact Us
Log InGet Started

The HTML text
editor used by
1.5M+ developers

Develop faster. Innovate faster.
Succeed faster.

Get FREE Cloud API KeyDownload TinyMCE SDK
View our Documentation
1
<!DOCTYPE html>
2
<html>
3
<head>
4  
  
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
5  
  
<script>tinymce.init({selector:'textarea'});</script>
6
</head>
7
<body>
8  
  
<textarea>Next, use our Get Started docs to setup Tiny!</textarea>
9
</body>
10
</html>

What developers are saying
about TinyMCE

Justin Hardin's avatar
Justin Hardin@jhardin925

This is what top-notch leadership and support look like!

Thank you @andrew_roberts @_spyder and the @joinTiny team for the help with setting up a self-hosted Tinymce version for Next.js 😊

Ben Carter's avatar
Ben Carter@BenCarter78

Looking at wysiwyg editors and @tinymce seems to have come a long way from the last time I used it, really slick onboarding! 👌 Looks great!

Abdulramon Jemil's avatar
Abdulramon Jemil@AbdulramonJemil

I'm beginning to love @tinymce more and more. Been exploring its features since morning...

Stefano Novelli 🤌's avatar
Stefano Novelli 🤌@stefano9lli

@tinymce + @laravelphp nova = ❤️

Marty Friedel's avatar
Marty Friedel@MartyFriedel

Just like that... @joinTiny is upgraded to v6 in my current project. Smooth process, although the toolbar spacing needed seriously re-grouping to keep everything on one line, and had to drop a few buttons for space reasons. It fits so well with the rest of the app's UI.

Ash Allen's avatar
Ash Allen 🚀@AshAllenDesign

There's quite a few different ones out there, but I've always found TinyMCE to be nice to work with. It's pretty simple to get up and running and you can extend it quite a lot to add new functionality. Do you think this'd work for your project? 😄

SeaCat's avatar

Thanks! I tried many other tools - all open-source and came to the conclusion that many people may disagree with.

I decided to go with TinyMCE not because it's open-source but because they have a commercial license what may mean they will fix bugs and add great features faster.

Oussama Jaaouani's avatar
Oussama Jaaouani@NTechnologiesL1

We tried many other #tools and we finally decided to go with @tinymce, simply because you're the best.

Peter Levels's avatar
Peter Levels@levelsio

✨ I found out ~50% of my support tickets on remoteok.com were about Markdown issues:

- non-tech people don't understand it
- format is inconsistent
- buggy if complex like * a list with **bold text**

So I now switched to TinyMCE which is HTML: tiny.cloud

Nitin Raturi's avatar
Nitin Raturi@raturinitin

There are a lot of #WYSIWYG editors available on the internet, some are paid and some are free. After exploring and experimenting with various editors I found tinymce, one of the best WYSIWYG editors.

Why TinyMCE

Developer friendly

Lightweight. Feature loaded. Mobile optimized.

Install TinyMCE by adding just a few lines of code to your app. You have full control of the code, UI, configuration and integrations. Build, ship and scale faster than ever before.

Explore documentation →

Build or extend your project
using our rich text editor

Making The World a Better Place
CMS avatar
Tiny Logo
CMS author right menuCMS tags right menuCMS cover right menu

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

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1">
6
7  <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
8
9  <script>
10    // TinyMCE CMS Starter Config
11    // Quick start video - https://www.youtube.com/watch?v=cbkrZMbVF60
12
13    // Initialize TinyMCE
14    tinymce.init({
15      // Select the element(s) to add TinyMCE to using any valid CSS selector
16      selector: 'textarea',
17
18      // Tip - To keep TinyMCE lean, only include the plugins you need.
19      plugins: 'a11ychecker advcode advlist advtable anchor autocorrect autosave editimage image link linkchecker lists media mediaembed pageembed powerpaste searchreplace table template tinymcespellchecker typography visualblocks wordcount',
20
21      // Configure the toolbar so it fits your app. There are many
22      // different configuration options available:
23      // https://www.tiny.cloud/docs/tinymce/6/toolbar-configuration-options/
24      toolbar: 'undo redo | styles | bold italic underline strikethrough | align | table link image media pageembed | bullist numlist outdent indent | spellcheckdialog a11ycheck typography code',
25
26      // Specify the height of the editor, including toolbars and the statusbar.
27      // https://www.tiny.cloud/docs/tinymce/6/customize-ui/#changing-editor-height-and-width
28      height: 540,
29
30      // The Accessibility Checker plugin offers extensive controls over which
31      // level of compliance to test against and which rules to enforce.
32      // https://www.tiny.cloud/docs/tinymce/6/a11ychecker/
33      a11ychecker_level: 'aaa',
34
35      // Advanced Typography allows users to apply 25+ typographic conventions to their content.
36      // Specify the language(s) you want the plugin to use. In this case we are just allowing
37      // English, but an array of languages can also be specified.
38      // https://www.tiny.cloud/docs/tinymce/6/advanced-typography/
39      typography_langs: [ 'en-US' ],
40      typography_default_lang: 'en-US',
41
42      // Advanced Code Editor lets power users edit the editor's underlying HTML in real time,
43      // with indents and color coding. Enable inline view for a more seamless code editing
44      // experience.
45      // https://www.tiny.cloud/docs/tinymce/6/advcode/
46      advcode_inline: true,
47
48      // Configure the style menu and define available formats
49      // Here, we have defined a medium sized image format as an example.
50      // There is a lot more you can do with formats:
51      // https://www.tiny.cloud/docs/tinymce/6/filter-content/
52      style_formats: [
53        {title: 'Heading 1', block: 'h1'},
54        {title: 'Heading 2', block: 'h2'},
55        {title: 'Paragraph', block: 'p'},
56        {title: 'Blockquote', block: 'blockquote'},
57        {title: 'Image formats'},
58        {title: 'Medium', selector: 'img', classes: 'medium'},
59      ],
60
61      // Turn off manual resizing of images as we want to control image sizes
62      // using the formats previously specified.
63      // https://www.tiny.cloud/docs/tinymce/6/content-behavior-options/#object_resizing
64      object_resizing: false,
65
66      // TinyMCE offers a wide range of options to control what classes, styles
67      // and attributes are allowed in the content. All other classes will be
68      // filtered out.
69      // https://www.tiny.cloud/docs/tinymce/6/content-filtering/#valid_classes
70      valid_classes: {
71        'img': 'medium',
72        'div': 'related-content'
73      },
74
75      // Enable image fig captions
76      // https://www.tiny.cloud/docs/tinymce/6/image/#image_caption
77      image_caption: true,
78
79      // Prevent editing of the related content block by making the whole
80      // block noneditable.
81      // https://www.tiny.cloud/docs/tinymce/6/content-behavior-options/#noneditable_class
82      noneditable_class: 'related-content',
83
84      // Templates is useful for when users need to insert repeatable content,
85      // for example a related content block.
86      // https://www.tiny.cloud/docs/tinymce/6/template/
87      templates: [
88        {
89          title: 'Related content',
90          description: 'This template inserts a related content block',
91          content: '<div class="related-content"><h3>Related content</h3><p><strong>{$rel_lede}</strong> {$rel_body}</p></div>'
92        }
93      ],
94
95      // This option makes it easy to inject dynamic content into the template.
96      template_replace_values: {
97        rel_lede: 'Lorem ipsum',
98        rel_body: 'dolor sit amet...',
99      },
100
101      // Specifies the dynamic content inside the insert template dialog preview
102      template_preview_replace_values: {
103        rel_lede: 'Lorem ipsum',
104        rel_body: 'dolor sit amet...',
105      },
106
107      // The following css will be injected into the editor, extending
108      // the default styles.
109      // In a real world scenario, it's recommended to use the content_css
110      // option to load a separate CSS file. This makes editing easier too.
111      // https://www.tiny.cloud/docs/tinymce/6/add-css-options/
112      content_style: `
113        body {
114          font-family: 'Roboto', sans-serif;
115          color: #222;
116        }
117        img {
118          height: auto;
119          margin: auto;
120          padding: 10px;
121          display: block;
122        }
123        img.medium {
124          max-width: 25%;
125        }
126        a {
127          color: #116B59;
128        }
129        .related-content {
130          padding: 0 10px;
131          margin: 0 0 15px 15px;
132          background: #eee;
133          width: 200px;
134          float: right;
135        }
136        `
137
138      // Next step: Check out Tiny Drive for easy cloud storage of your users'
139      // images and media. Integrates seamlessly with TinyMCE.
140      // https://www.tiny.cloud/drive/
141    });
142  </script>
143
144</head>
145
146<body>
147  <h1>TinyMCE CMS Starter Config</h1>
148  <textarea>
149    <h1>Visiting Norway</h1>
150    <p><strong><img style="float: right;" src="https://images.pexels.com/photos/1559825/pexels-photo-1559825.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=750&amp;w=1260" alt="Town" width="300" height="375"></strong>Norway, officially the Kingdom of Norway, is a <a href="https://en.wikipedia.org/wiki/Nordic_countries">Nordic country</a> in Northern Europe, the mainland territory of which comprises the western and northernmost portion of the Scandinavian Peninsula.</p>
151    <p>The remote Arctic island of Jan Mayen and the archipelago of Svalbard also form part of Norway. Bouvet Island, located in the <a href="https://en.wikipedia.org/wiki/Subantarctic">Subantarctic</a>, is a dependency of Norway; it also lays claims to the Antarctic territories of Peter I Island and Queen Maud Land. The capital and largest city in Norway is <a href="https://en.wikipedia.org/wiki/Oslo">Oslo</a>.<strong><br></strong></p>
152    <p>Listen to Norway's royal anthem on Spotify:</p>
153    <div style="left: 0px; width: 100%; height: 152px; position: relative; max-width: 650px;" data-ephox-embed-iri="https://open.spotify.com/track/6SPocux2pBpFp3lshAOek1?si=907d52cf2af94efc"><iframe style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" src="https://open.spotify.com/embed/track/6SPocux2pBpFp3lshAOek1?utm_source=oembed" allow="clipboard-write; encrypted-media; fullscreen; picture-in-picture;" allowfullscreen="allowfullscreen"></iframe></div>
154    <h2>Geography</h2>
155    <div class="related-content">
156      <h3>Related content</h3>
157      <p><strong>Lorem ipsum</strong> dolor sit amet...</p>
158    </div>
159    <p>Norway has a total area of 385,207 square kilometres (148,729 sq mi) and had a population of 5,425,270 in January 2022. The country shares a long eastern border with Sweden at a length of 1,619 km (1,006 mi). It is bordered by Finland and Russia to the northeast and the Skagerrak strait to the south, on the other side of which are Denmark and the United Kingdom.</p>
160    <p>Norway has an extensive coastline, facing the North Atlantic Ocean and the Barents Sea. The maritime influence dominates Norway's climate, with mild lowland temperatures on the sea coasts; the interior, while colder, is also significantly milder than areas elsewhere in the world on such northerly latitudes. Even during polar night in the north, temperatures above freezing are commonplace on the coastline. The maritime influence brings high rainfall and snowfall to some areas of the country.</p>
161    <h2>Norway 3-day itinerary</h2>
162    <p>If you're in Norway for a long weekend or just a short trip, here's our recommendation:</p>
163    <table style="border-collapse: collapse; border-width: 1px;" border="1">
164      <thead>
165        <tr>
166          <td style="width: 12.9794%; border-width: 1px;">&nbsp;</td>
167          <td style="width: 44.5428%; border-width: 1px;"><strong>Location</strong></td>
168          <td style="width: 42.4779%; border-width: 1px;"><strong>Activity</strong></td>
169        </tr>
170      </thead>
171      <tbody>
172        <tr>
173          <td style="width: 12.9794%; border-width: 1px;"><strong>Day 1</strong></td>
174          <td style="width: 44.5428%; border-width: 1px;">Fl&aring;m Mountain Railway and Fl&aring;m village</td>
175          <td style="width: 42.4779%; border-width: 1px;">Tellus est malesuada&nbsp;</td>
176        </tr>
177        <tr>
178          <td style="width: 12.9794%; border-width: 1px;"><strong>Day 2</strong></td>
179          <td style="width: 44.5428%; border-width: 1px;">UNESCO-listed N&aelig;r&oslash;yfjord and Voss village</td>
180          <td style="width: 42.4779%; border-width: 1px;">Vivamus pretium ornare est</td>
181        </tr>
182        <tr>
183          <td style="width: 12.9794%; border-width: 1px;"><strong>Day 3</strong></td>
184          <td style="width: 44.5428%; border-width: 1px;">Leaving Voss</td>
185          <td style="width: 42.4779%; border-width: 1px;">Amet, consectetuer adipiscing</td>
186        </tr>
187      </tbody>
188    </table>
189    <h2>Where to book your travel</h2>
190    <ol>
191      <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
192      <li>Aliquam tincidunt mauris eu risus.</li>
193    </ol>
194    <blockquote>
195      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>
196    </blockquote>
197    <h3>Staying healthy</h3>
198    <ul>
199      <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
200      <li>Aliquam tincidunt mauris eu risus.</li>
201    </ul>
202    <p><em>Featuring <a href="https://en.wikipedia.org/wiki/Norway">content from Wikipedia</a></em></p>
203  </textarea>
204</body>
205</html>
Edit
Settings
Send or Schedule
Actions ▾
Tiny Logo
Tiny Logo
Tiny Logo

Update your email preferences or unsubscribe.
Tiny Technologies | 2100 Geng Road, Palo Alto, CA 94303 USA

Content
Text content imageDivider content imageImage content imageImage group content imageSocial content imageButton content imageFooter content image

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

1<!--
2The popular way to do marketing email with TinyMCE is to use
3inline mode, and move all table layouts outside of TinyMCE.
4Tables in TinyMCE are first and foremost to display tabular
5data, not for layouts. Doing table layouts in TinyMCE, while
6possible, is not recommended for email software. It is simply
7too easy to accidentally break the design. Here is an example
8of how to create a marketing email using TinyMCE inline mode. The
9TinyMCE editor is only applied to the rich text parts. All the
10table layouts are outside of TinyMCE, allowing you to build the
11drag and drop functionality many users expect. This makes it
12easy for you to add other logic such as inserting blocks and
13drag and drop reordering yourself.
14-->
15<!doctype html>
16<html>
17<head>
18<meta charset="utf-8">
19<title>Marketing email editor using inline mode</title>
20<meta name="viewport" content="width=device-width, initial-scale=1">
21<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
22<script>
23  // TinyMCE Email & Messaging Starter Config
24  // Quick start video - https://www.youtube.com/watch?v=0iKfxigGHLQ
25
26  tinymce.init({
27    // Specify which element(s) to make editable - these are all of our editable
28    // areas within the email
29    selector: '.tinymce',
30
31    // Tip - To make TinyMCE leaner, only include the plugins you actually need
32    plugins: 'advcode a11ychecker autocorrect autolink editimage emoticons image inlinecss link linkchecker lists mergetags powerpaste tinymcespellchecker',
33
34    // This option allows you to specify the buttons and the order that they
35    // will appear on TinyMCE’s toolbar.
36    // https://www.tiny.cloud/docs/tinymce/6/toolbar-configuration-options/#basic-toolbar-options
37    toolbar: 'undo redo | styles | bold italic forecolor backcolor | link image emoticons mergetags | align bullist numlist | spellcheckdialog a11ycheck | code removeformat',
38
39    // Toolbar_mode controls how the toolbar behaves when toolbar buttons do not
40    // fit on one row. Wrap displays all toolbar buttons wrapped over multiple rows
41    // https://www.tiny.cloud/docs/tinymce/6/toolbar-configuration-options/#toolbar_mode
42    toolbar_mode: "wrap",
43
44    // Render the inline toolbar into an element at the top of the email editor
45    // https://www.tiny.cloud/docs/configure/editor-appearance/#fixed_toolbar_container
46    fixed_toolbar_container: '.toolbar',
47
48    // Toggle the menubar off to get a leaner visual experience
49    // https://www.tiny.cloud/docs/tinymce/6/menus-configuration-options/
50    menubar: false,
51
52    // Enable inline mode
53    // https://www.tiny.cloud/docs/tinymce/6/use-tinymce-inline/
54    inline: true,
55
56    // Once TinyMCE loads, focus on the first editable area so the toolbar is shown
57    // https://www.tiny.cloud/docs/tinymce/6/editor-important-options/#auto_focus
58    auto_focus: 'editor-1',
59
60    // In emails we don't use targets for links so we hide the
61    // target drop down in the link dialog
62    // https://www.tiny.cloud/docs/tinymce/6/link/#link_target_list
63    link_target_list: false,
64
65    // A common feature for email marketing tools is to provide a prepopulated
66    // list of links to choose. Here we define that list.
67    // https://www.tiny.cloud/docs/tinymce/6/link/#link_list
68    link_list: [
69      { title: "Features", value: 'https://www.tiny.cloud/tinymce/features/' },
70      { title: "Docs", value: 'https://www.tiny.cloud/pricing/' },
71      { title: "Pricing", value: 'https://www.tiny.cloud/docs/tinymce/6/' }
72    ],
73
74    // We don't want users to be able to resize images by using
75    // drag and drop because it can break layout templates.
76    // https://www.tiny.cloud/docs/tinymce/6/content-behavior-options/#object_resizing
77    object_resizing : false,
78
79    // The formats option is where custom formatting options are defined.
80    // In this case we define a couple of headings and a button appearance
81    // for links. HTML Emails require inlining the CSS. Fortunately the
82    // styles property makes that easy.
83    // https://www.tiny.cloud/docs/tinymce/6/content-formatting/
84    formats: {
85      h1: { block: 'h1', styles: { fontSize: '24px', color: '#335dff' } },
86      h2: { block: 'h2', styles: { fontSize: '18px' } },
87      calltoaction: { selector: 'a', styles: { backgroundColor: '#335dff', padding: '12px 16px', color: '#ffffff', borderRadius: '4px', textDecoration: 'none', display: 'inline-block'} }
88    },
89
90    // The style_formats option controls the styleformat toolbar button menu
91    // https://www.tiny.cloud/docs/tinymce/6/user-formatting-options/#style_formats
92    style_formats: [
93      { title: 'Paragraph', format: 'p' },
94      { title: 'Heading 1', format: 'h1' },
95      { title: 'Heading 2', format: 'h2' },
96      { title: 'Button styles'},
97      { title: 'Call-to-action', format: 'calltoaction' },
98    ],
99
100    // An inline editor is "invisible" when there are no content in the editor
101    // Make sure to use the placeholder option to show the user where to write
102    // https://www.tiny.cloud/docs/tinymce/6/editor-important-options/#placeholder
103    placeholder: "Write here...",
104
105    // Only allow certain image types to be added to emails
106    // https://www.tiny.cloud/docs/tinymce/6/file-image-upload/#images_file_types
107    images_file_types: "jpeg,jpg,png,gif",
108
109    // Because our email builder contains two "half-column" editors, we need to make
110    // sure the Enhanced Image Editing toolbar will fit within those editable areas
111    // Reduce the number of buttons to ensure the toolbar fits nicely
112    // https://www.tiny.cloud/docs/tinymce/6/editimage/#editimage_toolbar
113    editimage_toolbar: "editimage imageoptions",
114
115    // Merge Tags lets users add non-editable personalization tokens to your content, so your
116    // app can then merge the personalized content into emails before sending
117    // https://www.tiny.cloud/docs/tinymce/6/mergetags/
118    mergetags_list: [
119      {
120        title: "Contact",
121        menu: [{
122          value: 'Contact.FirstName',
123          title: 'Contact First Name'
124        },
125        {
126          value: 'Contact.LastName',
127          title: 'Contact Last Name'
128        },
129        {
130          value: 'Contact.Email',
131          title: 'Contact Email'
132        }
133        ]
134      },
135      {
136        title: "Sender",
137        menu: [{
138          value: 'Sender.FirstName',
139          title: 'Sender First Name'
140        },
141        {
142          value: 'Sender.LastName',
143          title: 'Sender Last name'
144        },
145        {
146          value: 'Sender.Email',
147          title: 'Sender Email'
148        }
149        ]
150      },
151      {
152        title: 'Subscription',
153        menu: [{
154          value: 'Subscription.UnsubscribeLink',
155          title: 'Unsubscribe Link'
156        },
157        {
158          value: 'Subscription.Preferences',
159          title: 'Subscription Preferences'
160        }
161        ]
162      }
163    ],
164
165  });
166</script>
167<style>
168  /* Page and email layout */
169  body {
170    padding: 0;
171    margin: 0;
172    box-sizing: border-box;
173    font-family: Arial, sans-serif;
174  }
175
176  .container {
177    background-color: #f9f9fb;
178    margin: 0 auto;
179    max-width: 1000px;
180  }
181
182  .email {
183    max-width: 840px;
184    margin: auto;
185  }
186
187  /* Add blue "focus" effect to the active editor */
188  .tinymce:focus {
189    border-radius: 0.5px;
190    box-shadow: 0 0 0 4px #fff, 0 0 0 7px #99afff;
191    outline: 0;
192  }
193
194  /* TinyMCE toolbar tweaks */
195
196  /* Style the toolbar */
197  .toolbar {
198    background-color: #f9f9fb;
199    position: -webkit-sticky; /* Safari */
200    position: sticky;
201    top: 0;
202    z-index: 1;
203    margin: 0 auto;
204    max-width: 660px;
205    border-radius: 10px;
206  }
207
208  /* On tablet and larger devices, show a toolbar placeholder when
209    there is no active editor selected (the editor loses focus).
210    This is a screenshot of the toolbar, but with a "disabled"
211    grey affect applied to the buttons to indicate they are not
212    active. If you change the toolbar layout, create a screenshot.
213    Alternatively, you could remove this CSS rule and make the
214    toolbar disappear when the editor loses focus. */
215  @media screen and (min-width: 768px) {
216    .toolbar {
217      height: 42px;
218      min-height: 82px;
219      outline: 2px solid #eee;
220      outline-offset: -2px;
221      background: url("https://www.tiny.cloud/images/solutions/email/external-demo-disabled-toolbar.png") no-repeat center center / contain;
222    }
223  }
224
225  /* Ensure that when empty space on the toolbar is clicked, it does not blur the editor */
226  .tox-toolbar__group:last-of-type {
227    flex-grow: 1;
228  }
229
230</style>
231</head>
232<body>
233<div class="container">
234  <div class="toolbar"></div>
235  <div class="email">
236    <table style="background-color: #f9f9fb; width: 100%;" border="0">
237      <tr>
238        <td align="center">
239          <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">
240            <tr>
241              <td style="padding: 16px 64px 0;">
242                <div class="tinymce" id="editor-1" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
243                  <p>Hey {{Contact.FirstName}},</p>
244                  <h1 style="font-size: 24px; color: rgb(51, 93, 255);">What's your email editing project?</h1>
245                  <p>Are you:</p>
246                  <p><strong>Building a new email client</strong> (i.e. the next Gmail) and need rich text editor functionality?</p>
247                  <p><strong>Building email marketing software</strong> (i.e. the next Mail Chimp) and need to add more rich text editor functionality, or enhance the default editor?</p>
248                  <p>Then use the only WYSIWYG editor that is trusted by 1.5M developers.</p>
249                  <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;" href="https://tiny.cloud/pricing">Get started with your 14-day free trial</a></p>
250                </div>
251              </td>
252            </tr>
253            <tr>
254              <td style="padding: 0 64px 16px;">
255                <table border="0" style="width: 100%;">
256                  <tr>
257                    <td style="width: 48%; vertical-align: top;">
258                      <div class="tinymce" id="editor-2" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
259                        <p><img src="https://img.icons8.com/doodle/96/000000/critical-thinking.png" alt="" width="96" height="96"></p>
260                        <h2 style="font-size: 18px;">Curious about TinyMCE?</h2>
261                        <p>Play with this demo to see how our email WYSIWYG editor works.</p>
262                      </div>
263                    </td>
264                    <td style="width: 4%"></td>
265                    <td style="width: 48%; vertical-align: top;">
266                      <div class="tinymce" id="editor-3" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
267                        <p><img src="https://img.icons8.com/doodle/96/000000/electrical--v1.png" width="96" height="96"></p>
268                        <h2 style="font-size: 18px;">Try Premium plugins</h2>
269                        <p>Sign up for a 14-day trial and try out all our premium plugins.</p>
270                      </div>
271                    </td>
272                  </tr>
273                </table>
274              </td>
275            </tr>
276            <tr>
277              <td style="background-color: #eff0f6; padding: 24px 64px;">
278                <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>
279                <p style="margin: 0; font-family: 'helvetica'; font-size: 12px; color: #a0a9c5;">Tiny Technologies | 2100 Geng Road, Palo Alto, CA 94303 USA</p>
280              </td>
281            </tr>
282          </table>
283        </td>
284      </tr>
285    </table>
286    <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>
287    <button onclick="tinymce.get('editor-1').plugins.inlinecss.getContent().then((value) => { console.log(value.html); });">Get Inlined CSS - Editor #1</button>
288    <button onclick="tinymce.get('editor-2').plugins.inlinecss.getContent().then((value) => { console.log(value.html); });">Get Inlined CSS - Editor #2</button>
289    <button onclick="tinymce.get('editor-3').plugins.inlinecss.getContent().then((value) => { console.log(value.html); });">Get Inlined CSS - Editor #3</button><br><br>
290  </div>
291</div>
292</body>
293</html>
Icon for headerWhat’s your document management editing project?
Tiny Logo

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 Document Management System (DMS)</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 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 | removeformat typography",
24
25      // Tip - The height option accepts any valid CSS for height
26      // If your editor is expected to get larger than the viewport,
27      // the sticky toolbar is useful for keeping the controls
28      // always visible
29      // https://www.tiny.cloud/docs/tinymce/6/editor-size-options/
30      // https://www.tiny.cloud/docs/tinymce/6/menus-configuration-options/#toolbar_sticky
31      height: '700px',
32      toolbar_sticky: true,
33
34      // You can customize the look and feel of the UI using skins and icons.
35      // In this demo we are using the premium 'thin' icon pack, which matches popular
36      // document editing experiences.
37      // https://www.tiny.cloud/docs/tinymce/6/editor-icons/
38      //
39      // The icons option is disabled by default in this config, but can be enabled
40      // by uncommenting the lines below. In order for it to load properly, you must
41      // be on a premium plan or trial, and load TinyMCE from the cloud or be
42      // running a fully self-hosted deployment.
43      //
44      // icons: 'thin',
45
46      // The autosave plugin helps prevent data loss if the end-user accidentally
47      // closes the browser by storing the content in the browser's local storage
48      // There are many configuration options to control things like save interval
49      // and retention. The below option loads any unsaved content from local
50      // storage into TinyMCE
51      // https://www.tiny.cloud/docs/tinymce/6/autosave/#autosave_restore_when_empty
52      autosave_restore_when_empty: true,
53
54      // Enable Spell Checker Pro and specify the default and available languages
55      // https://www.tiny.cloud/docs/tinymce/6/introduction-to-tiny-spellchecker/
56      spellchecker_active: true,
57      spellchecker_language: 'en_US',
58      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',
59
60      // Advanced Typography allows users to apply 25+ typographic conventions to their content.
61      // Specify the language(s) you want the plugin to use. In this case we are just allowing
62      // English, but an array of languages can also be specified.
63      // https://www.tiny.cloud/docs/tinymce/6/advanced-typography/
64      typography_langs: [ 'en-US' ],
65      typography_default_lang: 'en-US',
66
67      // The Tiny Comments plugin enables you to quickly get collaboration up and
68      // running. There are a lot of options, but here are the most basic
69      // ones to get you started
70      // https://www.tiny.cloud/docs/tinymce/6/introduction-to-tiny-comments/
71      tinycomments_mode: 'embedded',
72      tinycomments_author: 'rmartel',
73      tinycomments_author_name: 'Rosalina Martel',
74      tinycomments_author_avatar: 'https://www.tiny.cloud/images/avatars/avatar-RosalinaMartel.jpg',
75
76      // Show the comments sidebar by default to encourage collaboration and discovery
77      // https://www.tiny.cloud/docs/tinymce/6/customsidebar/#sidebar_show
78      sidebar_show: 'showcomments',
79
80      // Merge Tags lets users add non-editable merge tags to your content, so your
81      // app can then populate dynamic content into rendered documents
82      // https://www.tiny.cloud/docs/tinymce/6/mergetags/
83      mergetags_list: [
84        {
85          value: 'Document.Title',
86          title: 'Document Title'
87        },
88        {
89          value: 'Publish.Date',
90          title: 'Publish Date'
91        },
92        {
93          value: 'Author.Name',
94          title: 'Author Name'
95        }
96      ],
97
98      // The following CSS will be injected into the editor, extending
99      // the default styles.
100      // In a real world scenario, it's recommended to use the content_css
101      // option to load a separate CSS file. This makes editing easier too.
102      // https://www.tiny.cloud/docs/tinymce/6/add-css-options/
103      content_style: `
104        body {
105          background: #fff;
106        }
107
108        @media (min-width: 840px) {
109          html {
110            background: #eceef4;
111            min-height: 100%;
112            padding: 0.5rem;
113          }
114
115          body {
116            background-color: #fff;
117            box-shadow: 0 0 4px rgba(0, 0, 0, .15);
118            box-sizing: border-box;
119            margin: 1rem auto 0;
120            max-width: 820px;
121            min-height: calc(100vh - 1rem);
122            padding: 4rem 6rem 6rem 6rem;
123          }
124        }
125      `,
126    });
127  </script>
128  <style>
129    body {
130      margin: 4rem auto;
131      padding: 0 2rem;
132      background-color: #f9f9fb;
133    }
134
135    main {
136      width: 100%;
137    }
138  </style>
139</head>
140<body>
141  <main>
142    <textarea id="editor">
143      <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>
144      <p style="text-align: center;">Are you:</p>
145      <table style="border-collapse: collapse; width: 100%;" border="1"><colgroup> <col style="width: 50%;"> <col style="width: 50%;"> </colgroup>
146        <tbody>
147          <tr>
148            <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>
149            <td>
150              <p style="text-align: center;"><span style="font-size: 36pt;"><strong>🗂️</strong></span></p>
151              <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>
152            </td>
153          </tr>
154        </tbody>
155      </table>
156      <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>
157      <h3>Curious about TinyMCE?</h3>
158      <p>Play with this demo to see how TinyMCE works! Try out these popular document creation functions:</p>
159      <ul>
160        <li>Copy complex rich content from another app into the editor</li>
161        <li>Add or resolve a comment</li>
162        <li>Drag-and-drop an image from your computer, then edit it within TinyMCE</li>
163        <li>Insert {{dynamic.content}} into the document using Merge Tags (start typing "{{")</li>
164        <li>Any other functionality that you would expect in a document editor!</li>
165      </ul>
166      <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>
167      <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><!--tinycomments|2.1|data:application/json;base64,eyJtY2UtY29udmVyc2F0aW9uXzk1NjIxNTg1MjIxNjYyNzUwMzQxMDI2Ijp7InVpZCI6Im1jZS1jb252ZXJzYXRpb25fOTU2MjE1ODUyMjE2NjI3NTAzNDEwMjYiLCJjb21tZW50cyI6W3sidWlkIjoibWNlLWNvbnZlcnNhdGlvbl85NTYyMTU4NTIyMTY2Mjc1MDM0MTAyNiIsImF1dGhvciI6InJtYXJ0ZWwiLCJhdXRob3JOYW1lIjoiUm9zYWxpbmEgTWFydGVsIiwiYXV0aG9yQXZhdGFyIjoiaHR0cHM6Ly93d3cudGlueS5jbG91ZC9pbWFnZXMvYXZhdGFycy9hdmF0YXItUm9zYWxpbmFNYXJ0ZWwuanBnIiwiY29udGVudCI6IkNhbiB3ZSBpbmNyZWFzZSB0aGUgc2l6ZSBvZiB0aGUgaGVhZGluZz8iLCJjcmVhdGVkQXQiOiIyMDIyLTA5LTA5VDE5OjA1OjQxLjAyNVoiLCJtb2RpZmllZEF0IjoiMjAyMi0wOS0wOVQxOTowNTo0MS4wMjVaIn0seyJ1aWQiOiJtY2UtcmVwbHlfNzk5MTUxODA5MjE2NjI3NTA1NTM5MjYiLCJhdXRob3IiOiJhdmlzbWFyYSIsImF1dGhvck5hbWUiOiJBbmdlbCBWaXNtYXJhIiwiYXV0aG9yQXZhdGFyIjoiaHR0cHM6Ly93d3cudGlueS5jbG91ZC9pbWFnZXMvYXZhdGFycy9hdmF0YXItQW5nZWxWaXNtYXJhLmpwZyIsImNvbnRlbnQiOiJTdXJlIHRoaW5nIOKAkyBob3cncyB0aGlzPyIsImNyZWF0ZWRBdCI6IjIwMjItMDktMDlUMTk6MDk6MTMuOTI2WiIsIm1vZGlmaWVkQXQiOiIyMDIyLTA5LTA5VDE5OjA5OjEzLjkyNloifV19fQ==-->
168    </textarea>
169  </main>
170</body>
171</html>
New Task
Log a Call
New Event
Email
Sarah Humberson <shumberson@tiny.cloud>Art Vandelay <art@vandelay.website>Following up on our call
Tiny Logo
Vandelay 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 autocorrect autoresize editimage emoticons image inlinecss link linkchecker lists mergetags powerpaste template 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 template 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    // Templates is useful for when users need to insert repeatable content,
201    // for example a pre-written message.
202    // https://www.tiny.cloud/docs/tinymce/6/template/
203    templates: [
204      {
205        title: 'Outbound email',
206        description: 'Outbound cold email for prospects',
207        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>'
208      },
209      {
210        title: 'Follow-up email',
211        description: 'Follow-up to be sent immediately after discovery meetings',
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

Tiny Logo
Comments

Add a comment ...

    Great job! 👍

Done
Details
Assignee

Mike Smith

Reporter

Tiny

Status

Ready

Labels

TinyMCE6

Team

Tiny

Tags

The basic editing experience every workflow application should start with. Includes all the editing controls your users expect, plus PowerPaste, Accessibility Checker, Enhanced Image Editing and more.

1<!--
2This demo showcases two minimalist editors that expand on focus.
3It uses the TinyMCE inline mode to allow for greater control
4over the toolbar position and behavior.
5
6As part of your app development, you will need to build the
7functionality that runs when the Save and Cancel buttons are clicked.
8-->
9
10<!DOCTYPE html>
11<html>
12<head>
13<meta charset="utf-8">
14<title>Workflow style demo</title>
15<meta name="viewport" content="width=device-width, initial-scale=1">
16<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
17
18<script>
19// TinyMCE Workflow & Collaboration Starter Config
20// Quick start video - https://www.youtube.com/watch?v=ApN8R43PKvA
21
22// Since we are using more than one editor, we can create common config
23// options to be shared between both editor instances
24let commonConfig = {
25
26  // Tip - To keep TinyMCE lean, only include the plugins you need
27  plugins: "advcode advtable autocorrect autolink checklist codesample editimage emoticons image link linkchecker lists media mediaembed powerpaste table tinymcespellchecker",
28
29  // Hide the menubar
30  // https://www.tiny.cloud/docs/tinymce/6/menus-configuration-options/#menubar
31  menubar: false,
32
33  // Customize the look and feel of the UI using premium skins and icons.
34  // https://www.tiny.cloud/docs/tinymce/6/editor-icons/
35  // https://www.tiny.cloud/docs/tinymce/6/editor-skin/
36  //
37  // The icons and skin options are disabled by default in this config, but can
38  // be enabled by uncommenting the lines below. In order for them to load properly,
39  // you must be on a premium plan or trial, and load TinyMCE from the cloud or be
40  // running a fully self-hosted deployment.
41  //
42  // icons: 'thin',
43  // skin: 'naked',
44
45  // Enable inline mode
46  // https://www.tiny.cloud/docs/tinymce/6/use-tinymce-inline/
47  inline: true,
48
49  // Make the inline toolbar not disappear when the editor blurs
50  // https://www.tiny.cloud/docs/tinymce/6/menus-configuration-options/#toolbar_persist
51  toolbar_persist: true,
52
53  // Remove the manual image resizing as we're using percentage widths
54  // https://www.tiny.cloud/docs/tinymce/6/menus-configuration-options/#toolbar_persist
55  object_resizing: false,
56
57  // On mobile, toolbar_mode is sliding by default which is not compatible
58  // with toolbar_groups. Therefore we explicitly set toolbar_mode to floating
59  // on mobile and touch devices.
60  // https://www.tiny.cloud/docs/tinymce/6/toolbar-configuration-options/#toolbar_mode
61  // https://www.tiny.cloud/docs/tinymce/6/tinymce-for-mobile/#themobileoption
62  mobile: {
63      toolbar_mode: 'floating'
64  },
65
66  // Set the spellchecker language and make it active on load
67  // https://www.tiny.cloud/docs/tinymce/6/introduction-to-tiny-spellchecker/#spellchecker_active
68  spellchecker_language: 'en',
69  spellchecker_active: true
70
71}
72
73// Here is the init function for the first "Description" editor
74tinymce.init({
75
76  // Select the element(s) to add TinyMCE to using any valid CSS selector
77  selector: "#editor-description-content",
78
79  // This option allows you to specify the buttons and the order that they
80  // will appear on TinyMCE's toolbar
81  // https://www.tiny.cloud/docs/tinymce/6/toolbar-configuration-options/
82  toolbar: "blocks | bold italic forecolor backcolor | numlist bullist checklist | link image emoticons table codesample hr blockquote | code ",
83
84  // Render the toolbar in this container
85  // https://www.tiny.cloud/docs/tinymce/6/menus-configuration-options/#fixed_toolbar_container
86  fixed_toolbar_container: '#editor-description-toolbar',
87
88  // Set a placeholder to be shown when there is no content in the editor
89  // https://www.tiny.cloud/docs/tinymce/6/editor-important-options/#placeholder
90  placeholder: "Add a description",
91
92  setup: (editor) => {
93    // Apply a custom class to the wrapper element when the editor gets focus
94    // https://www.tiny.cloud/docs/advanced/events/
95    editor.on('focus', () => {
96        document.getElementById('editor-description-wrap').classList.add('enabled');
97    });
98  },
99
100  // Load the common configuration options specified earlier
101  ...commonConfig,
102});
103
104// Here is the init function for the second "Comment" editor
105tinymce.init({
106
107  // Select the element(s) to add TinyMCE to using any valid CSS selector
108  selector: "#editor-comment-content",
109
110  // This option allows you to specify the buttons and the order that they
111  // will appear on TinyMCE's toolbar.
112  // https://www.tiny.cloud/docs/tinymce/6/toolbar-configuration-options/
113  toolbar: "bold italic forecolor backcolor | numlist bullist | link image emoticons codesample blockquote ",
114
115  // Set a placeholder to display a text when there are no content in the editor
116  // https://www.tiny.cloud/docs/tinymce/6/editor-important-options/#placeholder
117  placeholder: "Add a comment...",
118
119  // Render the toolbar in this container.
120  // https://www.tiny.cloud/docs/tinymce/6/menus-configuration-options/#fixed_toolbar_container
121  fixed_toolbar_container: '#editor-comment-toolbar',
122
123  setup: (editor) => {
124      // Apply a custom class to the wrapper element when the editor gets focus
125      // https://www.tiny.cloud/docs/advanced/events/
126      editor.on('focus', () => {
127          document.getElementById('editor-comment-wrap').classList.add('enabled');
128      });
129  },
130
131  // Load the common configuration options specified earlier
132  ...commonConfig,
133});
134
135// Save button behavior to disable the editor
136function save(id) {
137  document.getElementById(id).classList.remove('enabled');
138}
139
140// Next step: Check out Tiny Drive for easy cloud storage of your users'
141// images and media. Integrates seamlessly with TinyMCE.
142// https://www.tiny.cloud/drive/
143
144</script>
145<style>
146/* Page styles - modify these or replace them to suit your app */
147
148body {
149    margin: 2rem .5rem;
150    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
151}
152
153main {
154    max-width: 720px;
155    margin: auto;
156}
157
158.editor-wrap.enabled {
159    border-radius: 3px;
160    border: 1px solid #ccc;
161}
162
163.editor-content {
164    transition: min-height .25s, padding-bottom .25s;
165    min-height: 0;
166    outline: none;
167    border-radius: 1px;
168    transition: box-shadow .15s, background-color .15s;
169}
170
171.editor-content > *:first-child {
172    margin-top: 0;
173}
174
175.editor-content > *:last-child {
176    margin-bottom: 0;
177}
178
179.editor-wrap#editor-description-wrap:hover:not(.enabled) .editor-content {
180    background-color: #efefef;
181    box-shadow: 0 0 0 6px #efefef;
182}
183
184.editor-wrap.enabled .editor-content {
185    min-height: 140px;
186    padding: 1rem;
187}
188
189.editor-toolbar {
190    padding: 3px;
191    display: none;
192    border-bottom: 1px solid #ccc;
193    z-index: 1;
194}
195
196.editor-wrap.enabled .editor-toolbar {
197    display: block;
198}
199
200.editor-footer {
201    margin: 1rem;
202    display: none;
203    padding-top: .5rem;
204}
205
206.editor-wrap.enabled .editor-footer {
207    display: block;
208}
209
210.editor-save-btn {
211    background: #207ab7;
212    font-size: 16px;
213    font-weight: bold;
214    color: #fff;
215    border: none;
216    outline: none;
217    height: 34px;
218    line-height-step: 34px;
219    padding: 0 16px;
220    border-radius: 4px;
221    margin: 0;
222    -webkit-tap-highlight-color: rgba(0,0,0,0);
223    -webkit-user-select: none;
224}
225
226.editor-cancel-btn {
227    background: #dfe3ec;
228    font-size: 16px;
229    font-weight: bold;
230    color: #17224f;
231    border: none;
232    outline: none;
233    height: 34px;
234    line-height-step: 34px;
235    padding: 0 16px;
236    border-radius: 4px;
237    margin: 0;
238    -webkit-tap-highlight-color: rgba(0,0,0,0);
239    -webkit-user-select: none;
240}
241
242.editor-label {
243    font-size: 19px;
244    margin: 2rem 0 1rem;
245    display: block;
246}
247
248.comment {
249    display: flex;
250}
251
252.avatar {
253    background-color: #ff9999;
254    color: #17224f;
255    font-size: 18px;
256    font-weight: bold;
257    border-radius: 100px;
258    width: 42px;
259    height: 42px;
260    line-height: 42px;
261    text-align: center;
262    margin-right: 1rem;
263}
264
265.editor-wrap#editor-comment-wrap {
266    border: 1px solid #ccc;
267    border-radius: 3px;
268    flex-grow: 1;
269}
270
271.editor-wrap#editor-comment-wrap .editor-content {
272    padding: 1rem;
273}
274
275/* Below are the content styles, in this case they are global */
276/* and not namespaced to `.editor-content` */
277a,
278a:link {
279  color: blue;
280}
281a:visited {
282  color: purple;
283}
284a:hover {
285  color: green;
286}
287a:active {
288  color: red;
289}
290
291h1 {
292    font-size: 1.75rem;
293    font-weight: strong;
294}
295
296h2 {
297    font-size: 1.5rem;
298    font-weight: strong;
299}
300
301h3 {
302    font-size: 1rem;
303    font-weight: strong;
304}
305
306hr {
307    margin: 1.5rem 0;
308    padding: .5rem 0;
309    border: 0;
310}
311
312hr::after {
313    content: '';
314    display: block;
315    border-width: 0 0 1px 0;
316    border-color: #ccc;
317    border-style: solid;
318}
319
320img {
321    max-width: 100%;
322    height: auto;
323}
324
325/* Set overflow floating toolbar to have solid background */
326.tox.tox-tinymce-aux .tox-toolbar__overflow {
327    background-color: #fff !important;
328}
329
330/* Indent placeholder in custom-styled comment editor */
331#editor-comment-wrap .mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before {
332  left:inherit;
333}
334</style>
335</head>
336<body>
337<main>
338<label class="editor-label">Description</label>
339<div class="editor-wrap" id="editor-description-wrap">
340    <div class="editor-toolbar" id="editor-description-toolbar"></div>
341    <div class="editor-content" id="editor-description-content">
342      <h2><strong>What&rsquo;s your rich text editor </strong><strong>workflow</strong><strong> project?&nbsp;</strong></h2>
343      <p>Are you&hellip;</p>
344      <ul>
345      <li><strong>Building a new workflow or project management platform</strong> and need to add rich text editing functionality?</li>
346      <li><strong>Extending your existing workflow or project management app</strong> and need to enhance your default editor?</li>
347      </ul>
348      <p>Then use the only WYSIWYG editor that&rsquo;s trusted by 1.5M developers.</p>
349      <h3><strong>Curious about TinyMCE?</strong></h3>
350      <p>Click inside this box to activate the editor and see how it works!</p>
351    </div>
352    <footer class="editor-footer">
353        <button type="button" id="save-description-btn" onclick="save('editor-description-wrap')" class="editor-save-btn">Save</button>
354        <button type="button" onclick="alert('Your own custom save function')" class="editor-cancel-btn">Cancel</button>
355    </footer>
356</div>
357
358<label class="editor-label">Comments</label>
359<div class="comment">
360    <div class="avatar">FD</div>
361    <div class="editor-wrap" id="editor-comment-wrap">
362        <div class="editor-toolbar" id="editor-comment-toolbar"></div>
363        <div class="editor-content" id="editor-comment-content"></div>
364        <footer class="editor-footer">
365            <button type="button" id="save-description-btn" onclick="alert('Your own custom save function')" class="editor-save-btn">Save</button>
366            <button type="button" onclick="alert('Your own custom cancel function')" class="editor-cancel-btn">Cancel</button>
367        </footer>
368    </div>
369</div>
370</main>
371</body>
372</html>
373
374
International Institute of Art
Save course
Delete course
Assignment #5: Color Theory
Tiny Logo

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

1<!-- This is an example of how you can use TinyMCE for course creation
2within your LMS. You can also adapt this starter config to suit the needs of
3students - for example to enable them to create assignments or collaborate on
4groupwork. -->
5<!DOCTYPE html>
6<html>
7<head>
8<meta charset="utf-8">
9<title>LMS use-case demo</title>
10<meta name="viewport" content="width=device-width, initial-scale=1">
11<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
12<script>
13  // TinyMCE Learning Management System (LMS) Starter Config
14  // Quick start video - https://www.youtube.com/watch?v=uNuevm_ZzqQ
15
16  tinymce.init({
17    // Select the element(s) to add TinyMCE to using any valid CSS selector
18    selector: "#editor",
19
20    // Tip - To make TinyMCE leaner, only include the plugins you need
21    plugins: "a11ychecker advcode autocorrect autolink autoresize autosave charmap checklist code editimage emoticons footnotes fullscreen image link linkchecker lists media mediaembed mergetags powerpaste preview table tableofcontents tinycomments tinymcespellchecker typography wordcount",
22
23    // Specify the toolbar buttons
24    // We have put our custom insert token button last
25    // https://www.tiny.cloud/docs/tinymce/6/toolbar-configuration-options/
26    toolbar: "undo redo | blocks | bold italic underline strikethrough forecolor backcolor | align checklist bullist numlist | link image media footnotes mergetags table | subscript superscript charmap blockquote | tokens | spellchecker typography a11ycheck wordcount | addcomment showcomments | fullscreen preview",
27
28    // Disable the status bar
29    // https://www.tiny.cloud/docs/tinymce/6/statusbar-configuration-options/#statusbar
30    statusbar: false,
31
32    // Enable sticky toolbar
33    // https://www.tiny.cloud/docs/tinymce/6/menus-configuration-options/#toolbar_sticky
34    toolbar_sticky: true,
35
36    // Set Enhanced Media Embed's max width
37    // https://www.tiny.cloud/docs/tinymce/6/introduction-to-mediaembed/
38    mediaembed_max_width: 800,
39
40    // You can assign each item in the Blocks menu a user-friendly name
41    // https://www.tiny.cloud/docs/tinymce/6/user-formatting-options/#block_formats
42    block_formats: 'Title=h1; Heading=h2; Sub heading=h3; Blockquote=blockquote; Paragraph=p',
43
44    // Use font_css to load custom fonts from an external source
45    // https://www.tiny.cloud/docs/tinymce/6/add-css-options/#font_css
46    font_css: ['https://fonts.googleapis.com/css2?family=Asap:ital,wght@0,400;0,550;1,400&display=swap'], // URLs containing commas and such have to be wrapped in an array to work
47
48    // Set options for Accessibility Checker
49    // https://www.tiny.cloud/docs/tinymce/6/a11ychecker/
50    a11y_advanced_options: true,
51    a11ychecker_html_version: 'html5',
52    a11ychecker_level: 'aa',
53
54    // Advanced Typography allows users to apply 25+ typographic conventions to their content.
55    // Specify the language(s) you want the plugin to use. In this case we are allowing all
56    // languages, but we must specify the default language.
57    // https://www.tiny.cloud/docs/tinymce/6/advanced-typography/
58    typography_default_lang: 'en-US',
59
60    // Merge Tags lets users add non-editable personalization tokens to your content, so your
61    // app can then populate the dynamic content into what is rendered for users
62    // https://www.tiny.cloud/docs/tinymce/6/mergetags/
63    mergetags_list: [
64      {
65        title: "Course",
66        menu: [{
67          value: 'Course.Name',
68          title: 'Course Name'
69        },
70        {
71          value: 'Course.Teacher.Name',
72          title: 'Teacher Name'
73        },
74        {
75          value: 'Course.Department.Head',
76          title: 'Department Head'
77        }
78        ]
79      },
80      {
81        title: "Assignment",
82        menu: [{
83          value: 'Assignment.Name',
84          title: 'Assignment Name'
85        },
86        {
87          value: 'Assignment.DueDate',
88          title: 'Assignment Due Date'
89        }
90        ]
91      },
92      {
93        title: "Student",
94        menu: [{
95          value: 'Student.Name',
96          title: 'Student Name'
97        },
98        {
99          value: 'Student.ID',
100          title: 'Student ID'
101        },
102        {
103          value: 'Student.Email',
104          title: 'Student Email'
105        }
106        ]
107      }
108    ],
109
110    // The Tiny Comments plugin enables you to quickly get collaboration up and
111