The best rich text editor for
project and workflow management apps

Building or extending. Collaborating or streamlining.
No matter the project, TinyMCE works best

Get TinyMCE FREE Explore Premium Plans

[DEMO] Show TinyMCE in action

Comments

Add a comment ...

Great job! 👍

Done

Details

Assignee

Mike Smith

Reporter

Tiny

Status

Ready

Labels

TinyMCE7

Team

Tiny

Speed up proposal and project workflows

The TinyMCE WYSIWYG editor improves your ROI, increases usage, decreases support costs and streamlines the UX of your business process management software.

Your developers have full control of the code, UI, configuration and integrations, while your non-technical users can create, manage and modify every type of content within your document collaboration software, including emails, proposals, technical and scientific reports, timelines, planning and reports.

Workflow starter config

Without code tipsWithout code tipsWith code tips

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

1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <title>Workflow style demo</title>
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>
8
9    <script>
10    let commonConfig = {
11      plugins: "ai advcode advtable autocorrect autolink checklist codesample editimage emoticons image link linkchecker lists markdown media mediaembed powerpaste table tinymcespellchecker math",
12      menubar: false,
13      // icons: 'thin',
14      // skin: 'naked',
15      inline: true,
16      toolbar_persist: true,
17      object_resizing: false,
18      mobile: {
19          toolbar_mode: 'floating'
20      },
21      ai_shortcuts: [
22        { title: 'Summarize content', prompt: 'Provide the key points and concepts in this content in a succinct summary.' },
23        { title: 'Improve writing', prompt: 'Rewrite this content with no spelling mistakes, proper grammar, and with more descriptive language, using best writing practices without losing the original meaning.' }
24      ],
25      spellchecker_language: 'en',
26      spellchecker_active: true
27
28  }
29  tinymce.init({
30      selector: "#editor-description-content",
31      toolbar: "blocks | aidialog aishortcuts | bold italic forecolor backcolor | numlist bullist checklist | link image emoticons table codesample hr blockquote | code | math",
32      fixed_toolbar_container: '#editor-description-toolbar',
33      placeholder: "Add a description",
34      setup: (editor) => {
35
36          editor.on('focus', () => {
37              document.getElementById('editor-description-wrap').classList.add('enabled');
38          });
39      },
40      ...commonConfig,
41  });
42  tinymce.init({
43      selector: "#editor-comment-content",
44      toolbar: "bold italic forecolor backcolor | aidialog aishortcuts | numlist bullist | link image emoticons codesample blockquote math",
45      placeholder: "Add a comment...",
46      fixed_toolbar_container: '#editor-comment-toolbar',
47      setup: (editor) => {
48          editor.on('focus', () => {
49              document.getElementById('editor-comment-wrap').classList.add('enabled');
50          });
51      },
52      ...commonConfig,
53  });
54
55  function save(id) {
56      document.getElementById(id).classList.remove('enabled');
57  }
58    </script>
59    <style>
60        body {
61            margin: 2rem .5rem;
62            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
63        }
64
65        main {
66            max-width: 720px;
67            margin: auto;
68        }
69
70        .editor-wrap.enabled {
71            border-radius: 3px;
72            border: 1px solid #ccc;
73        }
74
75        .editor-content {
76            transition: min-height .25s, padding-bottom .25s;
77            min-height: 0;
78            outline: none;
79            border-radius: 1px;
80            transition: box-shadow .15s, background-color .15s;
81        }
82
83        .editor-content>*:first-child {
84            margin-top: 0;
85        }
86
87        .editor-content>*:last-child {
88            margin-bottom: 0;
89        }
90
91        .editor-wrap#editor-description-wrap:hover:not(.enabled) .editor-content {
92            background-color: #efefef;
93            box-shadow: 0 0 0 6px #efefef;
94        }
95
96        .editor-wrap.enabled .editor-content {
97            min-height: 140px;
98            padding: 1rem;
99        }
100
101        .editor-toolbar {
102            padding: 3px;
103            display: none;
104            border-bottom: 1px solid #ccc;
105            z-index: 1;
106        }
107
108        .editor-wrap.enabled .editor-toolbar {
109            display: block;
110        }
111
112        .editor-footer {
113            margin: 1rem;
114            display: none;
115            padding-top: .5rem;
116        }
117
118        .editor-wrap.enabled .editor-footer {
119            display: block;
120        }
121
122        .editor-save-btn {
123            background: #207ab7;
124            font-size: 16px;
125            font-weight: bold;
126            color: #fff;
127            border: none;
128            outline: none;
129            height: 34px;
130            line-height-step: 34px;
131            padding: 0 16px;
132            border-radius: 4px;
133            margin: 0;
134            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
135            -webkit-user-select: none;
136        }
137
138        .editor-cancel-btn {
139            background: #dfe3ec;
140            font-size: 16px;
141            font-weight: bold;
142            color: #17224f;
143            border: none;
144            outline: none;
145            height: 34px;
146            line-height-step: 34px;
147            padding: 0 16px;
148            border-radius: 4px;
149            margin: 0;
150            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
151            -webkit-user-select: none;
152        }
153
154        .editor-label {
155            font-size: 19px;
156            margin: 2rem 0 1rem;
157            display: block;
158        }
159
160        .comment {
161            display: flex;
162        }
163
164        .avatar {
165            background-color: #ff9999;
166            color: #17224f;
167            font-size: 18px;
168            font-weight: bold;
169            border-radius: 100px;
170            width: 42px;
171            height: 42px;
172            line-height: 42px;
173            text-align: center;
174            margin-right: 1rem;
175        }
176
177        .editor-wrap#editor-comment-wrap {
178            border: 1px solid #ccc;
179            border-radius: 3px;
180            flex-grow: 1;
181        }
182
183        .editor-wrap#editor-comment-wrap .editor-content {
184            padding: 1rem;
185        }
186        /* and not namespaced to `.editor-content` */
187
188        a,
189        a:link {
190            color: blue;
191        }
192
193        a:visited {
194            color: purple;
195        }
196
197        a:hover {
198            color: green;
199        }
200
201        a:active {
202            color: red;
203        }
204
205        h1 {
206            font-size: 1.75rem;
207            font-weight: strong;
208        }
209
210        h2 {
211            font-size: 1.5rem;
212            font-weight: strong;
213        }
214
215        h3 {
216            font-size: 1rem;
217            font-weight: strong;
218        }
219
220        hr {
221            margin: 1.5rem 0;
222            padding: .5rem 0;
223            border: 0;
224        }
225
226        hr::after {
227            content: '';
228            display: block;
229            border-width: 0 0 1px 0;
230            border-color: #ccc;
231            border-style: solid;
232        }
233
234        img {
235            max-width: 100%;
236            height: auto;
237        }
238
239        .tox.tox-tinymce-aux .tox-toolbar__overflow {
240            background-color: #fff !important;
241        }
242
243        #editor-comment-wrap .mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before {
244          left:inherit;
245        }
246    </style>
247</head>
248
249<body>
250    <main>
251        <label class="editor-label">Description</label>
252        <div class="editor-wrap" id="editor-description-wrap">
253            <div class="editor-toolbar" id="editor-description-toolbar"></div>
254            <div class="editor-content" id="editor-description-content">
255                <h2><strong>What&rsquo;s your rich text editor </strong><strong>workflow</strong><strong> project?&nbsp;</strong></h2>
256                <p>Are you&hellip;</p>
257                <ul>
258                    <li><strong>Building a new workflow or project management platform</strong> and need to add rich text editing functionality?</li>
259                    <li><strong>Extending your existing workflow or project management app</strong> and need to enhance your default editor?</li>
260                </ul>
261                <p>Then use the only WYSIWYG editor that&rsquo;s trusted by 1.5M developers.</p>
262                <h3><strong>Curious about TinyMCE?</strong></h3>
263                <p>Click inside this box to activate the editor and see how it works!</p>
264            </div>
265            <footer class="editor-footer">
266                <button type="button" id="save-description-btn" onclick="save('editor-description-wrap')" class="editor-save-btn">Save</button>
267                <button type="button" onclick="alert('Your own custom save function')" class="editor-cancel-btn">Cancel</button>
268            </footer>
269        </div>
270
271        <label class="editor-label">Comments</label>
272        <div class="comment">
273            <div class="avatar">FD</div>
274            <div class="editor-wrap" id="editor-comment-wrap">
275                <div class="editor-toolbar" id="editor-comment-toolbar"></div>
276                <div class="editor-content" id="editor-comment-content"></div>
277                <footer class="editor-footer">
278                    <button type="button" id="save-description-btn" onclick="alert('Your own custom save function')" class="editor-save-btn">Save</button>
279                    <button type="button" onclick="alert('Your own custom cancel function')" class="editor-cancel-btn">Cancel</button>
280                </footer>
281            </div>
282        </div>
283    </main>
284</body>
285
286</html>
287

