TinyMCE is loaded from the cloud over 35 million times a day, which, if you’re a geography buff, is roughly the equivalent of everyone in Canada using TinyMCE on a daily basis.
That’s a lot of people trusting TinyMCE for their rich text editing, and it’s a responsibility we don’t take lightly.
With TinyMCE 6.3, we’re introducing enhancements to help these millions of creators to boost their productivity and improve the quality of their content, all within your app.
Read on to discover these enhancements and how they can help you unlock new editing experiences for your users.
On April 20, 2023, TinyMCE 5 reaches end of support. Beyond this date, bug fixes and features will not be introduced into TinyMCE 5, and as time goes on, our support team will have limited resources available to help troubleshoot issues with TinyMCE 5.
If you’re running TinyMCE 5, we recommend you start the upgrade process to TinyMCE 6.
TinyMCE 6.3 release highlights
Here’s what to expect when you upgrade to TinyMCE 6.3:
- New Advanced Typography plugin - Improve content readability by applying 25+ commonly used typographic conventions (spacing, punctuation, math signs, symbols and more)
- New Inline CSS plugin - Generate CSS-inlined HTML for email and other self-contained uses, via one simple API call
- Advanced Code Editor “inline view” - Introducing an option to load the code editor inside the boundaries of the editor rather than as a modal popup
- Accessibility Checker enhancements - Improvements to the UI, as well as an update to the ALT text rule
- Color Swatch improvements - Specify custom foreground/background colors and display a checkmark on the currently selected color
- And 17 bug fixes
And here's the transcript:
New Advanced Typography plugin
Writing great content takes time, and brainstorming ideas, crafting a narrative, and pulling it all together is only half the battle. The other half is making sure content is consistent and readable. Writers, especially in the publishing industry, are under constant pressure to follow typographic conventions which ensure this consistency and readability.
Some of these conventions you may know, and others you may be less familiar with:
- Spacing (e.g. removing extra spaces or adding non-breaking spaces where necessary)
- Punctuation (e.g. proper placement of quotation marks)
- Math signs/fractions (e.g. replacing 1/2 -> ½)
- Symbols (e.g. replacing (c) with ©)
With the click of a button, Advanced Typography instantly applies 25+ typographic conventions to improve the readability, consistency and quality of your content. While the plugin was inspired by the publishing industry, these rules can be applied by any content creator regardless of publishing rule knowledge.
Advanced Typography can be used across almost any use case or industry, instantly leveling-up the quality and presentation of your content.
How Advanced Typography works
All you have to do is add the Advanced Typography plugin to your config and the button to the toolbar.
From there, your users will be able to apply the rules to their content with the click of a button. If they only want to apply the rules to part of their content, all they have to do is select the target content and run Advanced Typography on the selection.
For even more control, you can specify the exact rules you want applied using the typography_rules option. The full list is available on the typograf GitHub repo.
typography_rules: [ 'common/punctuation/quote', 'en-US/dash/main', 'common/nbsp/afterParagraphMark', 'common/nbsp/afterSectionMark', 'common/nbsp/afterShortWord', 'common/nbsp/beforeShortLastNumber', 'common/nbsp/beforeShortLastWord', 'common/nbsp/dpi', 'common/punctuation/apostrophe', 'common/space/delBeforePunctuation', 'common/space/afterComma', 'common/space/afterColon', 'common/number/mathSigns', 'common/number/times', 'common/number/fraction', 'common/symbols/arrow', 'common/symbols/cf', 'common/symbols/copy', 'common/punctuation/delDoublePunctuation', 'common/punctuation/hellip' ],
You can also specify the languages you want available to users and the default language using typography_langs and typography_default_lang:
typography_default_lang: 'en-US', typography_langs: [ 'en-US', 'es', 'de' ],
If you want Advanced Typography to ignore content within certain elements, for example if you don’t want it to modify text within a blockquote, you can use the typography_ignore option:
Key benefits of Advanced Typography:
- Publisher-grade typographic conventions in your content. Your users don’t have to have an English degree to create impressive content. Advanced Typography, combined with Spelling Autocorrect and Spell Checker Pro greatly increase the quality of content without needing to know the ins and outs of language.
- Accelerate content production. By automating the manual process of looking up and applying typographic conventions, you enable users to produce better quality content, faster.
- You’re in control. Specify the typographic rules that apply to your business, down to the very detail. Advanced Typography is also available in over 27 languages, with the ability to run the plugin on different parts of users’ content in different languages.
Advanced Typography is available in the TinyMCE Professional plan and above.
New Inline CSS plugin
If you’ve ever tried to send email, either from your own app or through an Email Marketing tool, you’re all too familiar with the challenge of getting emails to render consistently across clients. It’s a constant battle to get the layout and CSS right, and then testing your email over and over.
One of the biggest nuances of email is that your CSS needs to be inlined, as opposed to being included as an external stylesheet or in the head of the HTML.
Historically, developers would take email content from TinyMCE and then inline it using their own homemade solution, or by using a third party library. Both solutions add another step to the email toolchain, and give you one more thing to troubleshoot and maintain.
TinyMCE’s new Inline CSS plugin helps alleviate this pain for developers sending email through their apps.
With one simple API call, you can now get a CSS-inlined HTML output of the editor contents, with all external and embedded styles combined into inlined CSS.
How Inline CSS works
First, add the Inline CSS plugin to your configuration.
tinymce.activeEditor.plugins.inlinecss.getContent(), which returns the CSS-inlined HTML, that you can then send to your database or email service.
Key benefits of Inline CSS:
- No more broken or embarrassing emails being sent.
Standards compliant and error free CSS-inlined HTML helps to ensure emails render properly, every time.
- One less step in your email workflow. No more development, maintenance or troubleshooting of a homemade or third party inline CSS solution. The plugin is included as part of TinyMCE and is updated and fixed as needed, like all other TinyMCE plugins.
Tip: Inline CSS works great when combined with TinyMCE’s other email plugins – Merge Tags, Spell Checker Pro and Link Checker – which all work together to help you deliver personalized emails at scale, while reducing the risk of email embarrassments.
Inline CSS is available in the TinyMCE Essential plan and above.
Advanced Code Editor “inline view”
With TinyMCE 6.3, we released an enhancement to Advanced Code Editor, which lets users modify the editor’s underlying HTML code, complete with code formatting, line numbers, code folding and more.
Until now, Advanced Code Editor would open in a modal popup. This suited most use cases, but after hearing from customers and the community, we identified the need for the code editor to open “inline” with the editor.
Now you can specify advcode_inline: true in your config to tell Advanced Code Editor to open inside the boundaries of the editor, so it doesn’t interfere with, or overlay on top of, the rest of your app’s UI.
Advanced Code Editor is available in the TinyMCE Essential plan and above.
Accessibility Checker enhancements
Accessibility Checker helps creators ensure their content is accessible, by checking it against WCAG 2.1 standards. Users often refer to it as a “spell checker for accessibility”. It improves the lives of those living with disabilities, and protects companies from receiving hefty non-compliance fines.
With this release, we’ve introduced two major enhancements to Accessibility Checker:
1. Improvements to the Accessibility Checker UI
We looked hard at Accessibility Checker to see what we could do to make it more accessible, and identified two opportunities which we implemented in TinyMCE 6.3:
- Introducing discrete icons and colors for Error, Warning and Success messages, making them more discernible, especially to the color blind
- More discoverable “info buttons” – the buttons that link to descriptions of accessibility issues and respective suggestions
2. Updating the image “alt text” rule
We added a new rule to show a warning when the alternative text of an image exceeds 100 characters, in line with WCAG 2.1 standards.
Accessibility Checker is available in the TinyMCE Professional plan and above.
Color Swatch enhancements
You now have the ability to specify your own custom color swatch for the text foreground and background colors. In addition, the current color is now pre-selected in the color swatch and highlighted with a checkmark for improved usability.
We hope these enhancements open up new opportunities to better enforce brand guidelines, as well as make life easier for your users.
The color swatch is an open source feature and is available in all TinyMCE versions.
TinyMCE 6.3 Bug fixes
Every day, thousands of developers trust TinyMCE to deliver a consistent and reliable editing experience to millions of users. We take this responsibility seriously.
With every release, we commit a significant percentage of engineering resources to tackle bugs reported by our customers and the TinyMCE community.
TinyMCE 6.3 carries with it 17 bug fixes, which are all described in detail in the Changelog.
How to get TinyMCE 6.3
If you’re already on any version of TinyMCE 6, you can upgrade seamlessly – TinyMCE 6.3 is a minor version without any breaking changes.
If you’re on the TinyMCE Cloud and on the “6” channel, TinyMCE will automatically update to 6.3. If you’re running TinyMCE self-hosted, you just have to update to the latest version.
And if you’re still on TinyMCE 5, now is the time to upgrade. TinyMCE 5 reaches end of support on April 20, 2023.
If you don’t currently have these new plugins available in your TinyMCE plan, contact our customer success team for assistance. You can also sign up for a FREE TinyMCE API key that comes with a free trial of the Premium Plugins for 14 days.
To find out what’s happening in the future for TinyMCE, head to our Public Product Roadmap to see what’s under development, and let the team at Tiny know what's important to you.