Start trial
Plans & PricingContact Us
Log InStart For Free

Type, save, reuse – introducing Advanced Templates in TinyMCE 6.4

April 3rd, 2023

5 min read

TinyMCE 6-4 introducing advanced templates words on a background

Written by

John Rau

Category

World of WYSIWYG

The rich text editing space keeps on evolving – and so does TinyMCE. So what’s included, when and why? Let’s find out.

TinyMCE latest version: 6.4

The latest version of TinyMCE was released on April 5, 2023. This release comes with a number of user- and developer-friendly enhancements, like a new font size toolbar button, improvements to Advanced Code Editor, and 33 bug fixes.

However, by far the most interesting highlight of this release is the introduction of Advanced Templates, an industry-first in rich text editing. Read on to learn more…

Quick Links:

⚠️Important: As of April 20, 2023, TinyMCE 5 reached end of support. Beyond this date, bug fixes and features won’t be introduced into TinyMCE 5, and as time goes on, our support team will have limited resources to help troubleshoot issues with TinyMCE 5.

If you’re running TinyMCE 4 or 5, we recommend you start the upgrade process to TinyMCE 6.

[New] Advanced Templates plugin

How many times a day do you think your users reuse the same content inside your app? Let’s say, like pre-written emails or boilerplate text.

What if you asked them what hacks or workarounds they’re using? They might be a little embarrassed by their answer…

Our research shows there’s a good chance they’re:

  • Writing each piece of content from scratch (terribly inefficient)
  • Copying frequently used content from a Google Doc into your app (prone to errors)
  • …Or completely avoiding that part of their workday because they hate it so much

The problem with these approaches is that they kill productivity, introduce errors, lead to inconsistent content, and perhaps worst of all – make for a miserable user experience.

That’s why we built TinyMCE’s new Advanced Templates plugin.

The new plugin: 

  • Lets you define templates – HTML content snippets – that users can quickly insert into their content, without ever leaving your app.
  • Lets users create their own templates within the editor, so they can add, modify, organize, or remove their most frequently used content.

That’s right – everything happens within your app. No more switching tabs, no more copy-paste errors, and way more consistency across your content.

See it in action:

Advanced Templates running in the browser

This plugin was built with a few use cases in mind, but we’re sure it could be used in far more:

  • Sending canned email replies
  • Adding clauses to contracts
  • Inserting content snippets into web pages
  • Adding reusable learning objects to course content

Any use case where your users insert the same content over and over again, is where Advanced Templates shines.

Getting started

The first step is to add the Advanced Templates plugin to your TinyMCE configuration.

Next, you’ll configure the plugin options to handle things like saving and retrieving templates to and from your data source. This is fairly straightforward for anyone who’s already set up the functionality needed to save TinyMCE content to their database.

Once that’s set up, your users are ready to start creating and reusing their own templates!

Video overview

Transcript:

hey there it's John from Tiny and I'm joined by Frederick Danielson the product manager for TinyMCE and today we're going to talk about what's new in TinyMCE
6.4 by far the biggest feature that we're the most excited to introduce in TinyMCE 6.4 is Advanced templates which lets your users insert organize and create their
own content Snippets in seconds okay let's dive into how it works so what we're looking at here is a compose email or reply to email function within a customer support
ticketing system this is just one of the many use cases Advanced templates can be used in so the user is using this ticketing system are often replying to hundreds of emails per day and rather than writing
their own replies or copying and pasting from a Google Docs full of canned replies we've created Advanced templates to let them choose the replies that
they want customize them and get that email sent in less time with less errors so it's super simple all they have to do when they're replying the email is they
click the insert template button and then they can choose a template they can choose it from categories or they can even search for it so I could search for
this one preview it and insert it super simple and then from there they can customize the content as they need for example for that email now that's not the
most exciting part they can also create their own templates so if I wanted to create some content here I would just create it select it and click the add
template button and then I would type in my template for example choose a category and it's good to go it's now ready to be inserted into the editor from
within the category I put it in now they can also rename move and delete the templates as well as create their own categories so we're really putting a lot
of the power in the user's hands so that they can really sort of improve their own workflows as well as you as your an app developer providing them with the
templates that that they need now email is not the only place that we're really excited to see this plugin used if you think about document building use cases
where people are inserting boilerplate content all over their documents or even contracts and proposal Builders where there's predefined Clauses Advanced
templates would be super helpful in those use cases as well Advanced templates is available in TinyMCEE professional and Advanced Code Editor improvements
above okay let's take a look at the next enhancement in TinyMCE 6.4 it's with Advanced code editor which lets your power users developers and anyone who knows
HTML edit the HTML behind the editor contents so with 6.4 we introduced full screen mode for advanced code editor there's a copy code button the user can
toggle into dark mode and they can increase and decrease the font sizes Advanced code editor is available in TinyMCE Essentials and above now the New Font Size
select button last enhancement that we're excited to introduce in 6.4 is the font size picker now your users can increase and decrease the font size and even
enter their own font size just like they're used to in Google Docs of course the font size drop down menu is still there this is just another option to let them
choose their font size okay so that's it for TinyMCE What's next 6.4 Advanced templates Advanced code editor enhancements and font size picker so Frederick
what can people look forward to in the next version of tiny MC so in time MC is 6.5 we will introduce page templates we're a developer like you can insert an
email template or document scaffolding into tinmc and Define what parts of that content is editable and what's not so this will save you a ton of time when
dealing for example marketing email or digital documents and not having to build this complex relationship between your app and time MC with time MC 6.5 you can
just let time MC deal with all that and in future versions of TinyMCE Beyond 6.5 we plan to introduce more proper support for example components and widgets and
improve drag and drop that for example can be used to reorder sections in an email or document so everyone interested in emails and documents can expect a
very exciting 2023 and as usual please head over to our roadmap website at tiny.cloud roadmap and help us shape these new features thanks Frederick and
again if you want to give any of these features a try upgrade to 6.4 and if you're not already on planet head over to tiny.cloud and sign up for a trial
we'll see you next time