"The communication ability of Project.co has been dramatically improved after integrating TinyMCE… TinyMCE works the way it’s supposed to every time, which is I think the most important thing. It's always good to know that you're using the best available tools."

Matt Byrom|Manager Director, Project.co

"One thing that has been great for us is the ability to insert data metrics. That was a big reason why we chose TinyMCE. These proposals are specific to each individual sales prospect, and they have a lot of dynamic data in terms of pricing and savings—all the different numbers that go into them. Having the ability to add and remove these dynamic fields has been key for us."

Mariya Nomanbhoy|COO, Sighten

"TinyMCE has allowed us to stand apart from our competition. We can now say that we have a solution that truly allows our users to customize how their content looks as easily as they would a Word document, but still keep our own branding."

Justin Witz|CTO & Co-Founder, Catapult

"I've worked with lots of different editors, but TinyMCE was the simplest to implement. The amount of functionality you get right out of the box would be foolhardy to try and recreate. TinyMCE solves lots of problems, and it's been trusted by the industry for longer than anything else that I know of."

Tim Craver|Development Manager, Allied Solutions

When you need the best WYSIWYG editor for managing workflows

Our editor delivers the best

Faster speed-to-market

Save years of developer time and hundreds of thousands of dollars in engineering costs by leveraging our out-of-the-box editor and 24/7 support team. The best workflow editor gets you to market faster.

