The best rich text editor for
project and workflow management apps
Building or extending. Collaborating or streamlining.
No matter the project, TinyMCE works best
[DEMO] Show TinyMCE in action
Comments
Add a comment ...
Great job! 👍
Mike Smith
Reporter
Tiny
Status
Ready
Labels
TinyMCE6
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.
Workflow starter config
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<!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/6/tinymce.min.js" referrerpolicy="origin"></script>
8
9 <script>
10 let commonConfig = {
11 plugins: "advcode advtable autocorrect autolink checklist codesample editimage emoticons image link linkchecker lists media mediaembed powerpaste table tinymcespellchecker",
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 spellchecker_language: 'en',
22 spellchecker_active: true
23
24 }
25 tinymce.init({
26 selector: "#editor-description-content",
27 toolbar: "blocks | bold italic forecolor backcolor | numlist bullist checklist | link image emoticons table codesample hr blockquote | code ",
28 fixed_toolbar_container: '#editor-description-toolbar',
29 placeholder: "Add a description",
30 setup: (editor) => {
31
32 editor.on('focus', () => {
33 document.getElementById('editor-description-wrap').classList.add('enabled');
34 });
35 },
36 ...commonConfig,
37 });
38 tinymce.init({
39 selector: "#editor-comment-content",
40 toolbar: "bold italic forecolor backcolor | numlist bullist | link image emoticons codesample blockquote ",
41 placeholder: "Add a comment...",
42 fixed_toolbar_container: '#editor-comment-toolbar',
43 setup: (editor) => {
44 editor.on('focus', () => {
45 document.getElementById('editor-comment-wrap').classList.add('enabled');
46 });
47 },
48 ...commonConfig,
49 });
50
51 function save(id) {
52 document.getElementById(id).classList.remove('enabled');
53 }
54 </script>
55 <style>
56 body {
57 margin: 2rem .5rem;
58 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
59 }
60
61 main {
62 max-width: 720px;
63 margin: auto;
64 }
65
66 .editor-wrap.enabled {
67 border-radius: 3px;
68 border: 1px solid #ccc;
69 }
70
71 .editor-content {
72 transition: min-height .25s, padding-bottom .25s;
73 min-height: 0;
74 outline: none;
75 border-radius: 1px;
76 transition: box-shadow .15s, background-color .15s;
77 }
78
79 .editor-content>*:first-child {
80 margin-top: 0;
81 }
82
83 .editor-content>*:last-child {
84 margin-bottom: 0;
85 }
86
87 .editor-wrap#editor-description-wrap:hover:not(.enabled) .editor-content {
88 background-color: #efefef;
89 box-shadow: 0 0 0 6px #efefef;
90 }
91
92 .editor-wrap.enabled .editor-content {
93 min-height: 140px;
94 padding: 1rem;
95 }
96
97 .editor-toolbar {
98 padding: 3px;
99 display: none;
100 border-bottom: 1px solid #ccc;
101 z-index: 1;
102 }
103
104 .editor-wrap.enabled .editor-toolbar {
105 display: block;
106 }
107
108 .editor-footer {
109 margin: 1rem;
110 display: none;
111 padding-top: .5rem;
112 }
113
114 .editor-wrap.enabled .editor-footer {
115 display: block;
116 }
117
118 .editor-save-btn {
119 background: #207ab7;
120 font-size: 16px;
121 font-weight: bold;
122 color: #fff;
123 border: none;
124 outline: none;
125 height: 34px;
126 line-height-step: 34px;
127 padding: 0 16px;
128 border-radius: 4px;
129 margin: 0;
130 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
131 -webkit-user-select: none;
132 }
133
134 .editor-cancel-btn {
135 background: #dfe3ec;
136 font-size: 16px;
137 font-weight: bold;
138 color: #17224f;
139 border: none;
140 outline: none;
141 height: 34px;
142 line-height-step: 34px;
143 padding: 0 16px;
144 border-radius: 4px;
145 margin: 0;
146 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
147 -webkit-user-select: none;
148 }
149
150 .editor-label {
151 font-size: 19px;
152 margin: 2rem 0 1rem;
153 display: block;
154 }
155
156 .comment {
157 display: flex;
158 }
159
160 .avatar {
161 background-color: #ff9999;
162 color: #17224f;
163 font-size: 18px;
164 font-weight: bold;
165 border-radius: 100px;
166 width: 42px;
167 height: 42px;
168 line-height: 42px;
169 text-align: center;
170 margin-right: 1rem;
171 }
172
173 .editor-wrap#editor-comment-wrap {
174 border: 1px solid #ccc;
175 border-radius: 3px;
176 flex-grow: 1;
177 }
178
179 .editor-wrap#editor-comment-wrap .editor-content {
180 padding: 1rem;
181 }
182 /* and not namespaced to `.editor-content` */
183
184 a,
185 a:link {
186 color: blue;
187 }
188
189 a:visited {
190 color: purple;
191 }
192
193 a:hover {
194 color: green;
195 }
196
197 a:active {
198 color: red;
199 }
200
201 h1 {
202 font-size: 1.75rem;
203 font-weight: strong;
204 }
205
206 h2 {
207 font-size: 1.5rem;
208 font-weight: strong;
209 }
210
211 h3 {
212 font-size: 1rem;
213 font-weight: strong;
214 }
215
216 hr {
217 margin: 1.5rem 0;
218 padding: .5rem 0;
219 border: 0;
220 }
221
222 hr::after {
223 content: '';
224 display: block;
225 border-width: 0 0 1px 0;
226 border-color: #ccc;
227 border-style: solid;
228 }
229
230 img {
231 max-width: 100%;
232 height: auto;
233 }
234
235 .tox.tox-tinymce-aux .tox-toolbar__overflow {
236 background-color: #fff !important;
237 }
238
239 #editor-comment-wrap .mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before {
240 left:inherit;
241 }
242 </style>
243</head>
244
245<body>
246 <main>
247 <label class="editor-label">Description</label>
248 <div class="editor-wrap" id="editor-description-wrap">
249 <div class="editor-toolbar" id="editor-description-toolbar"></div>
250 <div class="editor-content" id="editor-description-content">
251 <h2><strong>What’s your rich text editor </strong><strong>workflow</strong><strong> project? </strong></h2>
252 <p>Are you…</p>
253 <ul>
254 <li><strong>Building a new workflow or project management platform</strong> and need to add rich text editing functionality?</li>
255 <li><strong>Extending your existing workflow or project management app</strong> and need to enhance your default editor?</li>
256 </ul>
257 <p>Then use the only WYSIWYG editor that’s trusted by 1.5M developers.</p>
258 <h3><strong>Curious about TinyMCE?</strong></h3>
259 <p>Click inside this box to activate the editor and see how it works!</p>
260 </div>
261 <footer class="editor-footer">
262 <button type="button" id="save-description-btn" onclick="save('editor-description-wrap')" class="editor-save-btn">Save</button>
263 <button type="button" onclick="alert('Your own custom save function')" class="editor-cancel-btn">Cancel</button>
264 </footer>
265 </div>
266
267 <label class="editor-label">Comments</label>
268 <div class="comment">
269 <div class="avatar">FD</div>
270 <div class="editor-wrap" id="editor-comment-wrap">
271 <div class="editor-toolbar" id="editor-comment-toolbar"></div>
272 <div class="editor-content" id="editor-comment-content"></div>
273 <footer class="editor-footer">
274 <button type="button" id="save-description-btn" onclick="alert('Your own custom save function')" class="editor-save-btn">Save</button>
275 <button type="button" onclick="alert('Your own custom cancel function')" class="editor-cancel-btn">Cancel</button>
276 </footer>
277 </div>
278 </div>
279 </main>
280</body>
281
282</html>
283
"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."
"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."
"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."
"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."
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:
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:
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:
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
- Image and Word Count tools that enhance a wide range of content creation projects
- Range of content formatting tools like Checklists, Advanced Tables and Page Break
- Enhanced 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 Advanced 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)
- Build custom dictionaries to ensure content is on-brand with Spell Checker Pro
- 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
- When a document is final, export it to a non-editable PDF for safe keeping using PDF Export
Collaboration

