TinyMCE
MoxieManager
DriveThe best WYSIWYG editor for CMS
Building or extending. Headless or traditional.
No matter the CMS, TinyMCE works best
Take control of your CMS content
Using TinyMCE means you can put the best rich text editor in your CMS and move on. 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 in your website or SaaS application.
CMS starter config
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.init({
11 selector: 'textarea',
12 plugins: 'a11ychecker advcode advlist advtable anchor autocorrect autosave editimage image link linkchecker lists media mediaembed pageembed powerpaste searchreplace table template tinymcespellchecker typography visualblocks wordcount',
13 toolbar: 'undo redo | styles | bold italic underline strikethrough | align | table link image media pageembed | bullist numlist outdent indent | spellcheckdialog a11ycheck typography code',
14 height: 540,
15 a11ychecker_level: 'aaa',
16 typography_langs: [ 'en-US' ],
17 typography_default_lang: 'en-US',
18 advcode_inline: true,
19 style_formats: [
20 {title: 'Heading 1', block: 'h1'},
21 {title: 'Heading 2', block: 'h2'},
22 {title: 'Paragraph', block: 'p'},
23 {title: 'Blockquote', block: 'blockquote'},
24 {title: 'Image formats'},
25 {title: 'Medium', selector: 'img', classes: 'medium'},
26 ],
27 object_resizing: false,
28 valid_classes: {
29 'img': 'medium',
30 'div': 'related-content'
31 },
32 image_caption: true,
33 noneditable_class: 'related-content',
34 templates: [
35 {
36 title: 'Related content',
37 description: 'This template inserts a related content block',
38 content: '<div class="related-content"><h3>Related content</h3><p><strong>{$rel_lede}</strong> {$rel_body}</p></div>'
39 }
40 ],
41 template_replace_values: {
42 rel_lede: 'Lorem ipsum',
43 rel_body: 'dolor sit amet...',
44 },
45 template_preview_replace_values: {
46 rel_lede: 'Lorem ipsum',
47 rel_body: 'dolor sit amet...',
48 },
49 content_style: `
50 body {
51 font-family: 'Roboto', sans-serif;
52 color: #222;
53 }
54 img {
55 height: auto;
56 margin: auto;
57 padding: 10px;
58 display: block;
59 }
60 img.medium {
61 max-width: 25%;
62 }
63 a {
64 color: #116B59;
65 }
66 .related-content {
67 padding: 0 10px;
68 margin: 0 0 15px 15px;
69 background: #eee;
70 width: 200px;
71 float: right;
72 }
73 `
74 });
75 </script>
76
77</head>
78
79<body>
80 <h1>TinyMCE CMS Starter Config</h1>
81 <textarea>
82 <h1>Visiting Norway</h1>
83 <p><strong><img style="float: right;" src="https://images.pexels.com/photos/1559825/pexels-photo-1559825.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Town" width="300" height="375"></strong>Norway, officially the Kingdom of Norway, is a <a href="https://en.wikipedia.org/wiki/Nordic_countries">Nordic country</a> in Northern Europe, the mainland territory of which comprises the western and northernmost portion of the Scandinavian Peninsula.</p>
84 <p>The remote Arctic island of Jan Mayen and the archipelago of Svalbard also form part of Norway. Bouvet Island, located in the <a href="https://en.wikipedia.org/wiki/Subantarctic">Subantarctic</a>, is a dependency of Norway; it also lays claims to the Antarctic territories of Peter I Island and Queen Maud Land. The capital and largest city in Norway is <a href="https://en.wikipedia.org/wiki/Oslo">Oslo</a>.<strong><br></strong></p>
85 <p>Listen to Norway's royal anthem on Spotify:</p>
86 <div style="left: 0px; width: 100%; height: 152px; position: relative; max-width: 650px;" data-ephox-embed-iri="https://open.spotify.com/track/6SPocux2pBpFp3lshAOek1?si=907d52cf2af94efc"><iframe style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" src="https://open.spotify.com/embed/track/6SPocux2pBpFp3lshAOek1?utm_source=oembed" allow="clipboard-write; encrypted-media; fullscreen; picture-in-picture;" allowfullscreen="allowfullscreen"></iframe></div>
87 <h2>Geography</h2>
88 <div class="related-content">
89 <h3>Related content</h3>
90 <p><strong>Lorem ipsum</strong> dolor sit amet...</p>
91 </div>
92 <p>Norway has a total area of 385,207 square kilometres (148,729 sq mi) and had a population of 5,425,270 in January 2022. The country shares a long eastern border with Sweden at a length of 1,619 km (1,006 mi). It is bordered by Finland and Russia to the northeast and the Skagerrak strait to the south, on the other side of which are Denmark and the United Kingdom.</p>
93 <p>Norway has an extensive coastline, facing the North Atlantic Ocean and the Barents Sea. The maritime influence dominates Norway's climate, with mild lowland temperatures on the sea coasts; the interior, while colder, is also significantly milder than areas elsewhere in the world on such northerly latitudes. Even during polar night in the north, temperatures above freezing are commonplace on the coastline. The maritime influence brings high rainfall and snowfall to some areas of the country.</p>
94 <h2>Norway 3-day itinerary</h2>
95 <p>If you're in Norway for a long weekend or just a short trip, here's our recommendation:</p>
96 <table style="border-collapse: collapse; border-width: 1px;" border="1">
97 <thead>
98 <tr>
99 <td style="width: 12.9794%; border-width: 1px;"> </td>
100 <td style="width: 44.5428%; border-width: 1px;"><strong>Location</strong></td>
101 <td style="width: 42.4779%; border-width: 1px;"><strong>Activity</strong></td>
102 </tr>
103 </thead>
104 <tbody>
105 <tr>
106 <td style="width: 12.9794%; border-width: 1px;"><strong>Day 1</strong></td>
107 <td style="width: 44.5428%; border-width: 1px;">Flåm Mountain Railway and Flåm village</td>
108 <td style="width: 42.4779%; border-width: 1px;">Tellus est malesuada </td>
109 </tr>
110 <tr>
111 <td style="width: 12.9794%; border-width: 1px;"><strong>Day 2</strong></td>
112 <td style="width: 44.5428%; border-width: 1px;">UNESCO-listed Nærøyfjord and Voss village</td>
113 <td style="width: 42.4779%; border-width: 1px;">Vivamus pretium ornare est</td>
114 </tr>
115 <tr>
116 <td style="width: 12.9794%; border-width: 1px;"><strong>Day 3</strong></td>
117 <td style="width: 44.5428%; border-width: 1px;">Leaving Voss</td>
118 <td style="width: 42.4779%; border-width: 1px;">Amet, consectetuer adipiscing</td>
119 </tr>
120 </tbody>
121 </table>
122 <h2>Where to book your travel</h2>
123 <ol>
124 <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
125 <li>Aliquam tincidunt mauris eu risus.</li>
126 </ol>
127 <blockquote>
128 <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>
129 </blockquote>
130 <h3>Staying healthy</h3>
131 <ul>
132 <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
133 <li>Aliquam tincidunt mauris eu risus.</li>
134 </ul>
135 <p><em>Featuring <a href="https://en.wikipedia.org/wiki/Norway">content from Wikipedia</a></em></p>
136 </textarea>
137</body>
138</html>"We were able to configure TinyMCE to do exactly what we needed to do – there was no one else out there that could do that. It definitely feels like the set-and-forget tool, and their dedicated premium support meant we never felt like we were just begging for some spare time from an otherwise overworked developer."
"We just hired a new writer and within a 20-minute training session, she felt completely fine using TinyMCE and the new CMS. That used to take hours. Everything across the board has been so streamlined that we jokingly call it our ‘Industrial Revolution."
"TinyMCE is so easy to use, and we don't have to worry about text editing anymore. Without Tiny, we would have had to put somebody full time on building a tool like that, which could easily have cost $100,000 a year, not to mention the ongoing costs of maintaining an expensive tool."
"TinyMCE was transformative for our CMS. There's a lot of things that we were doing with other tools that we now don't have to because of Tiny. It cuts our development time for new sites in half, allowing us to bring our product to market quicker."
When you need the best
WYSIWYG editor for CMS
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 CMS editor gets you to market faster.
Focuses on custom and complex use cases, and content production workflows.
Explore features:
Delight your users
Our WYSIWYG CMS 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.
Spotlights user experience, where the editing tools create and manage multiple content structures and a clean copy-paste experience.
Explore features:
HTML you can trust
Take the guesswork out of web content management and publish clean and compliant output from the CMS text editor that’s trusted by 1.5M developers, and over 40% of the world’s websites.
Fits within an enterprise-grade tech stack via 400+ customizable APIs and 12+ framework integrations.
Explore features:
All-in-one web content editing tool
Every CMS needs an intuitive WYSIWYG editor that’s feature-rich and easy to use for content creators, web managers, subject matter experts, or journalists who don’t have coding skills.
Equally, the CMS editor must be totally customizable so 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 WYSIWYG features
developers (and users) expect
Сontent 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
- Image and Word Count tools that enhance a wide range of content creation projects
- Enhanced Media Embed adds media previews from the most popular sources
- Insert predefined or user-defined content easily with Advanced Templates
- Range of content formatting tools with Checklists and Advanced Tables
- 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
Control
Give users either unrestricted creative freedom, or just enough to create what they need:
- 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
- Customize the UI with pre-made Skins and Icons or build your own
- Prevent the editing of brand or regulatory content using the Noneditable plugin
- Autosave avoids the risk of losing content
- Autoresize allows the editor to resize to fit its contents as it expands
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
- Improve content readability and consistency with Advanced Typography
- Eliminate embarrassing broken links with Link Checker
- Mentions can be used to autocomplete predefined tags, categories or assignees
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
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
CMS features users (and devs) need the most
CONTENT MARKETING & DESIGN
5 ways to level up your CMS
PRODUCT-LED GROWTH
The CMS Guide: 6 problems to overcome in your rich text editor
HOW-TO USE TINYMCE
TinyMCE CMS Config product tour
CONTENT MARKETING & DESIGN
Is your CMS (and its content) being maximized?
HOW-TO USE TINYMCE
Setting up the TinyMCE CMS Starter Config
WORLD OF WYSIWYG
CMS trends to watch (or you’ll be left behind)
WHITEPAPER
The Great Debate Buy vs Build Rich Text Editors