Focus on custom and complex use cases, across all types of workflows

Explore features:

Templates

Comments & Mentions

Delight your users

Our workflow editor is built to mimic the tools your users know and love. There’s no ramp-up or steep learning curves – it’s an editing experience your users already know and enjoy.

Spotlight on user experience, where the editing tools seamlessly create and manage multiple content structures within a single document and a clean copy-paste experience

Explore features:

Clean Copy-paste

AI Assistant

HTML you can trust

Take the guesswork out of document creation and publish clean and compliant output from the workflow text editor that’s trusted by 1.5M developers, and over 40% of the world’s websites.

Fit within an enterprise-grade tech stack via 400+ customizable APIs and 12+ framework integrations to create the experience users need

Explore features:

HTML output options

Accessibility Checker

Workflow benefits

Developer functionality

All-in-one workflow editing tool

Every project, proposal or workflow management application needs an intuitive WYSIWYG editor that’s feature-rich and easy to use for content creators, project managers, subject matter experts, or administrators who don’t have coding skills. Equally, the workflow editor must be totally customizable so your developers can control the back-end, integrate with existing tech stacks and be confident the HTML output is clean, quality and compliant.

TinyMCE is downloaded 350M+ times every year and available through either a free, open source license or a paid commercial license.

All the familiar WYSIWYG
features developers (and users) expect

Editor Control

Give users either unrestricted creative freedom, or just enough to create and edit what they need:

Prevent the editing of restricted content using Multi-Root Editing
Only enable the functionality needed and use Quick Toolbar and keyboard shortcuts to speed up content creation
Control the output with a variety of options around HTML and CSS
Tokens allow quick, controllable, automated insertion of common data such as name, emails, and more
Autosave avoids the risk of losing content
Autoresize allows the editor to resize to fit its contents as it expands

Content Creation

Enable users to create content using features they know and love:

