Tiny Logo
Log InGet Started

START NOW: Free 14-day trial
of Premium plugins

SIGN UP

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]
  • Save end users 10+ years when creating content[6]

19+ WYSIWYG premium features

Six features worth the upgrade

Tiny Logo

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

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      tinymce.init({
14        // Select the element(s) to add TinyMCE to using any valid CSS selector
15        selector: 'textarea',
16
17        // Tip - To keep TinyMCE lean, only include the plugins you need.
18        plugins: `a11ychecker advcode advlist advtable anchor autocorrect autosave editimage image link linkchecker lists media mediaembed pageembed powerpaste searchreplace table template tinymcespellchecker visualblocks wordcount`,
19        // Configure the toolbar so it fits your app. There are many
20        // different configuration options available:
21        // https://www.tiny.cloud/docs/tinymce/6/toolbar-configuration-options/
22        toolbar: 'undo redo | styles | bold italic underline strikethrough | align | table link image media pageembed | bullist numlist outdent indent | spellcheckdialog a11ycheck code',
23
24        // The Accessibility Checker plugin offers extensive controls over which
25        // level of compliance to test against and which rules to enforce.
26        // https://www.tiny.cloud/docs/tinymce/6/a11ychecker/
27        a11ychecker_level: 'aaa',
28
29        // Configure the style menu and define available formats
30        // Here, we have defined a medium sized image format as an example.
31        // There is a lot more you can do with formats:
32        // https://www.tiny.cloud/docs/tinymce/6/filter-content/
33        style_formats: [
34          {title: 'Heading 1', block: 'h1'},
35          {title: 'Heading 2', block: 'h2'},
36          {title: 'Paragraph', block: 'p'},
37          {title: 'Blockquote', block: 'blockquote'},
38          {title: 'Image formats'},
39          {title: 'Medium', selector: 'img', classes: 'medium'},
40        ],
41
42        // Turn off manual resizing of images as we want to control image sizes
43        // using the formats previously specified.
44        // https://www.tiny.cloud/docs/tinymce/6/content-behavior-options/#object_resizing
45        object_resizing: false,
46
47        // TinyMCE offers a wide range of options to control what classes, styles
48        // and attributes are allowed in the content. All other classes will be
49        // filtered out.
50        // https://www.tiny.cloud/docs/tinymce/6/content-filtering/#valid_classes
51        valid_classes: {
52          'img': 'medium',
53          'div': 'related-content'
54        },
55
56        // Enable image fig captions
57        // https://www.tiny.cloud/docs/tinymce/6/image/#image_caption
58        image_caption: true,
59
60        // Templates is useful for when users need to insert repeatable content,
61        // for example a related content block.
62        // https://www.tiny.cloud/docs/tinymce/6/template/
63        templates: [
64          {
65            title: 'Related content',
66            description: 'This template inserts a related content block',
67            content: '<div class="related-content"><h3>Related content</h3><p><strong>{$rel_lede}</strong> {$rel_body}</p></div>'
68          }
69        ],
70
71        // This option makes it easy to inject dynamic content into the template.
72        template_replace_values: {
73          rel_lede: 'Lorem ipsum',
74          rel_body: 'dolor sit amet...',
75        },
76
77        // Specifies the dynamic content inside the insert template dialog preview
78        template_preview_replace_values: {
79          rel_lede: 'Lorem ipsum',
80          rel_body: 'dolor sit amet...',
81        },
82
83        // Prevent editing of the related content block by making the whole
84        // block noneditable.
85        // https://www.tiny.cloud/docs/tinymce/6/content-behavior-options/#noneditable_class
86        noneditable_class: 'related-content',
87
88        // TinyMCE supports multilingual content. By defining the language
89        // not only are you helping with accessibility, the spellchecker plugin
90        // also switches language.
91        // https://www.tiny.cloud/docs/tinymce/6/content-localization/#content_langs
92        content_langs: [
93          {title: 'English (US)', code: 'en_US'},
94          {title: 'French', code: 'fr'}
95        ],
96
97        // Specify the height of the editor, including toolbars and the statusbar.
98        // https://www.tiny.cloud/docs/tinymce/6/customize-ui/#changing-editor-height-and-width
99        height: 540,
100
101        // The following css will be injected into the editor, extending
102        // the default styles.
103        // In a real world scenario, it's recommended to use the content_css
104        // option to load a separate CSS file. This makes editing easier too.
105        // https://www.tiny.cloud/docs/tinymce/6/add-css-options/
106        content_style: `
107          img {
108            height: auto;
109            margin: auto;
110            padding: 10px;
111            display: block;
112          }
113          img.medium {
114            max-width: 25%;
115          }
116        `
117
118        // Next step: Check out Tiny Drive for easy cloud storage of your users'
119        // images and media. Integrates seamlessly with TinyMCE.
120        // https://www.tiny.cloud/drive/
121      });
122    </script>
123  </head>
124
125  <body>
126    <h1>TinyMCE CMS Starter Config</h1>
127    <form method="post">
128      <textarea>
129        <h1>Heading Level 1</h1>
130        <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">Pellentesque habitant morbi tristique </strong>senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em></p>
131        <p>Mauris placerat eleifend leo.</p>
132        <p>Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi.</p>
133        <p>Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
134        <p>Donec pharetra purus eu eros dignissim dignissim. Donec consectetur, felis eu malesuada ultricies, felis ligula auctor diam, nec rhoncus massa leo vel massa.</p>
135        <table style="border-collapse: collapse; width: 100%;" border="1">
136          <thead>
137            <tr>
138              <td style="width: 31.7887%;">&nbsp;</td>
139              <td style="width: 31.7887%;"><strong>Location</strong></td>
140              <td style="width: 31.7896%;"><strong>Activity</strong></td>
141            </tr>
142          </thead>
143          <tbody>
144            <tr>
145              <td style="width: 31.7887%;"><strong>Day 1</strong></td>
146              <td style="width: 31.7887%;">Dolor</td>
147              <td style="width: 31.7896%;">Tellus est malesuada&nbsp;</td>
148            </tr>
149            <tr>
150              <td style="width: 31.7887%;"><strong>Day 2</strong></td>
151              <td style="width: 31.7887%;">Eleifend</td>
152              <td style="width: 31.7896%;">Vivamus pretium ornare est</td>
153            </tr>
154            <tr>
155              <td style="width: 31.7887%;"><strong>Day 3</strong></td>
156              <td style="width: 31.7887%;">Semper</td>
157              <td style="width: 31.7896%;">Amet, consectetuer adipiscing</td>
158            </tr>
159          </tbody>
160        </table>
161        <h2>Heading Level 2</h2>
162        <ol>
163          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
164          <li>Aliquam tincidunt mauris eu risus.</li>
165        </ol>
166        <blockquote>
167          <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>
168        </blockquote>
169        <h3>Heading Level 3</h3>
170        <ul>
171          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
172          <li>Aliquam tincidunt mauris eu risus.</li>
173        </ul>
174      </textarea>
175    </form>
176  </body>
177</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<!--
2    The popular way to do marketing email with TinyMCE is to use
3    inline mode, and move all table layouts outside of TinyMCE.
4    Tables in TinyMCE are first and foremost to display tabular
5    data, not for layouts. Doing table layouts in TinyMCE, while
6    possible, is not recommended for email software. It is simply
7    too easy to accidentally break the design. Here is an example
8    of how to do a marketing email using TinyMCE inline mode. The
9    TinyMCE editor is only applied to the rich text parts. All the
10    table layouts are outside of TinyMCE, allowing you to build the
11    drag and drop functionality many users expect. This makes it
12    easy for you to add other logic such as inserting blocks and
13    drag and drop reordering yourself.
14-->
15
16<!doctype html>
17<html>
18<head>
19    <meta charset="utf-8">
20    <title>Marketing email editor using inline mode</title>
21    <meta name="viewport" content="width=device-width, initial-scale=1">
22    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
23    <script>
24        tinymce.init({
25            // TinyMCE Email & Messaging Starter Config
26            // Quick start video - https://www.youtube.com/watch?v=0iKfxigGHLQ
27            selector:'.tinymce',
28
29            // Enable inline mode
30            // https://www.tiny.cloud/docs/tinymce/6/use-tinymce-inline/
31            inline: true,
32
33            // Render the inline toolbar into an element at the top of the email editor
34            // https://www.tiny.cloud/docs/configure/editor-appearance/#fixed_toolbar_container
35            fixed_toolbar_container: '.toolbar',
36
37            // Once TinyMCE loads, focus on the first editable area so the toolbar is shown
38            // https://www.tiny.cloud/docs/tinymce/6/editor-important-options/#auto_focus
39            auto_focus: 'editor-1',
40
41            // Tip! To make TinyMCE leaner, only include the plugins you actually need.
42            plugins: 'advcode a11ychecker autocorrect autolink editimage emoticons image link linkchecker lists mergetags powerpaste tinymcespellchecker',
43
44            // This option allows you to specify the buttons and the order that they
45            // will appear on TinyMCE’s toolbar.
46            // https://www.tiny.cloud/docs/tinymce/6/toolbar-configuration-options/#basic-toolbar-options
47            toolbar: 'undo redo | styles | bold italic forecolor backcolor | link image emoticons mergetags | align bullist numlist | spellcheckdialog a11ycheck | code removeformat',
48
49            // Toggle the menubar off to get a leaner visual experience
50            // https://www.tiny.cloud/docs/tinymce/6/menus-configuration-options/
51            menubar: false,
52
53            // In emails we rarely use target for links so we hide the
54            // target drop down in the link dialog
55            // https://www.tiny.cloud/docs/tinymce/6/link/#link_target_list
56            link_target_list: false,
57
58            // A common feature for email marketing tools is to provide a prepopulated
59            // list of links to choose. Here we define that list.
60            // https://www.tiny.cloud/docs/tinymce/6/link/#link_list
61            link_list: [
62              { title: "Features", value: 'https://www.tiny.cloud/tinymce/features/' },
63              { title: "Docs", value: 'https://www.tiny.cloud/pricing/' },
64              { title: "Pricing", value: 'https://www.tiny.cloud/docs/tinymce/6/' }
65            ],
66
67            // Only allow certain image types to be added to emails
68            // https://www.tiny.cloud/docs/tinymce/6/file-image-upload/#images_file_types
69            images_file_types: "jpeg,jpg,png,gif",
70
71            // A common feature for email marketing tools is to provide a prepopulated
72            // list of links to choose. Here we define that list.
73            // https://www.tiny.cloud/docs/tinymce/6/link/#link_list
74            link_list: [
75              { title: "Features", value: 'https://www.tiny.cloud/tinymce/features/' },
76              { title: "Docs", value: 'https://www.tiny.cloud/pricing/' },
77              { title: "Pricing", value: 'https://www.tiny.cloud/docs/tinymce/6/' }
78            ],
79
80            // Only allow certain image types to be added to emails
81            // https://www.tiny.cloud/docs/tinymce/6/file-image-upload/#images_file_types
82            images_file_types: "jpeg,jpg,png,gif",
83
84            // We don't want users to be able to resize images by using
85            // drag and drop because it can break layout templates.
86            // https://www.tiny.cloud/docs/tinymce/6/content-behavior-options/#object_resizing
87            object_resizing : false,
88
89            // The formats option is where custom formatting options are defined.
90            // In this case we define a couple of headings and a button appearance
91            // for links. HTML Emails require inlining the CSS. Fortunately the
92            // styles property makes that easy.
93            // https://www.tiny.cloud/docs/tinymce/6/content-formatting/
94            formats: {
95                h1: { block: 'h1', styles: { fontSize: '24px', color: '#335dff' } },
96                h2: { block: 'h2', styles: { fontSize: '18px' } },
97                calltoaction: { selector: 'a', styles: { backgroundColor: '#335dff', padding: '12px 16px', color: '#ffffff', borderRadius: '4px', textDecoration: 'none', display: 'inline-block'} }
98            },
99
100            // The style_formats option controls the styleformat toolbar button menu
101            // https://www.tiny.cloud/docs/tinymce/6/user-formatting-options/#style_formats
102            style_formats: [
103                { title: 'Paragraph', format: 'p' },
104                { title: 'Heading 1', format: 'h1' },
105                { title: 'Heading 2', format: 'h2' },
106                { title: 'Button styles'},
107                { title: 'Call-to-action', format: 'calltoaction' },
108            ],
109
110            // An inline editor is "invisible" when there are no content in the editor
111            // Make sure to use the placeholder option to show the user where to write
112            // https://www.tiny.cloud/docs/tinymce/6/editor-important-options/#placeholder
113            placeholder: "Write here...",
114
115            // Toolbar_mode controls how the toolbar behaves when toolbar buttons do not
116            // fit on one row. Wrap displays all toolbar buttons wrapped over multiple rows
117            // https://www.tiny.cloud/docs/tinymce/6/toolbar-configuration-options/#toolbar_mode
118            toolbar_mode: "wrap",
119
120            // Merge Tags lets users add non-editable personalization tokens to your content, so your
121            // app can then merge the personalized content into emails before sending
122            // https://www.tiny.cloud/docs/tinymce/6/mergetags/
123            mergetags_list: [
124            {
125              title: "Contact",
126              menu: [{
127                value: 'Contact.FirstName',
128                title: 'Contact First Name'
129              },
130              {
131                value: 'Contact.LastName',
132                title: 'Contact Last Name'
133              },
134              {
135                value: 'Contact.Email',
136                title: 'Contact Email'
137              }
138              ]
139            },
140            {
141              title: "Sender",
142              menu: [{
143                value: 'Sender.FirstName',
144                title: 'Sender First Name'
145              },
146              {
147                value: 'Sender.LastName',
148                title: 'Sender Last name'
149              },
150              {
151                value: 'Sender.Email',
152                title: 'Sender Email'
153              }
154              ]
155            },
156            {
157              title: 'Subscription',
158              menu: [{
159                value: 'Subscription.UnsubscribeLink',
160                title: 'Unsubscribe Link'
161              },
162              {
163                value: 'Subscription.Preferences',
164                title: 'Subscription Preferences'
165              }
166              ]
167            }
168          ]
169        });
170    </script>
171    <style>
172        body {
173            padding: 0;
174            margin: 0;
175            box-sizing: border-box;
176
177        }
178
179        .container {
180            background-color: #f9f9fb;
181            margin: 0 auto;
182            max-width: 1000px;
183        }
184
185        .email {
186            max-width: 840px;
187            margin: auto;
188        }
189
190        .toolbar {
191            background-color: #f9f9fb;
192            height: 42px;
193            position: -webkit-sticky; /* Safari */
194            position: sticky;
195            top: 0;
196            z-index: 1;
197        }
198
199        .tinymce:focus {
200            border-radius: 0.5px;
201            box-shadow: 0 0 0 4px #fff, 0 0 0 7px #99afff;
202            outline: 0;
203        }
204
205        .mceNonEditable {
206            background-color: #e7ecff;
207            padding: 1px 0;
208            color: #4059b3;
209            font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
210            font-size: 0.9375em;
211        }
212    </style>
213</head>
214
215<body>
216  <div class="container">
217    <div class="toolbar"></div>
218    <div class="email">
219      <table style="background-color: #f9f9fb; width: 100%; padding: 32px 0" border="0">
220        <tr>
221          <td align="center">
222            <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">
223              <tr>
224                <td style="padding: 16px 64px 0;">
225                  <div class="tinymce" id="editor-1" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
226                    <p>Hey {{Contact.FirstName}},</p>
227                    <h1 style="font-size: 24px; color: rgb(51, 93, 255);">What's your email editing project?</h1>
228                    <p>Are you:</p>
229                    <p><strong>Building a new email client</strong> (i.e. the next Gmail) and need rich text editor functionality?</p>
230                    <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>
231                    <p>Then use the only WYSIWYG editor that is trusted by 1.5M developers.</p>
232                    <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>
233                  </div>
234                </td>
235              </tr>
236              <tr>
237                <td style="padding: 0 64px 16px;">
238                  <table border="0" style="width: 100%;">
239                    <tr>
240                      <td style="width: 48%; vertical-align: top;">
241                        <div class="tinymce" id="editor-2" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
242                          <p><img src="https://img.icons8.com/doodle/96/000000/critical-thinking.png" alt="" width="96" height="96"></p>
243                          <h2 style="font-size: 18px;">Curious about TinyMCE?</h2>
244                          <p>Play with this demo to see how our email WYSIWYG editor works.</p>
245                        </div>
246                      </td>
247                      <td style="width: 4%"></td>
248                      <td style="width: 48%; vertical-align: top;">
249                        <div class="tinymce" id="editor-3" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
250                          <p><img src="https://img.icons8.com/doodle/96/000000/electrical--v1.png" width="96" height="96"></p>
251                          <h2 style="font-size: 18px;">Try Premium plugins</h2>
252                          <p>Sign up for a 14-day trial and try out all our premium plugins.</p>
253                        </div>
254                      </td>
255                    </tr>
256                  </table>
257                </td>
258              </tr>
259              <tr>
260                <td style="background-color: #eff0f6; padding: 24px 64px;">
261                  <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>
262                  <p style="margin: 0; font-family: 'helvetica'; font-size: 12px; color: #a0a9c5;">Tiny Technologies | 2100 Geng Road, Palo Alto, CA 94303 USA</p>
263                </td>
264              </tr>
265            </table>
266          </td>
267        </tr>
268      </table>
269    </div>
270  </div>
271</body>
272</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 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 fontsize | bold italic underline forecolor backcolor | link image addcomment showcomments | align lineheight checklist bullist numlist | indent outdent | removeformat",
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            // The Tiny Comments plugin enables you to quickly get collaboration up and
61            // running. There are a lot of options, but here are the most basic
62            // ones to get you started
63            // https://www.tiny.cloud/docs/tinymce/6/introduction-to-tiny-comments/
64            tinycomments_mode: 'embedded',
65            tinycomments_author: 'rmartel',
66            tinycomments_author_name: 'Rosalina Martel',
67            tinycomments_author_avatar: 'https://www.tiny.cloud/images/avatars/avatar-RosalinaMartel.jpg',
68
69            // Show the comments sidebar by default to encourage collaboration and discovery
70            // https://www.tiny.cloud/docs/tinymce/6/customsidebar/#sidebar_show
71            sidebar_show: 'showcomments',
72
73            // Merge Tags lets users add non-editable merge tags to your content, so your
74            // app can then populate dynamic content into rendered documents
75            // https://www.tiny.cloud/docs/tinymce/6/mergetags/
76            mergetags_list: [
77              {
78                value: 'Document.Title',
79                title: 'Document Title'
80              },
81              {
82                value: 'Publish.Date',
83                title: 'Publish Date'
84              },
85              {
86                value: 'Author.Name',
87                title: 'Author Name'
88              }
89            ],
90
91            // The following CSS will be injected into the editor, extending
92            // the default styles.
93            // In a real world scenario, it's recommended to use the content_css
94            // option to load a separate CSS file. This makes editing easier too.
95            // https://www.tiny.cloud/docs/tinymce/6/add-css-options/
96            content_style: `
97                body {
98                    background: #fff;
99                }
100
101                @media (min-width: 840px) {
102                    html {
103                        background: #eceef4;
104                        min-height: 100%;
105                        padding: 0 .5rem;
106                    }
107
108                    body {
109                        background-color: #fff;
110                        box-shadow: 0 0 4px rgba(0, 0, 0, .15);
111                        box-sizing: border-box;
112                        margin: 1rem auto 0;
113                        max-width: 820px;
114                        min-height: calc(100vh - 1rem);
115                        padding: 4rem 6rem 6rem 6rem;
116                    }
117                }
118                `,
119        });
120    </script>
121    <style>
122        body {
123            margin: 4rem auto;
124            padding: 0 2rem;
125            background-color: #f9f9fb;
126        }
127
128        main {
129            width: 100%;
130        }
131    </style>
132</head>
133<body>
134  <main>
135    <textarea id="editor">
136      <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>
137      <p style="text-align: center;">Are you:</p>
138      <table style="border-collapse: collapse; width: 100%;" border="1"><colgroup> <col style="width: 50%;"> <col style="width: 50%;"> </colgroup>
139        <tbody>
140          <tr>
141            <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>
142            <td>
143              <p style="text-align: center;"><span style="font-size: 36pt;"><strong>🗂️</strong></span></p>
144              <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>
145            </td>
146          </tr>
147        </tbody>
148      </table>
149      <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>
150      <h3>Curious about TinyMCE?</h3>
151      <p>Play with this demo to see how TinyMCE works! Try out these popular document creation functions:</p>
152      <ul>
153        <li>Copy complex rich content from another app into the editor</li>
154        <li>Add or resolve a comment</li>
155        <li>Drag-and-drop an image from your computer, then edit it within TinyMCE</li>
156        <li>Insert {{dynamic.content}} into the document using Merge Tags (start typing "{{")</li>
157        <li>Any other functionality that you would expect in a document editor!</li>
158      </ul>
159      <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>
160      <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==-->
161    </textarea>
162  </main>
163</body>
164</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<!--
2  This is an example of how you can use TinyMCE for the messaging capability
3  within your CRM. The config can be adapted to other use cases like logging
4  calls, writing opportunity descriptions, creating events, and more
5-->
6
7<!doctype html>
8<html>
9<head>
10  <meta charset="utf-8">
11  <title>CRM starter config (messaging functionalities)</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      // If we don't need the menubar or statusbar we can hide them.
23      // https://www.tiny.cloud/docs/tinymce/6/menus-configuration-options/#main-editor-menubar-behavior
24      // https://www.tiny.cloud/docs/tinymce/6/statusbar-configuration-options/
25      menubar: false,
26      statusbar: false,
27
28      // Tip - To keep TinyMCE lean, only include the plugins you need.
29      plugins: 'advcode autocorrect autoresize editimage emoticons image link linkchecker lists mergetags powerpaste template tinymcespellchecker',
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      // You can customize the font size options using font_size_formats
60      // https://www.tiny.cloud/docs/tinymce/6/user-formatting-options/#font_size_formats
61      font_size_formats: "8px 10px 12px 14px 18px 24px 36px",
62
63      // The formats option is where custom formatting options are defined.
64      // In this case we define a couple of headings and text formats.
65      // The p is configured to match against multiple formats to make sure
66      // the styleselect toolbar menu button shows paragraphs as enabled on
67      // p tags that lacks style attribute. The first item in the array will
68      // be the one applied when choosing the format via the styleselect
69      // toolbar button.
70      // hhttps://www.tiny.cloud/docs/tinymce/6/content-formatting/#formats
71      formats: {
72        h1: {block: 'h1'},
73        h2: {block: 'h2'},
74        p: [
75          {block: 'p'},
76          {selector: 'p'}
77        ],
78        small: {block: 'small', styles: {fontSize: '12px', color: '#aaaaaa'}}
79      },
80
81      // An alternative to the styleselect toolbar button is the formatselect button
82      // which is a simpler version of the styleselect button. It is configured
83      // using the block_formats option.
84      // https://www.tiny.cloud/docs/tinymce/6/user-formatting-options/#block_formats
85      block_formats: 'Normal=p; Heading=h1; Sub heading=h2; Small=small',
86
87      // In order to force TinyMCE to apply inline styles to the default paragraph
88      // text (required by email), we can use forced_root_block together with
89      // forced_root_block_attrs.
90      // https://www.tiny.cloud/docs/tinymce/6/content-filtering/#forced_root_block
91      forced_root_block: 'p',
92      forced_root_block_attrs: {'style': 'font-size: 14px; font-family: helvetica, arial, sans-serif;'},
93
94      // Only allow certain image types to be uploaded to your CRM or sent via emails
95      // https://www.tiny.cloud/docs/tinymce/6/file-image-upload/#images_file_types
96      images_file_types: "jpeg,jpg,png,gif",
97
98      // In some cases, you may want to disable the spell checker by default as red squiggly
99      // underlines may become a distraction on a busy CRM screen
100      // Spell Checker Pro can still be toggle on/off by the user, using the toolbar or menubar
101      // https://www.tiny.cloud/docs/tinymce/6/introduction-to-tiny-spellchecker/
102      spellchecker_active: false,
103
104      // To increase productivity and minimize extra formatting from other apps, disable
105      // the PowerPaste dialog box and paste over cleaned HTML only
106      // https://www.tiny.cloud/docs/tinymce/6/powerpaste-options/
107      powerpaste_word_import: 'clean',
108      powerpaste_googledocs_import: 'clean',
109      powerpaste_html_import: 'clean',
110
111      // In emails we don't use targets for links so we hide the target drop down in the link
112      // dialog. If using this config for another CRM use case, for example knowledge base
113      // page creation, you can remove this setting.
114      // https://www.tiny.cloud/docs/tinymce/6/link/#link_target_list
115      link_target_list: false,
116
117      // A common feature for email marketing tools is to provide a prepopulated
118      // list of links to choose. Here we define that list.
119      // https://www.tiny.cloud/docs/tinymce/6/link/#link_list
120      link_list: [
121        { title: "Product demo", value: "https://www.tiny.cloud/" },
122        { title: "Pricing", value: "https://www.tiny.cloud/pricing/" },
123        { title: "Sign up", value: "https://www.tiny.cloud/signup/" },
124        {
125          title: "Case studies",
126          value: "https://www.tiny.cloud/solutions/content-authoring-tool/",
127          menu: [
128            { title: "Thomson Reuters", value: "https://assets.ctfassets.net/sn6g75ou164i/529dmerPtej8eu8wxRFSIQ/9eeeacaf7c7f45b43db991a7064c354d/tiny-case-study-thomson-reuters.pdf" },
129            { title: "Morning Brew", value: "https://assets.ctfassets.net/sn6g75ou164i/5Y5ETFsqsbxrn8KrfxxuSn/eba8bdd4be3b378b167bc9e9016f9206/tiny-case-study-morning-brew_1_.pdf" },
130            { title: "Accelo", value: "https://assets.ctfassets.net/sn6g75ou164i/4Zg8kQr3vcRpwWCcjwuwTy/0363c30c76032d69d25b68a6a625126b/tiny-case-study-accelo.pdf" }
131          ]
132        }
133      ],
134
135      // Merge Tags lets users add non-editable personalization tokens to your content, so your
136      // app can then merge the personalized content into emails before sending
137      // https://www.tiny.cloud/docs/tinymce/6/mergetags/
138      mergetags_list: [
139      {
140        title: "Lead",
141        menu: [{
142          value: 'Lead.FirstName',
143          title: 'Lead First Name'
144        },
145        {
146          value: 'Lead.LastName',
147          title: 'Lead Last Name'
148        },
149        {
150          value: 'Lead.Organization',
151          title: 'Lead Organization'
152        },
153        {
154          value: 'Lead.Email',
155          title: 'Lead Email'
156        }
157        ]
158      },
159      {
160        title: "Sender",
161        menu: [{
162          value: 'Sender.FirstName',
163          title: 'Sender First Name'
164        },
165        {
166          value: 'Sender.LastName',
167          title: 'Sender Last Name'
168        },
169        {
170          value: 'Sender.Organization',
171          title: 'Sender Organization'
172        },
173        {
174          value: 'Sender.Email',
175          title: 'Sender Email'
176        }
177        ]
178      },
179      {
180        title: 'Subscription',
181        menu: [{
182          value: 'Subscription.UnsubscribeLink',
183          title: 'Unsubscribe Link'
184        },
185        {
186          value: 'Subscription.Preferences',
187          title: 'Subscription Preferences'
188        }
189        ]
190      }
191      ],
192
193      // Templates is useful for when users need to insert repeatable content,
194      // for example a pre-written message.
195      // https://www.tiny.cloud/docs/tinymce/6/template/
196      templates: [
197        {
198          title: 'Outbound email',
199          description: 'Outbound cold email for prospects',
200          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 are 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>'
201        },
202        {
203          title: 'Follow-up email',
204          description: 'Follow-up to be sent immediately after discovery meetings',
205          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>'
206        }
207      ],
208      // The following css will be injected into the editor, extending
209      // the default styles.
210      // In a real world scenario, with much more custom styles for headings
211      // links, tables, images etc, it's recommended to use the content_css
212      // option to load a separate CSS file. This makes editing easier too.
213      // https://www.tiny.cloud/docs/tinymce/6/add-css-options/
214      content_style: `
215        body {
216          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
217          font-size: 14px;
218          line-height: 1.5rem;
219        }
220
221        h1 {
222          font-size: 24px;
223        }
224
225        h2 {
226          font-size: 18px;
227        }
228      `
229
230      // Next step: Check out Tiny Drive for easy cloud storage of your users'
231      // images and media. Integrates seamlessly with TinyMCE.
232      // https://www.tiny.cloud/drive/
233
234    });
235  </script>
236  <style>
237      body {
238          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
239          font-size: 14px;
240          margin: 2rem;
241      }
242
243      main {
244          max-width: 800px;
245          margin: auto;
246      }
247  </style>
248</head>
249
250<body>
251<main>
252  <textarea id="editor">
253    <p>Hi {{Lead.FirstName}},</p>
254    <h2>What's your CRM editor project?</h2>
255    <p>Are you:</p>
256    <ul>
257      <li>Building a new CRM and need to add rich text editing capabilities?</li>
258      <li>Extending your existing CRM and need a more extensive rich text editor?</li>
259    </ul>
260    <p>Then use the only WYSIWYG CRM editor that&rsquo;s trusted by 1.5M devs.</p>
261    <p><strong>Curious about TinyMCE? </strong>Play with this demo to see how our CRM editor works 😊</p>
262    <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 templates and merge tags.</p>
263  </textarea>
264</main>
265</body>
266</html>
267