Produce better outcomes with collaborative editing tools:
- Let users collaboratively work on content with secure end-to-end encrypted Real-time Collaboration
- Enhance peer-to-peer collaboration with Comments and threaded conversations
- Kickstart conversations with @mentions
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 Pro
See full demo | Discover integrations | Explore 60+ features
Ready to use TinyMCE for
your project?
Get a quoteHow 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:
- Helpful
- WYSIWYG and easy to work with
- Consultative, partnering with you throughout your stages of growth
- Champions of open source and the dev community who make it all possible
Modify TinyMCE to suit custom use cases
Modify TinyMCE to suit custom use cases
Developers have full source code control for endless customizations
- Out-of-the-box
- UI customization
- API customization
Looking for projects that
TinyMCE can be used for?
Access use-case specific starter configsto kickstart your rich text editing project
Related content

PRODUCT-LED GROWTH
Not-to-miss workflow and automation trends

HOW-TO USE TINYMCE
Setting up the TinyMCE Workflow Starter config

CASE STUDY
How Accelo increased user engagement to over 85%

HOW-TO USE TINYMCE
TinyMCE Workflow Starter Config Tour

WHITEPAPER
The Great Debate Buy vs Build Rich Text Editors

CASE STUDY
How Project.co created one of the industry's most user-friendly PM tools

WHITEPAPER
The Opportunity Cost of Technical Debt

HOW-TO USE TINYMCE
How to enable user tagging and Mentions in your app