How-to use tinymce
How to set up CMS WYSIWYG editing that rivals Wix and WordPress: a tutorial
Published {{setkaPost.lastUpdated}}
{{setkaPost.readTime}}
You’ve decided to build a Content Management System (CMS) and you’re already stuck. A headless CMS, or traditional? There’s a minefield of CMS options ahead, but one choice isn’t hard to make. You need a brilliant rich text editor in your CMS, to make content creation, editing and publishing a whole lot easier. So, let's help you build one that knocks it out of the park, using TinyMCE as your CMS WYSIWYG editor.
There’s potential in the marketplace. Particularly if you're aiming for the top: building and launching a CMS that rivals CMS products such as Wix and WordPress. To help you get there, this tutorial explains how to set a reliable CMS WYSIWYG editor for your CMS.
![](\"T02AHEAAF-U02DN284RB8-df52ab5e2b2d-512.jpeg\")
John Rau
Marketing Manager at Tiny
Joe Robinson
Dev Advocate | Tech Writer at Tiny
![](\"img-Di-tinymce.jpeg\")
Di Mace
Communications Manager at Tiny
According to a forecast from Zion Market Research, the global CMS market value is expected to grow to US$123,500 million by 2026, up from US$35,903 million in 2018, with a compound annual growth rate (CAGR) of 16.7% between 2019 to 2026. The CMS marketplace is only going to grow. By pairing your CMS with a successful and reliable WYSIWYG, you’re giving your planned application an advantage in this thriving, future marketplace.
For decades, TinyMCE has been the default WordPress editor, and it’s now used within Joomla!, Umbraco, Shopify, HubSpot, and countless other enterprise-grade CMSs as their default editor. By our most recent calculations, around 40% of the web’s content is written and published using TinyMCE!
Since those halcyon WordPress days, TinyMCE has become the most trusted WYSIWYG editor, for three reasons: control, creativity, and compliance. All three are essential for a good CMS, plus TinyMCE helps developers overcome six potential editor issues:
- Overcomes steep learning curves.
- Provides compliant HTML and SEO boosts
- Delivers value through ease of Styling, copying, and creating content
- Incorporates images and embedding rich content
- Provides Template based editing
- Translates content with Internationalization and spell checking
By configuring the TinyMCE rich text editor correctly for the creation of sleek, standards-compliant web content, you can build a leading CMS. But to get there, you’ll need a guide, and that’s what this tutorial covers.
What’s covered in this tutorial
In this tutorial, we’ll show you how to make a CMS editor that delights your users, while at the same time giving them the critical tools they need to create captivating web content, at scale.
While there are five distinct kinds of CMS across different industries, this tutorial shows how to build an industry-leading rich text editor for a Web Content Management System (WCMS). From this point onwards, when the tutorial refers to a “CMS”, please know we mean a WCMS.
Also, be aware of what’s not being built in this tutorial:
- The steps needed to include database functionality that stores content and renders the front end.
- This does not create a drag-and-drop or “page build” CMS editor. Although, it is possible to build on the tutorial results, and create a page builder of your own.
The final result of this tutorial is a CMS editor that can be added directly into your website or intranet projects. To see what it looks like, here’s the CMS editor (using content about travel in Norway for demonstration purposes):
Did you know that TinyMCE is the original CMS rich text editor?
TinyMCE built its fame (and trustworthiness) by being WordPress’ default editor, and it’s now used in Joomla!, Umbraco, Shopify, HubSpot and countless other CMS.
Why bother building your own CMS editor?
Let’s tackle the two questions most frequently asked by developers and product managers alike, in the context of building their own vs buying components and assembling a state-of-the-art rich text editor within a Content Management System.
1. Why not build from scratch?
You can build your own CMS-specific rich text editor (RTE) from scratch and there are numerous resources available to aid that process. However, rich text editors are exceptionally complex. A development team that’s inexperienced in developing RTEs, generally underestimates the myriad of edge cases across both browsers and functionality. Even things that are perceived to be basic, are hard. And costs blow out.
Our latest calculations* estimate the cost of building just the basic open source components of three leading rich text editors (excluding advanced features and plugins) varies between US$15M and US$28M. While the time taken ranges from 115 to 220 person-years for a single developer. There must be a better way. (*as at July 2022)
2. Why build at all? Can’t you buy what you need?
You can, which is why TinyMCE has been engineered so that it’s adaptable to you and your needs. Everything you need is provided out-of-the-box: you pick the features you want from the plugin list, and add them to the core editor. All you do is assemble the components (either through APis or coding), customize parts (if you desire) and draw on the decades-long experience of its builders in rich text editing.
There's even use case specific starter configs and demos, to make it easier for you to get started, along with detailed documentation and support.
![](\"frame-30-copy-2021110813411567.svg\")
Deciding to upgrade vs assembling-and-building
If you already have an app or website, there’s no need to start from scratch. TinyMCE is a flexible WYSIWYG that's easy to integrate. Regardless of your use-case, TinyMCE can easily replace whatever rich text editor you’re currently using, or take the place of a textarea, textbox, or other planned text entry component on a page.
There are pluses and minuses to taking an assemble and upgrade approach, but it can have a very positive effect on your speed-to-market.
Ideally, an upgrade to your current platform shouldn’t present long term difficulties or issues with ongoing maintenance problems. That’s the last thing your team needs: another dependency to maintain. When using TinyMCE through the cloud, Tiny Cloud automatically updates to the latest functionality when new versions are released. (It’s one of the methods we use to reduce development pressure.)
If you’re aiming to upgrade your software, the starter config code is available throughout the tutorial, to use (or just review) as you need. Or, if you’re using a particular framework, TinyMCE is designed to integrate into a variety of frameworks and use cases.
There's even use case specific starter configs and demos, to make it easier for you to get started, along with detailed documentation and support.
Essentials to start building your CMS editor
This tutorial is an in-depth guide that creates your CMS editor using the core TinyMCE rich text editor. It also explains how to upgrade the editor, with advanced features.
What you’ll find in this tutorial:
- A background explanation
- Procedures, working step-by-step through the CMS build
- Working code for the new CMS editor you can test
There is some assumed knowledge for completing the tutorial:
- How to create directories and files in your environment
- How to navigate through different directories
- Internet browsing using popular browsers like Chrome, Safari, or Firefox
- Running a local server with a command like python3 -m http.server 8000 for example
Build your own CMS editor by expanding on this starter config/demo
The TinyMCE rich text editor is a versatile component. There’s a lot of flexibility and possibilities, and these possibilities only scratch the surface of what’s possible. For this specific tutorial, the following steps explain how TinyMCE can be changed to suit the needs of a CMS editor.
Part one focuses on building the foundation using the TinyMCE Core editor. Part two upgrades the CMS editor’s basic abilities with the addition of plugins and options. These upgrades result in a CMS editor that rivals Wix and WordPress, and can be integrated into either a new or existing CMS.
Ready? Let’s start…
Background/Part 1
Knowing the core features of your CMS
The CMS core features explained in Part 1 set up the base level CMS editor. These foundations are important for the later extension steps – that provide better creativity, productivity, and content compliance for writers.
Remember that while the CMS editor is vital to the overall CMS app you’re building, it’s not a complete, end-to-end CMS that includes a database for the content. However at the end of the tutorial, the complete CMS editor is ready for integration into a larger CMS structure.
Background/Part 2
Creativity, productivity, and compliance
After adding the CMS editor’s advanced plugins and options in Part 2 of this tutorial, the editor’s functionality expands to provide important content writing support features and an intuitive UX. Part 2 also introduces vital guardrails to ensure the rich text editing experience remains a true WYSIWYG.
Productivity and compliance features are also configured in Part 2. These help writers get more done in the CMS, and to create content that’s compliant with accessibility requirements. Both of these are key deciding factors weighed by customers, when choosing your CMS for their content production.
Part 1
Lay the foundation
TL;DR
CMSs compete with each other for market share, so it’s important to set up the basic CMS editor with an empowering yet familiar editing experience for your customers, using the TinyMCE core configuration.
Marketers have a powerful tech stack available to them, regardless of which tools they select. But Gartner’s 2022 research into tech stack capabilities found that just 42% of marketers make use of their tool’s full functionality. This represents a decrease in usage. Why has this decrease swept through marketing teams? Gartner VP Analyst Benjamin Bloom says:
![](\"quote-mark-1.svg\")
...the challenges associated with martech underutilization, such as new business models and disrupted customer journeys are making it difficult for marketers to demonstrate technology’s' value.
Benjamin Bloom
Gartner VP Analyst
This paints the picture of a challenging marketplace filled with so much choice, that it's extremely difficult to break through and get your product noticedho.
However, within every challenge hides within it an opportunity. Knowing that only 42% of marketers make use of the tool’s full potential in their work indicates an opportunity to create a CMS that your customers (marketers) actually want to use, and enjoy using. A CMS that can; overcome common stumbling blocks that turn customers off, and provide features that customers actually want and need, represents a CMS well on its way to delighting customers. According to Semrush, 79% of companies are using content marketing to find quality leads, indicating that the need for a good CMS is there for you to lean into. Furthermore, did you know that 45% of Marketing teams are publishing more content, more frequently in 2023 compared to previous years? This demonstrates that the market is ready for your CMS.
This first section demonstrates how to set up the basic CMS editor. This includes the core TinyMCE functionality that empowers customers with a familiar UI and functionality – without overwhelming them. It’s the first step to make a CMS editor that delights your users, and gives them the tools they need to create captivating web content, even at scale.
TinyMCE’s UI – inspired by popular apps
The TinyMCE UI is inspired by familiar tools that people are already using, like MS Word and Google Docs. There’s little to no learning curve to start using the editor, which means increased engagement and less churn for your CMS.
Step 1
Start with the default config
![](\"01-blue.svg\")
Create an HTML file using the following starter code:
<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>CMS Rich Text Editor</title>\n</head>\n<body>\n \n</body>\n</html>If you haven’t already done so, get a FREE TinyMCE API key, which unlocks all the Premium features needed to upgrade your CMS editor.
![](\"info.svg\")
Note: Using your TinyMCE API key in your CMS editor prevents warnings concerning domain names, and messages associated with Premium plugins, from appearing in the TinyMCE text area.
Add the TinyMCE start script, and replace the no-api-key segment in the TinyMCE starter script with your own API key:
<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>CMS Rich Text Editor</title>\n <script src=\"https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js\" referrerpolicy=\"origin\"></script>\n</head>\n<body>\n \n</body>\n</html>Add the TinyMCE init script:
<script>\n tinymce.init({\n selector: \"textarea\"\n });\n</script>Include the following TinyMCE plugins and options to set up the core TinyMCE rich text editor:
<script>\n tinymce.init({\n selector: \"textarea\",\n plugins: \"a11ychecker advcode advlist advtable anchor autocorrect autolink autosave editimage fullscreen image link linkchecker lists media mediaembed pageembed powerpaste searchreplace table template tinymcespellchecker typography visualblocks wordcount\",\n toolbar: \"undo redo | styles | bold italic underline strikethrough | align | table link image media pageembed | bullist numlist outdent indent | spellcheckdialog a11ycheck typography code | fullscreen\",\n height: 540,\n });\n</script>Create the textarea tag and closing tag, and include the following demo content for the CMS editor:
<textarea>\n <h1>Visiting Norway</h1>\n <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>\n <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>\n <p>Listen to Norway's royal anthem on Spotify:</p>\n <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>\n <h2>Geography</h2>\n <div class=\"related-content\">\n <h3>Related content</h3>\n <p><strong>Lorem ipsum</strong> dolor sit amet...</p>\n </div>\n <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>\n <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>\n <h2>Norway 3-day itinerary</h2>\n <p>If you're in Norway for a long weekend or just a short trip, here's our recommendation:</p>\n <table style=\"border-collapse: collapse; border-width: 1px;\" border=\"1\">\n <thead>\n <tr>\n <td style=\"width: 12.9794%; border-width: 1px;\"> </td>\n <td style=\"width: 44.5428%; border-width: 1px;\"><strong>Location</strong></td>\n <td style=\"width: 42.4779%; border-width: 1px;\"><strong>Activity</strong></td>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td style=\"width: 12.9794%; border-width: 1px;\"><strong>Day 1</strong></td>\n <td style=\"width: 44.5428%; border-width: 1px;\">Flåm Mountain Railway and Flåm village</td>\n <td style=\"width: 42.4779%; border-width: 1px;\">Tellus est malesuada </td>\n </tr>\n <tr>\n <td style=\"width: 12.9794%; border-width: 1px;\"><strong>Day 2</strong></td>\n <td style=\"width: 44.5428%; border-width: 1px;\">UNESCO-listed Nærøyfjord and Voss village</td>\n <td style=\"width: 42.4779%; border-width: 1px;\">Vivamus pretium ornare est</td>\n </tr>\n <tr>\n <td style=\"width: 12.9794%; border-width: 1px;\"><strong>Day 3</strong></td>\n <td style=\"width: 44.5428%; border-width: 1px;\">Leaving Voss</td>\n <td style=\"width: 42.4779%; border-width: 1px;\">Amet, consectetuer adipiscing</td>\n </tr>\n </tbody>\n </table>\n <h2>Where to book your travel</h2>\n <ol>\n <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>\n <li>Aliquam tincidunt mauris eu risus.</li>\n </ol>\n <blockquote>\n <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>\n </blockquote>\n <h3>Staying healthy</h3>\n <ul>\n <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>\n <li>Aliquam tincidunt mauris eu risus.</li>\n </ul>\n <p><em>Featuring <a href=\"https://en.wikipedia.org/wiki/Norway\">content from Wikipedia</a></em></p>\n </textarea>![](\"ezgif.com-optimize.gif\")
Note: You may be presented with a warning notification – This domain is not registered with Tiny Cloud – if you’re running TinyMCE on your local machine outside of a web server, or if the domain on which you’re running TinyMCE is not registered against your account.
To remove the message “This domain is not registered with Tiny Cloud”, open your index.html file with TinyMCE on localhost using a PHP or Python testing server on the command line. If you have a CMS that you’re aiming to combine with TinyMCE, take a minute to register your CMS project domain as an approved domain in your account. This also prevents domain registration errors appearing.
The Core TinyMCE editor makes use of a selector, in this demo textarea, which changes the textarea HTML tag in TinyMCE, as the demo loads. Setting the height option to 540 keeps the TinyMCE from expanding past 540 pixels on the CMS page.
The Toolbar option is fully customizable to suit what your CMS editor needs. In this demo, the toolbar configuration provides options for a creative and productive CMS user interface (UI). There are also two plugins that are included in the list of TinyMCE plugins that are yet to be configured (to be explained in the following steps):
- Autosave – This plugin provides a warning when customers close a tab without first saving their work. The plugin can be configured for local browser storage, but this is beyond the tutorial scope.
- Fullscreen
The outcome - a basic CMS editor
You’ve now successfully set up the Core plugins that create the basic CMS editor. Here’s the complete code of the demo for this first essential step:
\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>CMS Rich Text Editor</title>\n <script src=\"https://cdn.tiny.cloud/1/your-api-key/tinymce/6/tinymce.min.js\" referrerpolicy=\"origin\"></script>\n <script>\n tinymce.init({\n selector: \"textarea\",\n plugins: \"a11ychecker advcode advlist advtable anchor autocorrect autolink autosave editimage fullscreen image link linkchecker lists media mediaembed pageembed powerpaste searchreplace table template tinymcespellchecker typography visualblocks wordcount\",\n toolbar: \"undo redo | styles | bold italic underline strikethrough | align | table link image media pageembed | bullist numlist outdent indent | spellcheckdialog a11ycheck typography code | fullscreen\",\n height: 540,\n });\n </script>\n</head>\n<body>\n <textarea>\n <h1>Visiting Norway</h1>\n <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>\n <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>\n <p>Listen to Norway's royal anthem on Spotify:</p>\n <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>\n <h2>Geography</h2>\n <div class=\"related-content\">\n <h3>Related content</h3>\n <p><strong>Lorem ipsum</strong> dolor sit amet...</p>\n </div>\n <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>\n <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>\n <h2>Norway 3-day itinerary</h2>\n <p>If you're in Norway for a long weekend or just a short trip, here's our recommendation:</p>\n <table style=\"border-collapse: collapse; border-width: 1px;\" border=\"1\">\n <thead>\n <tr>\n <td style=\"width: 12.9794%; border-width: 1px;\"> </td>\n <td style=\"width: 44.5428%; border-width: 1px;\"><strong>Location</strong></td>\n <td style=\"width: 42.4779%; border-width: 1px;\"><strong>Activity</strong></td>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td style=\"width: 12.9794%; border-width: 1px;\"><strong>Day 1</strong></td>\n <td style=\"width: 44.5428%; border-width: 1px;\">Flåm Mountain Railway and Flåm village</td>\n <td style=\"width: 42.4779%; border-width: 1px;\">Tellus est malesuada </td>\n </tr>\n <tr>\n <td style=\"width: 12.9794%; border-width: 1px;\"><strong>Day 2</strong></td>\n <td style=\"width: 44.5428%; border-width: 1px;\">UNESCO-listed Nærøyfjord and Voss village</td>\n <td style=\"width: 42.4779%; border-width: 1px;\">Vivamus pretium ornare est</td>\n </tr>\n <tr>\n <td style=\"width: 12.9794%; border-width: 1px;\"><strong>Day 3</strong></td>\n <td style=\"width: 44.5428%; border-width: 1px;\">Leaving Voss</td>\n <td style=\"width: 42.4779%; border-width: 1px;\">Amet, consectetuer adipiscing</td>\n </tr>\n </tbody>\n </table>\n <h2>Where to book your travel</h2>\n <ol>\n <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>\n <li>Aliquam tincidunt mauris eu risus.</li>\n </ol>\n <blockquote>\n <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>\n </blockquote>\n <h3>Staying healthy</h3>\n <ul>\n <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>\n <li>Aliquam tincidunt mauris eu risus.</li>\n </ul>\n <p><em>Featuring <a href=\"https://en.wikipedia.org/wiki/Norway\">content from Wikipedia</a></em></p>\n </textarea>\n</body>\n</html>Part 2
Upgrading the CMS editor
TL;DR
Expanding the basic CMS editor to become something that can rival CMS market leaders requires upgrades (via Premium plugins) to provide the following:
A. Content formatting and styling
B. Introducing creativity
C. Generating productivity
D. Ensuring security and compliance
Part 2 explains the modifications required within the TinyMCE configuration to achieve these vital features that all add up to result in a CMS editor that delights your users, and gives them the critical tools they need to create captivating web content.
Part 2a
Controlling the content format and styles
Content built in a CMS can fall into the classic trap of expectations vs reality. If you’ve worked with CMSs for any length of time, you’re no doubt aware how long it takes to format and style content so it meets exacting design standards. Many CMSs offer control over formatting and style in the editor, but that’s where the control ends. The reasons why this happens:
- Styles applied to content “clash” with the website’s design elements.There’s a hierarchy of styles that can appear on a web page governed by CSS, and sometimes the editor’s style loses the clash.
- The CMS editor selected doesn’t allow for a What You See Is What You Get (WYSIWYG) UI, and therefore are not true WYSIWYGs. In other words there’s been a disconnect between the final draft in the editor and the published copy on the website.
- Not everyone is a design expert, and they shouldn’t have to be to create core content. There may be UI or User Experience (UX) obstacles that make the process of basic design mystifying (a CMS editor should ideally help writers have a clear and direct experience from draft to publication.)
This section of the tutorial provides a remedy to these potential disconnects between editor and front-end, by demonstrating how a true WYSIWYG can be configured to replicate a website’s front end styling. Some guardrails are also included to help guide customers around what they can design.
Essential plugins for style and format control
Style_formats
Font_css
Content_style
Valid_classes
a. Style_formats
What Style_formats option does
The Style_Formats option unlocks the Styles dropdown menu in the toolbar, which then shows a predefined list of styles to apply content.
Why would you need to optimize it?
This option directly removes obstacles between the CMS rich text editor styles and the website front end styles, thereby creating a true WYSIWYG. You can define the HTML design elements used on your website’s front end and even configure specific labels for the different design blocks with this option.
How to set it up
Add the style_formats option to the TinyMCE init script:
tinymce.init({\n selector: \"textarea\",\n plugins: \"a11ychecker advcode advlist advtable anchor autocorrect autolink autosave editimage fullscreen image link linkchecker lists media mediaembed pageembed powerpaste searchreplace table template tinymcespellchecker typography visualblocks wordcount\",\n toolbar: \"undo redo | styles | bold italic underline strikethrough | align | table link image media pageembed | bullist numlist outdent indent | spellcheckdialog a11ycheck typography code | fullscreen\",\n height: 540,\n style_formats: [\n ],\nSet up a list of arrays that have the title and block keys:
tinymce.init({\n selector: \"textarea\",\n plugins: \"a11ychecker advcode advlist advtable anchor autocorrect autolink autosave editimage fullscreen image link linkchecker lists media mediaembed pageembed powerpaste searchreplace table template tinymcespellchecker typography visualblocks wordcount\",\n toolbar: \"undo redo | styles | bold italic underline strikethrough | align | table link image media pageembed | bullist numlist outdent indent | spellcheckdialog a11ycheck typography code | fullscreen\",\n height: 540,\n style_formats: [\n { title: , block: },\n { title: , block: },\n { title: , block: },\n { title: , block: },\n ],\nTo handle image formatting, include two additional style format arrays:
style_formats: [\n { title: , block: },\n { title: , block: },\n { title: , block: },\n { title: , block: },\n { title: },\n { title: , selector: , classes: }\n ],\nSpecify the name of the style you want to include, along with the specific style tag name. Configure the image handling array with the selector of “img”, and the class of “medium”:
tinymce.init({\n selector: \"textarea\",\n plugins: \"a11ychecker advcode advlist advtable anchor autocorrect autolink autosave editimage fullscreen image link linkchecker lists media mediaembed pageembed powerpaste searchreplace table template tinymcespellchecker typography visualblocks wordcount\",\n toolbar: \"undo redo | styles | bold italic underline strikethrough | align | table link image media pageembed | bullist numlist outdent indent | spellcheckdialog a11ycheck typography code | fullscreen\",\n height: 540,\n style_formats: [\n { title: \"Heading 1\", block: \"h1\" },\n { title: \"Heading 2\", block: \"h2\" },\n { title: \"Paragraph\", block: \"p\" },\n { title: \"Blockquote\", block: \"blockquote\" },\n { title: \"Image formats\" },\n { title: \"Medium\", selector: \"img\", classes: \"medium\" }\n ],\nSave the changes
b. Font_css
What Font_css does
The Font_css option allows for the loading in of specific CSS files. These can style both the TinyMCE rich text editor as well as the editor around it.
Why would you need to optimize it?
Because the CMS demo website makes use of the custom Roboto font on the front end, loading in the font URL keeps the CMS content absolutely aligned with the front end fonts. You could make use of any self-hosted or CDN based font solution that aligns with your front end font style.
How to set it up
Add the Font_css option to the TinyMCE init script:
tinymce.init({\n selector: \"textarea\",\n plugins: \"a11ychecker advcode advlist advtable anchor autocorrect autolink autosave editimage fullscreen image link linkchecker lists media mediaembed pageembed powerpaste searchreplace table template tinymcespellchecker typography visualblocks wordcount\",\n toolbar: \"undo redo | styles | bold italic underline strikethrough | align | table link image media pageembed | bullist numlist outdent indent | spellcheckdialog a11ycheck typography code | fullscreen\",\n height: 540,\n style_formats: [\n { title: \"Heading 1\", block: \"h1\" },\n { title: \"Heading 2\", block: \"h2\" },\n { title: \"Paragraph\", block: \"p\" },\n { title: \"Blockquote\", block: \"blockquote\" },\n { title: \"Image formats\" },\n { title: \"Medium\", selector: \"img\", classes: \"medium\" }\n ],Paste in the link to the remote font content:
font_css: [ \"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;1,400&display=swap\" ],Save the change
c. Content_style
What Content_style does
The Content_style within the editor can be directly styled by including this option. It contains a series of CSS rules that affect the content within the TinyMCE text area. This example makes use of a specific set of rules for the configuration of the demo, however this setting would differ compared to production. In a production situation, the content_css TinyMCE option would be employed instead to link to an external style sheet. This again keeps the content in the rich text editor consistent with the CMS front end (true WYSIWYG).
Why would you need to optimize it?
The Content_style option is what makes the CMS WYSIWYG consistent with the front end of the CMS once articles are published. This consistency is the reason why the option needs to be configured. It’s the most direct method to make sure when your customers write and publish their content it looks exactly right, everytime.
How to set it up
Include the content_style option in the TinyMCE init script:
tinymce.init({\n selector: \"textarea\",\n plugins: \"a11ychecker advcode advlist advtable anchor autocorrect autolink autosave editimage fullscreen image link linkchecker lists media mediaembed pageembed powerpaste searchreplace table template tinymcespellchecker typography visualblocks wordcount\",\n toolbar: \"undo redo | styles | bold italic underline strikethrough | align table link image media pageembed | bullist numlist outdent indent | spellcheckdialog a11ycheck typography code | fullscreen\",\n height: 540,\n style_formats: [\n { title: \"Heading 1\", block: \"h1\" },\n { title: \"Heading 2\", block: \"h2\" },\\\n { title: \"Paragraph\", block: \"p\" },\n { title: \"Blockquote\", block: \"blockquote\" },\n { title: \"Image formats\" },\n { title: \"Medium\", selector: \"img\", classes: \"medium\" }\n ],\n font_css: [ \"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;1,400&display=swap\" ],\n content_style: `\n `,Configure Content_style with the specific HTML tags and CSS classes to target, including the img tag class configured under the Style_formats list in the preceding steps:
content_style: `\n body {\n }\n img {\n }\n img.medium {\n }\n a { \n }\n .related-content {\n }\n `,
Include the following CSS:
content_style: `\n body {\n font-family: 'Roboto', serif;\n color: #222;\n }\n img {\n height: auto;\n margin: auto;\n padding: 10px;\n display: block;\n }\n img.medium {\n max-width: 25%;\n }\n a { \n color:#116B59;\n }\n .related-content {\n padding:0 10px;\n margin: 0 0 15px 15px;\n background:#eee;\n width:200px;\n float:right;\n }\n `,\n
Save the change
d. Valid_classes
What Valid_classes does
The Valid_classes option restricts the choice of CSS classes that the user can add when they are styling text in the CMS rich text editor.
Why would you need to optimize it?
Consistency in style between the WYSIWYG and front end can be achieved, even with some guardrails. In this case, that’s what this option does. It restricts the user's ability to create CSS classes to only be the classes and elements expressed in the front end stylesheet.
How to set it up
Add the Valid_classes option to the TinyMCE init script:
tinymce.init({\n selector: \"textarea\",\n plugins: \"a11ychecker advcode advlist advtable anchor autocorrect autolink autosave editimage fullscreen image link linkchecker lists media mediaembed pageembed powerpaste searchreplace table template tinymcespellchecker typography visualblocks wordcount\",\n toolbar: \"undo redo | styles | bold italic underline strikethrough | align | table link image media pageembed | bullist numlist outdent indent | spellcheckdialog a11ycheck typography code | fullscreen\",\n height: 540,\n style_formats: [\n { title: \"Heading 1\", block: \"h1\" },\n { title: \"Heading 2\", block: \"h2\" },\n { title: \"Paragraph\", block: \"p\" },\n { title: \"Blockquote\", block: \"blockquote\" },\n { title: \"Image formats\" },\n { title: \"Medium\", selector: \"img\", classes: \"medium\" }\n ],\n font_css: [ \"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;1,400&display=swap\" ],\n content_style: `\n body {\n font-family: 'Roboto', serif;\n color: #222;\n }\n img {\n height: auto;\n margin: auto;\n padding: 10px;\n display: block;\n }\n img.medium {\n max-width: 25%;\n }\n a { \n color:#116B59;\n }\n .related-content {\n padding:0 10px;\n margin: 0 0 15px 15px;\n background:#eee;\n width:200px;\n float:right;\n }\n `,\n valid_classes: {\"\n },\nConfigure the specific classes:
valid_classes: {\n img: \"medium\",\n div: \"related-content\"\n },Save the change
The outcome: a true CMS WYSIWYG
With these options in place, the CMS editor now has consistent styling with the front end, resulting in a true WYSIWYG experience.
The following Codepen shows all the configured options in this section running:
And here is the code up to this point in the tutorial:
\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>CMS Rich Text Editor</title>\n <script src=\"https://cdn.tiny.cloud/1/your-api-key/tinymce/6/tinymce.min.js\" referrerpolicy=\"origin\"></script>\n <script>\n tinymce.init({\n selector: \"textarea\",\n plugins: \"a11ychecker advcode advlist advtable anchor autocorrect autolink autosave editimage fullscreen image link linkchecker lists media mediaembed pageembed powerpaste searchreplace table template tinymcespellchecker typography visualblocks wordcount\",\n toolbar: \"undo redo | styles | bold italic underline strikethrough | align | table link image media pageembed | bullist numlist outdent indent | spellcheckdialog a11ycheck typography code | fullscreen\",\n height: 540,\n style_formats: [\n { title: \"Heading 1\", block: \"h1\" },\n { title: \"Heading 2\", block: \"h2\" },\n { title: \"Paragraph\", block: \"p\" },\n { title: \"Blockquote\", block: \"blockquote\" },\n { title: \"Image formats\" },\n { title: \"Medium\", selector: \"img\", classes: \"medium\" }\n ],\n font_css: [ \"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;1,400&display=swap\" ],\n content_style: `\n body {\n font-family: 'Roboto', serif;\n color: #222;\n }\n img {\n height: auto;\n margin: auto;\n padding: 10px;\n display: block;\n }\n img.medium {\n max-width: 25%;\n }\n a { \n color:#116B59;\n }\n .related-content {\n padding:0 10px;\n margin: 0 0 15px 15px;\n background:#eee;\n width:200px;\n float:right;\n }\n `,\n valid_classes: {\n img: \"medium\",\n div: \"related-content\"\n },\n });\n </script>\n</head>\n<body>\n <textarea>\n <h1>Visiting Norway</h1>\n <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>\n <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>\n <p>Listen to Norway's royal anthem on Spotify:</p>\n <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>\n <h2>Geography</h2>\n <div class=\"related-content\">\n <h3>Related content</h3>\n <p><strong>Lorem ipsum</strong> dolor sit amet...</p>\n </div>\n <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>\n <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>\n <h2>Norway 3-day itinerary</h2>\n <p>If you're in Norway for a long weekend or just a short trip, here's our recommendation:</p>\n <table style=\"border-collapse: collapse; border-width: 1px;\" border=\"1\">\n <thead>\n <tr>\n <td style=\"width: 12.9794%; border-width: 1px;\"> </td>\n <td style=\"width: 44.5428%; border-width: 1px;\"><strong>Location</strong></td>\n <td style=\"width: 42.4779%; border-width: 1px;\"><strong>Activity</strong></td>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td style=\"width: 12.9794%; border-width: 1px;\"><strong>Day 1</strong></td>\n <td style=\"width: 44.5428%; border-width: 1px;\">Flåm Mountain Railway and Flåm village</td>\n <td style=\"width: 42.4779%; border-width: 1px;\">Tellus est malesuada </td>\n </tr>\n <tr>\n <td style=\"width: 12.9794%; border-width: 1px;\"><strong>Day 2</strong></td>\n <td style=\"width: 44.5428%; border-width: 1px;\">UNESCO-listed Nærøyfjord and Voss village</td>\n <td style=\"width: 42.4779%; border-width: 1px;\">Vivamus pretium ornare est</td>\n </tr>\n <tr>\n <td style=\"width: 12.9794%; border-width: 1px;\"><strong>Day 3</strong></td>\n <td style=\"width: 44.5428%; border-width: 1px;\">Leaving Voss</td>\n <td style=\"width: 42.4779%; border-width: 1px;\">Amet, consectetuer adipiscing</td>\n </tr>\n </tbody>\n </table>\n <h2>Where to book your travel</h2>\n <ol>\n <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>\n <li>Aliquam tincidunt mauris eu risus.</li>\n </ol>\n <blockquote>\n <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>\n </blockquote>\n <h3>Staying healthy</h3>\n <ul>\n <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>\n <li>Aliquam tincidunt mauris eu risus.</li>\n </ul>\n <p><em>Featuring <a href=\"https://en.wikipedia.org/wiki/Norway\">content from Wikipedia</a></em></p>\n </textarea>\n</body>\n</html>Part 2b
Creativity
With the consistency and connection sorted out between the CMS editor and the front end design, it’s time to introduce some useful features for self-expression. Configuring the following plugins allows for easier editing of images, adding video, and including other third party content that’s needed to get a point across.
The Link and Media plugins must be enabled to ensure all these plugins and options work:
Boost creativity with these plugins
Image_caption
Link
Enhanced Image Editing
Media
Enhanced Media Embed
Page Embed
a. Image_caption
What image_caption does
When enabled, the Image Caption option unlocks the choice to add a caption to further explain an image. When checking the “Caption” checkbox, TinyMCE adds a figcaption element to the image, and places the caption content into the caption.
Why would you need to optimize it?
Context is useful to have, and the plugin allows users to provide more information about the images they select for their content. These can also provide some additional information for accessibility requirements.
How to set it up
Add the image_caption to the TinyMCE configuration:
<script>\n tinymce.init({\n selector: \"textarea\",\n plugins: \"a11ychecker advcode advlist advtable anchor autocorrect autolink autosave editimage fullscreen image link linkchecker lists media mediaembed pageembed powerpaste searchreplace table template tinymcespellchecker typography visualblocks wordcount\",\n toolbar: \"undo redo | styles | bold italic underline strikethrough | align | table link image media pageembed | bullist numlist outdent indent | spellcheckdialog a11ycheck typography code | fullscreen\",\n height: 540,\n …//content skipped for brevity\n image_caption: ,\nSet the value to “true”
image_caption: true, Save the change
b. Enhanced Image Editing
What Enhanced Image Editing does
The Enhanced image Editing plugin adds a toolbar to any image content in the editor text area. The toolbar unlocks editing options such as rotate, mirror, and crop when selecting an image.
Why would you need to optimize it?
In cases where you’re loading images from another domain, or Cross-Origin Resource Sharing (CORS) needs to be enabled, you may need to set the options editimage_cors_hosts and editimage_credentials_hosts to “true”.
How to set it up
Place an image into the text area, and click on the image.
Note the toolbar options available when the image is clicked:
![](\"img-cmsrichtexteditor-enhancedimage-1-2023050208585272.gif\")
c. Enhanced Media Embed
What Enhanced Media Embed does
The Enhanced Media Embed plugin enables content writers to quickly load up a content preview from hundreds of text, audio, and video sources (Youtube, Twitter, and Spotify for instance) by adding a link to the content within the rich text editor. The plugin can automatically convert the URL into embedded media..
Why would you need to optimize it?
With the plugin added to the TinyMCE init script plugins list, media sources pasted into the textarea automatically render into embedded media.
How to set it up
You can optionally set the maximum width of embedded media content, but importantly, make sure to add the following CSS to your CMS design sheets to make sure the embeds render correctly:
Self Hosting with Enhanced Media Embed?
You’ll need to configure some server side
Components such as a service URL to get started.
Add the following CSS to your CMS style sheet:
.ephox-summary-card {\n border: 1px solid #AAA;\n box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);\n padding: 10px;\n overflow: hidden;\n margin-bottom: 1em;\n}\n\n.ephox-summary-card a {\n text-decoration: none;\n color: inherit;\n}\n\n.ephox-summary-card a:visited {\n color: inherit;\n}\n\n.ephox-summary-card-title {\n font-size: 1.2em;\n display: block;\n}\n\n.ephox-summary-card-author {\n color: #999;\n display: block;\n margin-top: 0.5em;\n}\n\n.ephox-summary-card-website {\n color: #999;\n display: block;\n margin-top: 0.5em;\n}\n\n.ephox-summary-card-thumbnail {\n max-width: 180px;\n max-height: 180px;\n margin-left: 2em;\n float: right;\n}\n\n.ephox-summary-card-description {\n margin-top: 0.5em;\n display: block;\n}\n
Test out embedding content in the editor:
d. Page embed
What Page Embed does
The Page Embed plugin allows writers to add another web page into the CMS. The web page is captured and displayed inside an iframe element within the CMS editor.
Why would you need to optimize it?
Content that allows embedding of other pages make use of iframe HTML elements. Often, a creative solution to building new content from existing, verified web pages is to embed the page directly into the article.
How to set it up
The plugin does not require any additional configuration, however you can adjust the size of the embedded content by making use of the TinyMCE Page Embed options.
Outcome – a CMS editor that allows content creativity
With these plugins in place, the CMS editor now has the capacity to allow users to use their creativity when creating content. Here’s the complete demo up to this step:
And here is code for the tutorial up to this step:
\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>CMS Rich Text Editor</title>\n <script src=\"https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js\" referrerpolicy=\"origin\"></script>\n <script>\n tinymce.init({\n selector: \"textarea\",\n plugins: \"a11ychecker advcode advlist advtable anchor autocorrect autolink autosave editimage fullscreen image link linkchecker lists media mediaembed pageembed powerpaste searchreplace table template tinymcespellchecker typography visualblocks wordcount\",\n toolbar: \"undo redo | styles | bold italic underline strikethrough | align | table link image media pageembed | bullist numlist outdent indent | spellcheckdialog a11ycheck typography code | fullscreen\",\n height: 540,\n style_formats: [\n { title: \"Heading 1\", block: \"h1\" },\n { title: \"Heading 2\", block: \"h2\" },\n { title: \"Paragraph\", block: \"p\" },\n { title: \"Blockquote\", block: \"blockquote\" },\n { title: \"Image formats\" },\n { title: \"Medium\", selector: \"img\", classes: \"medium\" }\n ],\n font_css: [ \"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;1,400&display=swap\" ],\n content_style: `\n body {\n font-family: 'Roboto', serif;\n color: #222;\n }\n img {\n height: auto;\n margin: auto;\n padding: 10px;\n display: block;\n }\n img.medium {\n max-width: 25%;\n }\n a { \n color:#116B59;\n }\n .related-content {\n padding:0 10px;\n margin: 0 0 15px 15px;\n background:#eee;\n width:200px;\n float:right;\n }\n `,\n valid_classes: {\n img: \"medium\",\n div: \"related-content\"\n },\n image_caption: true, \n });\n </script>\n</head>\n<body>\n <textarea>\n <h1>Visiting Norway</h1>\n <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>\n <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>\n <p>Listen to Norway's royal anthem on Spotify:</p>\n <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>\n <h2>Geography</h2>\n <div class=\"related-content\">\n <h3>Related content</h3>\n <p><strong>Lorem ipsum</strong> dolor sit amet...</p>\n </div>\n <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>\n <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>\n <h2>Norway 3-day itinerary</h2>\n <p>If you're in Norway for a long weekend or just a short trip, here's our recommendation:</p>\n <table style=\"border-collapse: collapse; border-width: 1px;\" border=\"1\">\n <thead>\n <tr>\n <td style=\"width: 12.9794%; border-width: 1px;\"> </td>\n <td style=\"width: 44.5428%; border-width: 1px;\"><strong>Location</strong></td>\n <td style=\"width: 42.4779%; border-width: 1px;\"><strong>Activity</strong></td>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td style=\"width: 12.9794%; border-width: 1px;\"><strong>Day 1</strong></td>\n <td style=\"width: 44.5428%; border-width: 1px;\">Flåm Mountain Railway and Flåm village</td>\n <td style=\"width: 42.4779%; border-width: 1px;\">Tellus est malesuada </td>\n </tr>\n <tr>\n <td style=\"width: 12.9794%; border-width: 1px;\"><strong>Day 2</strong></td>\n <td style=\"width: 44.5428%; border-width: 1px;\">UNESCO-listed Nærøyfjord and Voss village</td>\n <td style=\"width: 42.4779%; border-width: 1px;\">Vivamus pretium ornare est</td>\n </tr>\n <tr>\n <td style=\"width: 12.9794%; border-width: 1px;\"><strong>Day 3</strong></td>\n <td style=\"width: 44.5428%; border-width: 1px;\">Leaving Voss</td>\n <td style=\"width: 42.4779%; border-width: 1px;\">Amet, consectetuer adipiscing</td>\n </tr>\n </tbody>\n </table>\n <h2>Where to book your travel</h2>\n <ol>\n <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>\n <li>Aliquam tincidunt mauris eu risus.</li>\n </ol>\n <blockquote>\n <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>\n </blockquote>\n <h3>Staying healthy</h3>\n <ul>\n <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>\n <li>Aliquam tincidunt mauris eu risus.</li>\n </ul>\n <p><em>Featuring <a href=\"https://en.wikipedia.org/wiki/Norway\">content from Wikipedia</a></em></p>\n </textarea>\n</body>\n</html>Part 2C
Productivity
For financial decision makers, one of the key factors that influences them is increased productivity. It’s a hot topic because as budgets tighten, a CMS that aids and delivers the most productivity, is the one that’s favored. Building productivity drivers into your CMS editor could be the deciding factor that gets the check signed, and adoption of your CMS.
TinyMCE comes with an entire set of plugins that unlock productivity and help to drive faster content creation.
Essential plugins for productivity
Advanced Code Editor
Search and Replace
Advanced Tables
Templates
Autolink
Table
PowerPaste
Anchor
Visual Blocks
Wordcount
Advanced Lists
a. Advanced Code Editor
What Advanced Code Editor does
For power users, web administrators, or customers with knowledge of HTML, the Advanced Code Editor plugin lets them quickly fine-tune the HTML that underlies the text and other content they’re building in the CMS editor.
Why would you need to optimize it?
To further enhance the productivity abilities of the plugin, set up the advanced code inline option to true so the code editor appears alongside the CMS editor rather than covering the content in a window that opens when editing the source code.
How to set it up
Include the advcode_inline option in the TinyMCE init script:
<script>\n tinymce.init({\n selector: \"textarea\",\n plugins: \"a11ychecker advcode advlist advtable anchor autocorrect autolink autosave editimage fullscreen image link linkchecker lists media mediaembed pageembed powerpaste searchreplace table template tinymcespellchecker typography visualblocks wordcount\",\n toolbar: \"undo redo | styles | bold italic underline strikethrough | align | table link image media pageembed | bullist numlist outdent indent | spellcheckdialog a11ycheck typography code | fullscreen\",\n height: 540,\n //Content skipped for brevity\n advcode_inline: , \n });\n</script>Set the inline option to ‘true’:
<script>\n tinymce.init({\n selector: \"textarea\",\n plugins: \"a11ychecker advcode advlist advtable anchor autocorrect autolink autosave editimage fullscreen image link linkchecker lists media mediaembed pageembed powerpaste searchreplace table template tinymcespellchecker typography visualblocks wordcount\",\n toolbar: \"undo redo | styles | bold italic underline strikethrough | align | table link image media pageembed | bullist numlist outdent indent | spellcheckdialog a11ycheck typography code | fullscreen\",\n height: 540,\n //Content skipped for brevity\n advcode_inline: true, \n });\n</script>\nSave the change
b. Templates plugin
What Templates does
The Templates plugin allows users to insert a predefined page or content into the CMS editor.
Note: The TinyMCE 6.4 release introduced the Advanced Templates plugin, which allows you to save a template from a selection in the text editor, edit the template, and manage it. Configuring this plugin requires a database connection as well as other options set up, and is beyond this tutorial’s scope. You can find out more about the plugin in the Advanced Templates documentation.
Why would you need to optimize it?
One of the key productivity enhancements for a CMS editor is including the ability to hold on to content that’s intended for reuse, and giving customers the ability to apply that content again and again.
How to set it up
For the demo, the test content the Templates plugin is a “related content” block. Customers can populate this template, and reuse it as they need.
Add the templates option to the TinyMCE init script along with an empty array. The actual template content will be configured in the array:
tinymce.init({\n selector: \"textarea\",\n plugins: \"a11ychecker advcode advlist advtable anchor autocorrect autolink autosave editimage fullscreen image link linkchecker lists media mediaembed pageembed powerpaste searchreplace table template tinymcespellchecker typography visualblocks wordcount\",\n toolbar: \"undo redo | styles | bold italic underline strikethrough | align | table link image media pageembed | bullist numlist outdent indent | spellcheckdialog a11ycheck typography code | fullscreen\",\n height: 540,\n //Content skipped for brevity\n advcode_inline: true, \n templates: []\n });\nSet up three keys in the array: \"title\", \"description\", and \"content\":
templates: [\n {\n title: ,\n description: ,\n content: \n }\n ],\nConfigure the values that make up the \"Related Content\" template:
templates: [\n {\n title: \"Related content\",\n description: \"This template inserts a related content block\",\n content: '<div class=\"related-content\"><h3>Related content</h3><p><strong>Lorem ipsum</strong> dolor sit amet...</p></div>'\n }\n ],\nSave the changes, and try out the new template:
![](\"img-cmsrichtexteditor-templatesteps-3-2023050208585279.gif\")
Preconfigured Plugins
The following plugins are already included in the plugin list, and do not need any further configuration, but add useful productivity support.
c. Wordcount
What Wordcount does
The Wordcount plugin displays the number of words detected within the CMS editor.
Why include this plugin?
It provides a method for the writer to quickly check the length of their content and represents a valuable feature for taking control of content, and limiting word length if needed.
d. Search and Replace
What Search and Replace does
The Search and Replace plugin speeds up searching for specific content within the CMS editor.
Why include this plugin?
Speed of search is an important productivity feature – fast search and replace introduces the ability to batch contents edits.
e. Autolink
What Autolink does
When a URL is pasted into the CMS rich text area, the Autolink plugin automatically converts the URL into a clear link.
Why include this plugin?
The plugin saves writers time, because they don’t have to create a manually link when they add URLS into their content.
f. Anchor
What Anchor does
The Anchor plugin allows users to add anchors, more commonly known as the <a> element in HTML, into their content.
Why include this plugin?
Creating an anchor quickly allows content designers to include links to key points in their content at speed, without having to adjust HTML tags in depth to make a single link.
g. Advanced List
What Advanced List does
The Advanced List plugin provides advanced options for improved styling of bulleted lists and number lists added to the CMS editor.
Why include this plugin?
The plugin introduces alternative styling for lists, which can be configured rapidly, and saves customers time when changing the list appearance.
h. Advanced Tables
What Advanced Tables does
The Advanced Tables plugin allows for significant table organization options, including sorting and changing the order of content within the table.
Why include this plugin?
Sorting tabular information doesn’t have to take time, or another component. The CMS editor allows you to organize and sort table data, when this plugin is active.
i. Visual blocks
What Visual Blocks does
The Visual Blocks plugin, when activated, shows the HTML element boundaries inside the CMS rich text editor.
Why include this plugin?
The plugin speeds up debugging and layout checking – showing a quick, visual summary of what content is nested within different HTML elements.
j. PowerPaste
What PowerPaste does
The PowerPaste plugin delivers 99.9% accurate and clean copy-paste from software such as MS Word, Excel, and Google Docs.
Why include this plugin?
Content pasted into the CMS editor can carry hidden style and other content from other writing apps (MS Word, Excel, Google Docs). The Powerpaste plugin cleans up the unnecessary styling, and provides 99.9% accurate copy and pasted content.
Outcome – a CMS editor with creativity plugins configured
With these plugin sadded to the TinyMCE init script, the final outcome is a CMS editor that vastly improves your customers productivity. Web content creators can build, design, and debug their content at a faster pace, and with more quality.
The following demo shows the productivity content working in the editor up to this point in the tutorial:
And here is code created up to this point:
\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>CMS Rich Text Editor</title>\n <script src=\"https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/6/tinymce.min.js\" referrerpolicy=\"origin\"></script>\n <script>\n tinymce.init({\n selector: \"textarea\",\n plugins: \"a11ychecker advcode advlist advtable anchor autocorrect autolink autosave editimage fullscreen image link linkchecker lists media mediaembed pageembed powerpaste searchreplace table template tinymcespellchecker typography visualblocks wordcount\",\n toolbar: \"undo redo | styles | bold italic underline strikethrough | align | table link image media pageembed | bullist numlist outdent indent | spellcheckdialog a11ycheck typography code | fullscreen\",\n height: 540,\n style_formats: [\n { title: \"Heading 1\", block: \"h1\" },\n { title: \"Heading 2\", block: \"h2\" },\n { title: \"Paragraph\", block: \"p\" },\n { title: \"Blockquote\", block: \"blockquote\" },\n { title: \"Image formats\" },\n { title: \"Medium\", selector: \"img\", classes: \"medium\" }\n ],\n font_css: [ \"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;1,400&display=swap\" ],\n content_style: `\n body {\n font-family: 'Roboto', serif;\n color: #222;\n }\n img {\n height: auto;\n margin: auto;\n padding: 10px;\n display: block;\n }\n img.medium {\n max-width: 25%;\n }\n a { \n color:#116B59;\n }\n .related-content {\n padding:0 10px;\n margin: 0 0 15px 15px;\n background:#eee;\n width:200px;\n float:right;\n }\n `,\n valid_classes: {\n img: \"medium\",\n div: \"related-content\"\n },\n image_caption: true,\n advcode_inline: true,\n templates: [\n {\n title: \"Related content\",\n description: \"This template inserts a related content block\",\n content: '<div class=\"related-content\"><h3>Related content</h3><p><strong>Lorem ipsum</strong> dolor sit amet...</p></div>'\n }\n ],\n });\n </script>\n</head>\n<body>\n <textarea>\n <h1>Visiting Norway</h1>\n <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>\n <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>\n <p>Listen to Norway's royal anthem on Spotify:</p>\n <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>\n <h2>Geography</h2>\n <div class=\"related-content\">\n <h3>Related content</h3>\n <p><strong>Lorem ipsum</strong> dolor sit amet...</p>\n </div>\n <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>\n <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>\n <h2>Norway 3-day itinerary</h2>\n <p>If you're in Norway for a long weekend or just a short trip, here's our recommendation:</p>\n <table style=\"border-collapse: collapse; border-width: 1px;\" border=\"1\">\n <thead>\n <tr>\n <td style=\"width: 12.9794%; border-width: 1px;\"> </td>\n <td style=\"width: 44.5428%; border-width: 1px;\"><strong>Location</strong></td>\n <td style=\"width: 42.4779%; border-width: 1px;\"><strong>Activity</strong></td>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td style=\"width: 12.9794%; border-width: 1px;\"><strong>Day 1</strong></td>\n <td style=\"width: 44.5428%; border-width: 1px;\">Flåm Mountain Railway and Flåm village</td>\n <td style=\"width: 42.4779%; border-width: 1px;\">Tellus est malesuada </td>\n </tr>\n <tr>\n <td style=\"width: 12.9794%; border-width: 1px;\"><strong>Day 2</strong></td>\n <td style=\"width: 44.5428%; border-width: 1px;\">UNESCO-listed Nærøyfjord and Voss village</td>\n <td style=\"width: 42.4779%; border-width: 1px;\">Vivamus pretium ornare est</td>\n </tr>\n <tr>\n <td style=\"width: 12.9794%; border-width: 1px;\"><strong>Day 3</strong></td>\n <td style=\"width: 44.5428%; border-width: 1px;\">Leaving Voss</td>\n <td style=\"width: 42.4779%; border-width: 1px;\">Amet, consectetuer adipiscing</td>\n </tr>\n </tbody>\n </table>\n <h2>Where to book your travel</h2>\n <ol>\n <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>\n <li>Aliquam tincidunt mauris eu risus.</li>\n </ol>\n <blockquote>\n <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>\n </blockquote>\n <h3>Staying healthy</h3>\n <ul>\n <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>\n <li>Aliquam tincidunt mauris eu risus.</li>\n </ul>\n <p><em>Featuring <a href=\"https://en.wikipedia.org/wiki/Norway\">content from Wikipedia</a></em></p>\n </textarea>\n</body>\n</html>Part 2d
Compliance
Having accessibility compliant website content is a requirement. Not an option. In the US, The Americans with Disabilities Act legislates that companies can be fined up to $150,000 per instance of non-compliance. Therefore the ability to easily create accessible content is now a major deciding factor when customers are evaluating a CMS.
The good news: with the right plugins, it’s fairly easy for web developers to ensure their website content provides accessible content according to the WCAG 2.1 Standards. The TinyMCE Accessibility plugin in this CMS editor helps to ensure your content is compliant.
In this final section, the tutorial explains other compliance options and how to configure them, ensuring your CMS helps customers avoid any fines and embarrassment.
Essential plugins for compliance
Accessibility Checker
Linkchecker
Advanced Typography
Spell Checker Pro
Spelling Autocorrect
a. Accessibility Checker
What Accessibility Checker does
The Accessibility Checker plugin automatically checks content in the CMS rich text editor, and provides a report flagging any violations of the WCAG standards. It provides solutions to the flagged problems.
Why would you need to optimize it?
For a larger organization, the Accessibility Checker report provided by the plugin can help customers to reach compliance with the Content quickly.
How to set it up
Include the “a11checker_level” option in the TinyMCE init script:
tinymce.init({\n selector: \"textarea\",\n plugins: \"a11ychecker advcode advlist advtable anchor autocorrect autolink autosave editimage fullscreen image link linkchecker lists media mediaembed pageembed powerpaste searchreplace table template tinymcespellchecker typography visualblocks wordcount\",\n toolbar: \"undo redo | styles | bold italic underline strikethrough | align | table link image media pageembed | bullist numlist outdent indent | spellcheckdialog a11ycheck typography code | fullscreen\",\n height: 540,\n //Content not included for brevity\n a11ychecker_level: \" \",\nSet the accessibility level to “aaa”, which signifies the level of compliance (drawn from WCAG Conformance Levels) to check for when the plugin checks content. The list of Accessibility rules show what is included when checking for different levels of compliance:
tinymce.init({\n selector: \"textarea\",\n plugins: \"a11ychecker advcode advlist advtable anchor autocorrect autolink autosave editimage fullscreen image link linkchecker lists media mediaembed pageembed powerpaste searchreplace table template tinymcespellchecker typography visualblocks wordcount\",\n toolbar: \"undo redo | styles | bold italic underline strikethrough | align | table link image media pageembed | bullist numlist outdent indent | spellcheckdialog a11ycheck typography code | fullscreen\",\n height: 540,\n //Content not included for brevity\n a11ychecker_level: \"aaa\",\nSave the change.
b. Advanced Typography
What Advanced Typography does
The Advanced Typography plugin provides compliance support by replacing characters in the content with professional typesetting equivalents. For example, the plugin can automatically change an open-hyphen into an em-dash, or shift a teardrop apostrophe with opening and closing quotation marks.
Why would you need to optimize it?
The plugin provides immediate compliance and content improvements, giving a professional appearance for writers assembling content.
How to set it up
Specify the language for the CMS editor by including the “typography_langs” option:
tinymce.init({\n selector: \"textarea\",\n plugins: \"a11ychecker advcode advlist advtable anchor autocorrect autolink autosave editimage fullscreen image link linkchecker lists media mediaembed pageembed powerpaste searchreplace table template tinymcespellchecker typography visualblocks wordcount\",\n toolbar: \"undo redo | styles | bold italic underline strikethrough | align | table link image media pageembed | bullist numlist outdent indent | spellcheckdialog a11ycheck typography code | fullscreen\",\n height: 540,\n //Content not included for brevity\n a11ychecker_level: \"aaa\",\n typography_langs: [ ],\nSet the default language option:
typography_langs: [ ],\n typography_default_lang: [ ]\n
Select the default language for the plugin. The demo makes use of US English:
typography_langs: [\"en-US\"],\n typography_default_lang: [\"en-US\"]\n
Save the changes.
Preconfigured Plugins
The following plugins are already included in the plugin list, and do not need any further configuration, but provide important support for compliance.
c. Spell Checker Pro
What Spell Checker Pro does
The Spell Checker Pro plugin automatically detects spelling errors in the language the customer chooses. It flags any spelling errors so writers can correct them.
Why include this plugin?
The plugin is useful for situations such as multilingual websites that support multiple geographic regions. It can simultaneously check 38 languages.
d. Autocorrect
What Autocorrect does
The Autocorrect plugin actively searches for common typographical errors, and automatically corrects them as customers type their content.
Why include this plugin?
This plugin helps speed up compliance efforts by providing a safety net for writers, catching errors such as changing “teh” to “the” during the writing process.
e. Linkchecker
What is the Linkchecker plugin?
The Linkchecker plugin automatically checks any URLs added to the CMS editor, and flags them if the link isn’t working.
Why include this plugin?
Broken links can undermine the quality of content created in your CMS editor. Especially considering how common dead links can be, helping writers to create compliant content.
Almost all the links are dead
Did you know that at least 66.5% of links to sites created in the last 9 years are dead?
The link checker plugin helps companies ensure their vital links to external sources work.
Outcome – a CMS editor with all plugins configured
With the compliance plugins integrated, the resulting final CMS editor provides an intuitive UI, and guardrails to make sure the WYSIWYG aligns with the front end style. For customers, plugins for productivity and compliance help them create their content to a professional standard.
The final version of the CMS editor with all plugins integrated is available in the following codepen:
And here is the complete tutorial code:
\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>CMS Rich Text Editor</title>\n <script src=\"https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/6/tinymce.min.js\" referrerpolicy=\"origin\"></script>\n <script>\n tinymce.init({\n selector: \"textarea\",\n plugins: \"a11ychecker advcode advlist advtable anchor autocorrect autolink autosave editimage fullscreen image link linkchecker lists media mediaembed pageembed powerpaste searchreplace table template tinymcespellchecker typography visualblocks wordcount\",\n toolbar: \"undo redo | styles | bold italic underline strikethrough | align | table link image media pageembed | bullist numlist outdent indent | spellcheckdialog a11ycheck typography code | fullscreen\",\n height: 540,\n style_formats: [\n { title: \"Heading 1\", block: \"h1\" },\n { title: \"Heading 2\", block: \"h2\" },\n { title: \"Paragraph\", block: \"p\" },\n { title: \"Blockquote\", block: \"blockquote\" },\n { title: \"Image formats\" },\n { title: \"Medium\", selector: \"img\", classes: \"medium\" }\n ],\n font_css: [ \"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;1,400&display=swap\" ],\n content_style: `\n body {\n font-family: 'Roboto', serif;\n color: #222;\n }\n img {\n height: auto;\n margin: auto;\n padding: 10px;\n display: block;\n }\n img.medium {\n max-width: 25%;\n }\n a { \n color:#116B59;\n }\n .related-content {\n padding:0 10px;\n margin: 0 0 15px 15px;\n background:#eee;\n width:200px;\n float:right;\n }\n `,\n valid_classes: {\n img: \"medium\",\n div: \"related-content\"\n },\n image_caption: true,\n advcode_inline: true,\n templates: [\n {\n title: \"Related content\",\n description: \"This template inserts a related content block\",\n content: '<div class=\"related-content\"><h3>Related content</h3><p><strong>Lorem ipsum</strong> dolor sit amet...</p></div>'\n }\n ],\n a11ychecker_level: \"aaa\",\n typography_langs: [\"en-US\"],\n typography_default_lang: [\"en-US\"]\n });\n </script>\n</head>\n<body>\n <textarea>\n <h1>Visiting Norway</h1>\n <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>\n <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>\n <p>Listen to Norway's royal anthem on Spotify:</p>\n <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>\n <h2>Geography</h2>\n <div class=\"related-content\">\n <h3>Related content</h3>\n <p><strong>Lorem ipsum</strong> dolor sit amet...</p>\n </div>\n <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>\n <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>\n <h2>Norway 3-day itinerary</h2>\n <p>If you're in Norway for a long weekend or just a short trip, here's our recommendation:</p>\n <table style=\"border-collapse: collapse; border-width: 1px;\" border=\"1\">\n <thead>\n <tr>\n <td style=\"width: 12.9794%; border-width: 1px;\"> </td>\n <td style=\"width: 44.5428%; border-width: 1px;\"><strong>Location</strong></td>\n <td style=\"width: 42.4779%; border-width: 1px;\"><strong>Activity</strong></td>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td style=\"width: 12.9794%; border-width: 1px;\"><strong>Day 1</strong></td>\n <td style=\"width: 44.5428%; border-width: 1px;\">Flåm Mountain Railway and Flåm village</td>\n <td style=\"width: 42.4779%; border-width: 1px;\">Tellus est malesuada </td>\n </tr>\n <tr>\n <td style=\"width: 12.9794%; border-width: 1px;\"><strong>Day 2</strong></td>\n <td style=\"width: 44.5428%; border-width: 1px;\">UNESCO-listed Nærøyfjord and Voss village</td>\n <td style=\"width: 42.4779%; border-width: 1px;\">Vivamus pretium ornare est</td>\n </tr>\n <tr>\n <td style=\"width: 12.9794%; border-width: 1px;\"><strong>Day 3</strong></td>\n <td style=\"width: 44.5428%; border-width: 1px;\">Leaving Voss</td>\n <td style=\"width: 42.4779%; border-width: 1px;\">Amet, consectetuer adipiscing</td>\n </tr>\n </tbody>\n </table>\n <h2>Where to book your travel</h2>\n <ol>\n <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>\n <li>Aliquam tincidunt mauris eu risus.</li>\n </ol>\n <blockquote>\n <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>\n </blockquote>\n <h3>Staying healthy</h3>\n <ul>\n <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>\n <li>Aliquam tincidunt mauris eu risus.</li>\n </ul>\n <p><em>Featuring <a href=\"https://en.wikipedia.org/wiki/Norway\">content from Wikipedia</a></em></p>\n </textarea>\n</body>\n</html>A reliable CMS editor ready to integrate
The CMS editor created through this tutorial is ready to integrate directly into your CMS, whether it’s a new project, or an existing app you’re looking to upgrade. With all the solid foundation and useful additions included throughout the tutorial, your new CMS editor delights your users, scales in size as needed, and gives the tools they need to create captivating web content.
If you’re looking for more information on CMSs and TinyMCE, read more on the CMS solutions page. If you have a question on how TinyMCE can help your CMS, contact us.
Getting TinyMCE content
For connections to the CMS database, make use of the TinyMCE getContent API method, which is explained in this article: How to get and set content in TinyMCE
Joe Robinson
Dev Advocate | Tech Writer at Tiny
Technical and creative writer, editor, and a TinyMCE advocate. An enthusiast for teamwork, open source software projects, and baking. Can often be found puzzling over obscure history, cryptic words, and lucid writing.
Di Mace
Marketing Communications Manager
Messaging strategist and copywriter whose passion lies in working with brands like Tiny, that have deep-seated values and embrace the power of their story. She gets a kick out of solving problems, loves learning new things and making stuff, every day. When she’s not thinking through clever copy lines or clarifying value propositions, she’s knitting amazing socks for everyone she knows.
John Rau
Marketing Manager at Tiny
A former developer, John works on the Marketing team at Tiny. When he's not spreading the word about TinyMCE, he enjoys taking things apart and *trying* to put them back together (including his house and anything else that looks interesting).