[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
6<!DOCTYPE html>
7<html>
8<head>
9    <meta charset="utf-8">
10    <title>LMS use-case demo</title>
11    <meta name="viewport" content="width=device-width, initial-scale=1">
12    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
13    <script>
14      // TinyMCE Learning Management System (LMS) Starter Config
15      // Quick start video - https://www.youtube.com/watch?v=uNuevm_ZzqQ
16
17      tinymce.init({
18        // Select the element(s) to add TinyMCE to using any valid CSS selector
19        selector: "#editor",
20
21        // Tip - To make TinyMCE leaner, only include the plugins you need
22        plugins: "a11ychecker advcode autocorrect autoresize autosave charmap charmap checklist code emoticons footnotes fullscreen image link linkchecker lists media mediaembed mergetags powerpaste preview table tinycomments tinymcespellchecker",
23
24        // Specify the toolbar buttons
25        // We have put our custom insert token button last
26        // https://www.tiny.cloud/docs/tinymce/6/toolbar-configuration-options/
27        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 a11ycheck | addcomment showcomments | fullscreen preview",
28
29        // Disable the status bar
30        // https://www.tiny.cloud/docs/tinymce/6/statusbar-configuration-options/#statusbar
31        statusbar: false,
32
33        // Enable sticky toolbar
34        // https://www.tiny.cloud/docs/tinymce/6/menus-configuration-options/#toolbar_sticky
35        toolbar_sticky: true,
36
37        // Set Enhanced Media Embed's max width
38        // https://www.tiny.cloud/docs/tinymce/6/introduction-to-mediaembed/
39        mediaembed_max_width: 800,
40
41        // You can assign each item in the Blocks menu a user-friendly name
42        // https://www.tiny.cloud/docs/tinymce/6/user-formatting-options/#block_formats
43        block_formats: 'Title=h1; Heading=h2; Sub heading=h3; Blockquote=blockquote; Paragraph=p',
44
45        // Use font_css to load custom fonts from an external source
46        // https://www.tiny.cloud/docs/tinymce/6/add-css-options/#font_css
47        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
48
49        // Set options for Accessibility Checker
50        // https://www.tiny.cloud/docs/tinymce/6/a11ychecker/
51        a11y_advanced_options: true,
52        a11ychecker_html_version: 'html5',
53        a11ychecker_level: 'aa',
54
55        // Merge Tags lets users add non-editable personalization tokens to your content, so your
56        // app can then populate the dynamic content into what is rendered for users
57        // https://www.tiny.cloud/docs/tinymce/6/mergetags/
58        mergetags_list: [
59        {
60          title: "Course",
61          menu: [{
62            value: 'Course.Name',
63            title: 'Course Name'
64          },
65          {
66            value: 'Course.Teacher.Name',
67            title: 'Teacher Name'
68          },
69          {
70            value: 'Course.Department.Head',
71            title: 'Department Head'
72          }
73          ]
74        },
75        {
76          title: "Assignment",
77          menu: [{
78            value: 'Assignment.Name',
79            title: 'Assignment Name'
80          },
81          {
82            value: 'Assignment.DueDate',
83            title: 'Assignment Due Date'
84          }
85          ]
86        },
87        {
88          title: "Student",
89          menu: [{
90            value: 'Student.Name',
91            title: 'Student Name'
92          },
93          {
94            value: 'Student.ID',
95            title: 'Student ID'
96          },
97          {
98            value: 'Student.Email',
99            title: 'Student Email'
100          }
101          ]
102        }
103        ]
104        },
105
106        // The Tiny Comments plugin enables you to quickly get collaboration up and
107        // running. There are a lot of options, but here are the most basic
108        // ones to get you started
109        // https://www.tiny.cloud/docs/tinymce/6/introduction-to-tiny-comments/
110        tinycomments_mode: 'embedded',
111        tinycomments_author: 'rmartel',
112        tinycomments_author_name: 'Rosalina Martel (Instructor)',
113        tinycomments_author_avatar: 'https://www.tiny.cloud/images/avatars/avatar-RosalinaMartel.jpg',
114
115        // Show the comments sidebar by default to encourage collaboration and discovery
116        // https://www.tiny.cloud/docs/tinymce/6/customsidebar/#sidebar_show
117        sidebar_show: 'showcomments',
118
119        // The following css will be injected into the editor, extending
120        // the default styles.
121        // In a real world scenario, with much more custom styles for headings
122        // links, tables, images etc, it's recommended to use the content_css
123        // option to load a separate CSS file. Makes editing easier too.
124        // https://www.tiny.cloud/docs/tinymce/6/add-css-options/
125        content_style: `
126            body {
127                max-width: 800px;
128                margin: auto;
129                font-family: 'Asap', serif;
130                font-size: 17px;
131                color: #222f3e;
132            }
133
134            h1, h2, h3, strong {
135                font-weight: 550;
136            }
137
138            table th,
139            table thead td {
140                background-color: #ecf0f1;
141                font-weight: 550;
142                text-align: left;
143            }
144
145            table caption {
146                display: none;
147            }
148
149            table[data-mce-selected="1"] caption {
150                display: table-caption;
151            }
152
153            .mce-footnotes {
154              font-size:12px;
155            }
156            `
157
158        // Next step: Check out Tiny Drive for easy cloud storage of your users'
159        // images and media. Integrates seamlessly with TinyMCE.
160        // https://www.tiny.cloud/drive/
161
162      });
163    </script>
164    <style>
165        body {
166            margin: 60px 16px;
167            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
168            background-color: #fafafc;
169            font-family: 'Asap', serif;
170            color: #222f3e;
171        }
172
173        .editor-wrap {
174            max-width: 1200px;
175            margin: auto;
176        }
177    </style>
178</head>
179
180<body>
181  <div class="editor-wrap">
182    <textarea id="editor">
183      <h1><span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_39124539331662741473397" data-mce-annotation="tinycomments">Assignment</span> #3: Color Theory</h1>
184      <p>Hello&nbsp;{{Student.Name}},</p>
185      <p>For this week's assignment, you will learn the basics of color theory.</p>
186      <p>Select one of the following topics, and write a research essay. Ensure you answer the questions in full, and provide references for any primary or secondary sources<sup id="footnote_83179098411662742784603" class="mce-footnote"><a href="#footnotes_entry_83179098411662742784603">1</a></sup> consulted. Contact {{Course.Teacher.Name}} or {{Course.Department.Head}} if you have any questions about the assignment.</p>
187      <div style="left: 0px; width: 100%; height: 0px; position: relative; padding-bottom: 56.25%; max-width: 800px;" data-ephox-embed-iri="https://www.youtube.com/watch?v=Qj1FK8n7WgY"><iframe style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" src="https://www.youtube.com/embed/Qj1FK8n7WgY?rel=0" scrolling="no" allowfullscreen="allowfullscreen"></iframe></div>
188      <h2>This week's tasks</h2>
189      <p>Begin by watching the video above then proceed to the assignment questionnaire by pressing continue below.</p>
190      <h3>Topic List</h3>
191      <ul>
192        <li>The origin of Color theory and its effect on emotion and mood is contentious.<sup id="footnote_98446634721662742994322" class="mce-footnote"><a href="#footnotes_entry_98446634721662742994322">2</a></sup> Identify your understanding of the originators of Color theory. Argue for the effectiveness of certain color palettes over others to create different moods.</li>
193        <li>While some experts argue there are no new color palettes, others argue innovation is a constant process. Choose one side, and build an argument: There are no new color palette innovations. New color palette innovations are happening all the time.</li>
194        <li>Select three examples of color theory in practice that are all part of one medium (e.g. film, magazine, television). Explain why these three examples are effective. Contrast and argue why one of these examples is more effective in its use of color theory concepts compared to the others.</li>
195        <li>Wassily Kandinsky states &ldquo;Color is a power which directly influences the soul.&rdquo;<sup id="footnote_34341905131662743043554" class="mce-footnote"><a href="#footnotes_entry_34341905131662743043554">3</a></sup> Explain what Kandinsky meant, and provide an argument explaining what Kandinsky means using color theory principles.</li>
196      </ul>
197      <h3>Also...</h3>
198      <ul>
199        <li>Think about the difference between mixing colors using colored lights vs using paint.</li>
200        <li>Pay extra attention to the different complementary color models.</li>
201      </ul>
202      <blockquote>
203        <p>&ldquo;Color is a power which directly influences the soul.&rdquo;<br><span style="color: #95a5a6;"><em>&ndash;&nbsp;Wassily Kandinsky&nbsp;</em></span></p>
204      </blockquote>
205      <h2>Deadlines</h2>
206      <p>Please submit your tasks before {{Assignment.DueDate}}</p>
207      <h2>Grading Criteria</h2>
208      <table style="border-collapse: collapse; width: 99.8698%; height: 157px;" border="1">
209        <thead>
210          <tr>
211            <th style="width: 18.0915%;" scope="col">&nbsp;</th>
212            <td style="width: 18.0915%;" scope="col">High Achievement</td>
213            <td style="width: 18.2224%;" scope="col">Good Achievement</td>
214            <td style="width: 18.2224%;" scope="col">Pass</td>
215            <td style="width: 18.2224%;" scope="col">Fail</td>
216          </tr>
217        </thead>
218        <tbody>
219          <tr>
220            <th style