Error-free clean copy-paste from Word, Excel and Google Docs with PowerPaste
Help users write better and faster with AI Assistant
Directly import MS Word documents. Export your content to MS Word or PDF with Document Converters
Create cleanly formatted equations and formulas with the Math Equations feature
Write, or paste, Markdown directly in the editor, and TinyMCE instantly converts it to rich text
Image and Word Count tools that enhance a wide range of content creation projects
Range of content formatting tools like Checklists, Enhanced Tables and Page Break
Image Editing lets users apply 10 powerful transformations to their images – crop, rotate, resize and other filters
Insert pre-defined or user-defined content easily with Templates
Inline editing to Preview how content looks before publishing
Generates clean SEO-friendly HTML output ready to be indexed by search engines
Optimized outputs for desktop and mobile

Compliance

Ensure user-generated content is aligned with corporate and regulatory standards:

Maintain regulatory standards and avoid potential fines and lawsuits with Accessibility Checker (WCAG)
Identify document changes over time with Revision History
Build custom dictionaries to ensure content is on-brand with Spell Checker
Globally consistent spelling with simultaneous checking of up to 13 languages (plus medical terminology)
Fix obvious (and not-so-obvious) mistakes before they see the light of day with Spelling Autocorrect
Eliminate embarrassing broken links with Link Checker

Collaboration

Produce better outcomes with collaborative editing tools:

Enhance peer-to-peer collaboration with Comments and threaded conversations
Kickstart conversations with @mentions
Identify document changes over time with Revision History

File & media management

Manage your files or images in the cloud with Tiny Drive:

Upload and browse files, and insert images inside TinyMCE
Import existing assets from any connected Google Drive or Dropbox account
Minimal configuration, integrates seamlessly
Secure – uses utilizes JSON Web Tokens (JWT)
Scalable – uses Amazon S3 cloud storage
Note: Tiny Drive is an add-on to TinyMCE

Internationalization

Provide a consistent and reliable editing experience, from Bogotá to Istanbul:

38 fully-vetted, professional UI translations
37 community-contributed UI translations
13 languages supported with Spell Checker

See full demo | Discover integrations | Explore 60+ features

Ready to use TinyMCE for
your project?

Get a quote

How TinyMCE is different from
the alternatives

Unmatched domain experience

Every day, the world’s biggest enterprise brands and growing startups rely on TinyMCE for their mission-critical editing needs. For the last two decades, we’ve consistently innovated to create the acknowledged best-in-class rich text editor, that lets developers and creators do more with less by providing:

Smooth, lightweight code that achieves both speed and flexibility across every major browser
A consistent and reliable release process, providing headache-free upgrades
A reliable enterprise-grade editor that's easily customized and also available through an open-source license
Reusable, modular components, 400+ APIs and 14+ framework integrations

Frameworks

12+ integrations and 400+ flexible APIs

Easily integrates into your tech stack. Enhances your editing experience. 7 first-party and 5 third-party endorsed integrations that make development easier.

Explore integrations →

Hosting

Get TinyMCE two ways Cloud-based or Self-hosted

Get a Free API key to use TinyMCE from the Cloud or Download the SDK for use in your Self-Hosted application.

See how →

Reliable, responsive and future-facing

Every day, our Engineering team solves issues the right way, our Product team encourages perfect results (even if launch dates occasionally slip) and the Customer Success team delivers support that’s reliable, fast and friendly. We’re proud of:

Maintaining industry-leading response rates across dedicated SLAs
96% support ticket customer satisfaction* (Based on Zendesk ratings)
2.84 hr average response time* (August 2021 data)

Help when and where you need it

Enterprise-Grade Support

Responsive, in-house support to help you implement, customize and troubleshoot.

Learn more →

Community

Thousands of questions and answers updated daily on StackOverflow and Github.

Browse questions →

Documentation

Tutorials, quickstarts, code samples and videos to help you deploy faster.

Explore docs →

Collaborative team that grows with you

We let companies focus on their core business, so they don’t have to worry about rich text editing. Product teams can delight their users and creators can work smarter, faster and more productively. Our modus operandi is to be: