Grzegorz Wiecheć
Dec 20, 2022
  710
(8 votes)

TinyMCE editor upgrade

I’m happy to announce that, after a quite long time, we finally upgraded the TinyMCE editor. The new EPiServer.CMS.TinyMce package contains integration with latest version of the TinyMCE 6 library.

In this release we haven't added new functionalities, but have focused on the library migration.

Configuring editor

We have not changed the way TinyMCE is configured. We are still using TinyMceConfiguration option:

context.Services.Configure<TinyMceConfiguration>(config =>
{
    // Add content CSS to the default settings.
    config.Default()
        .ContentCss("/static/css/editor.css");

    // Limit the block formats for the MainBody property of an ArticlePage.
    config.For<ArticlePage>(t => t.MainBody)
        .BlockFormats("Paragraph=p;Header 1=h1;Header 2=h2;Header 3=h3");
});

There are no new extension methods added for our integration, but there were significant breaking changes in the TinyMCE library. All custom plugins have to be updated. To do that you should follow the migration guide migration from 4x, migration from 5x and how to migrate from tinymce 4 to tinymce 5. Please note that TinyMCE 5 and TinyMCE 6 API are very similar. Version 6 mainly removed obsolete methods.

In the documentation above you can for example find that some plugins are not free anymore (Image tools, Spellchecker, Table of Contents) and some were move to the core package (print, paste, colorpicker, contextmenu, textcolor). Those plugins should be removed from TinyMCE configuration if they were used.

All custom plugins code has to be revisited. There is not jQuery support anymore and there are API changes around registering button, icons, menus, etc. The latest documentation version about creating a custom plugin can be found here.

Built-in TinyMCE spell checker

From EPiServer.CMS.TinyMce 4.0.0, the EPiServer.TinyMCESpellChecker plugin will be included in core page. The EPiServer.TinyMCESpellChecker should be uninstalled since it won't be available as a separate package for EPiServer.CMS.TinyMce 4 and above.

Dec 20, 2022

Comments

Praful Jangid
Praful Jangid Dec 22, 2022 01:34 PM

Finally.

Do we have any plan to add all new features as well, in near future?

Robert Svallin
Robert Svallin Jan 4, 2023 01:31 PM

Hey Praful,

Could you please clarify your question a bit. Are you referring to new features from TinyMCE or features in TinyMCE made by Optimizely? When it comes to newer versions of TinyMCE we are currently looking at updating to latest v6 version that is currently available as an update to to the next 4.0.1 TinyMCE package. We expect to deliver more updates with newer versions as they get released by Tiny. If you are looking for specific features that you want built into TinyMCE by Optimizely then I suggest adding them to our feedback site, https://feedback.optimizely.com/ideas/, from which we pull requests into the project.

Did I missunderstand your question, please dont hesitate to clarify.

Praful Jangid
Praful Jangid Jan 4, 2023 02:25 PM

Well, I was talking about the new features list from the TinyMCE (https://www.tiny.cloud/). I have not went through the full list. 

Robert Svallin
Robert Svallin Jan 4, 2023 03:30 PM

Hey again,

As I mentioned we are planning on releasing newer versions of TinyMCE more frequent going forward. Also, you do have the capability to customize what toolbars that are available during startup of the application. Is there something specific that you are looking for?

Please login to comment.
Latest blogs
Implementing EmbeddedLocalization in Optimizely CMS 12

My previous post on translation (Translating Optimizely CMS 12 UI components) gives an overview of how to implement the FileXmlLocalizationProvider...

Eric Herlitz | Jan 27, 2023 | Syndicated blog

Breaking changes in EPiServer.CMS.TinyMce 4.0.0

After upgrading to the latest version of EPiServer.CMS.TinyMce, the dropdown with formats disappears. Learn how to get it back!

Tomas Hensrud Gulla | Jan 27, 2023 | Syndicated blog

Translating Optimizely CMS 12 UI components

Optimizely CMS 12 have been out for a while now, but still some elements haven't been properly translated resulting in a GUI defaulting to english....

Eric Herlitz | Jan 26, 2023 | Syndicated blog

Image preview in Optimizely CMS12 all properties view

With these simple steps, you can now see an Image and its Metadata, including size and dimensions, when editing an Image property in Optimizely...

Tomas Hensrud Gulla | Jan 26, 2023 | Syndicated blog

Setting up the ImageEditor in Optimizely CMS 12

Setting up certain configurations on Opimizely CMS 12 differs quite a bit from prior versions of (Episerver CMS 11 and older). Here's a small guide...

Eric Herlitz | Jan 25, 2023 | Syndicated blog

Happy Hour Returning in February

Hi everyone! It's been a while and we're excited to resume our Happy Hour in February for more learning, sharing, connecting, relaxing, and just to...

Patrick Lam | Jan 24, 2023