Availability 

Advanced Templates is a Premium plugin and it’s available in the TinyMCE Professional plan and above. 

If you’re not on a plan yet, you can sign up for a 14-day FREE trial to test-drive the plugin. Or, if you’re on a custom plan, reach out to your Account Manager to see if you have access.

Improvements to Advanced Code Editor

Did you know that Advanced Code Editor is TinyMCE’s third most popular premium plugin?

Every day, tens of thousands of people rely on it to tweak the HTML behind the content they’re editing. Support teams use it to troubleshoot rogue content, and power users use it to put the final touches on their masterpieces.

In TinyMCE 6.3, we introduced inline mode for Advanced Code Editor – giving you a new way to toggle between code view and WYSIWYG view.

Now, in TinyMCE 6.4, we’re providing an even more dev-friendly code editing experience right within TinyMCE. To do that, we’ve added four new buttons to the toolbar:

  • Fullscreen mode
  • Copy code
  • Dark/light mode
  • Increase/decrease font size

Advanced Code Snippets working with new options

With these new features, power users now have a far more powerful – and familiar – way to modify the underlying HTML without ever leaving your app.

Availability

Advanced Code Editor is a Premium plugin that’s available in the TinyMCE Essentials plan and above. To start using the new features, upgrade to the latest version.

[New] Font Size Input toolbar button

Historically, TinyMCE has given users the option to choose their font size via a dropdown of font sizes, defined by you, the app developer. 

This works great when you want to place strict controls over formatting, for example in a CMS or Email Builder. But what about cases where users are creating free-form content (for example, documents) and you want to offer them more flexibility? 

Now, you can offer a Google-Docs-like font size picker that lets them quickly increase or decrease the font size, or type in their own value.

Just add the fontsizeinput button to the TinyMCE toolbar and you’re all set.

The font size adjustment option now available in the toolbar

Availability

The new Font Size Input button is available in all versions of TinyMCE 6. To start using it, upgrade to the latest version.

TinyMCE 6.4 bug fixes

TinyMCE 6.4 carries 38 bug fixes, which are described in detail in the Changelog.

How to get TinyMCE 6.4 

If you’re already on any version of TinyMCE 6, you can upgrade seamlessly – TinyMCE 6.4 is a minor version without any breaking changes.

If you’re on the TinyMCE Cloud and on the “6” channel, TinyMCE automatically updates to 6.4. Or, if you’re running TinyMCE self-hosted, you just need to update to the latest version.

But if you’re still on TinyMCE 4 or 5, now is the time to upgrade – TinyMCE 5 reaches end of support on April 20, 2023.

If none of these Premium plugins are available in your current TinyMCE plan, contact our Customer Success Team for assistance. You can also sign up for a FREE TinyMCE API key that comes with a 14-day FREE trial of the Premium plugins.

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. 

Learn more about previous TinyMCE versions

 

Tiny ReleasesTinyMCEPlugins
byJohn Rau

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).

Related Articles

  • World of WYSIWYGDec 23rd, 2024

    10 Best Open Source WYSIWYG Editors

Join 100,000+ developers who get regular tips & updates from the Tiny team.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Tiny logo

Stay Connected

SOC2 compliance badge

Products

TinyMCEDriveMoxieManager
© Copyright 2024 Tiny Technologies Inc.

TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.