Ben  McKernan
Mar 20, 2018
  22786
(17 votes)

The new and improved TinyMCE editor

We have just release version 2.0.0 of the EPiServer.CMS.TinyMce package! This is a major version upgrade so you can expect breaking changes but you should be most excited about the improvements that have been made. I'm going to run through the main changes in this blog post.

TL;DR

The main points are, that we have upgraded to the latest version of TinyMCE (4.7.9 at the time of writing). We have removed the configuration from admin mode and instead the editor is only configurable via code. We have improved the drag and drop experience for pages, blocks and media when using Firefox or Chrome. IE and Edge still work as they have previously. There is currently no support for dynamic content.

New version of TinyMCE

The new editor is using the latest version of TinyMCE (4.7.9 at the time of writing). There have been some really great improvements done to the TinyMCE product and you can read more about them or try their demo editor at https://www.tinymce.com. One point to note is that Episerver only bundles the standard plugins with the editor. So if you have a customer that wants to use a premium plugin they will need to license that from TinyMCE directly.

One of the most noticeable changes in the new version of TinyMCE is the modern theme. The toolbar and icons are much more user friendly and it is even possible to add a menu bar if needed. This is what the editor toolbar looks like in Episerver when using the default configuration:

Image TinyMCE_Editor.png

Configuring the editor

In this release we have completely rewritten the way the editor is configured. It is no longer possible to configure the editor in admin mode, instead all configuration is done via code. We have introduced a new TinyMceSettings class, which can be configured with any setting supported by TinyMCE, and also a TinyMceConfiguration class, which is responsible for mapping settings to properties on page types. Here is an example of how to extend the default settings and also how to configure custom settings for a particular property.

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");
});

You can see the example in its full form here: https://git.io/vxZWE

The TinyMceSettings class contains helper methods for configuring the most common settings. However it is possible to configure any setting supported by TinyMCE by using the AddSetting or RawSettings methods.

Writing a custom plugin

It is also possible to create your own plugins for the TinyMCE editor. See the TinyMCE documentation for how to write a plugin: https://www.tinymce.com/docs/advanced/creating-a-plugin

Once you have created your plugin you can then configure the TinyMCE editor to load it by using the AddExternalPlugin method.

context.Services.Configure<TinyMceConfiguration>(config =>
{
    config.Default()
        .AddExternalPlugin("my-plugin", "/path/to/my/plugin.js");
});

Better drag and drop support

When dragging and dropping pages, blocks, or media in the previous version the TinyMCE editor, it was not possible to target the exact location to drop the content whilst dragging. The content would always be inserted at the place where the caret was last located. Unfortunately, in the new version, this is still the case for IE and Edge due to some browser quirks. However for Firefox and Chrome the experience is much better. The caret will follow the mouse whilst dragging so the user can see exactly where the content will be inserted.

Image 5ab109bf495de964695126.gif

No support for dynamic content

At this point there is no NuGet package for dynamic content that is compatible with the new TinyMCE package. So at this point in time we do not support using dynamic content with the new TinyMCE editor.

Mar 20, 2018

Comments

James Wilkinson
James Wilkinson Mar 20, 2018 03:55 PM

Excellent, this was much needed. Look forward to working with it.

Johan Kronberg
Johan Kronberg Mar 20, 2018 10:17 PM

Fantastic!!! Great work!

Eric
Eric Mar 20, 2018 11:21 PM

Excellent and finally :) 

Mar 21, 2018 03:11 AM

Congratulations of this long coming release!

Tigerhajen
Tigerhajen Mar 21, 2018 10:53 AM

The format list items work well for inserting elements.

config

.BlockFormats("Paragraph=p;)

give me

But how can I use it to insert elements with classes?

config

.BlockFormats("Paragraph=p class=myClass";)

does not give me

Mar 21, 2018 11:00 AM

@Julius I think you should those kinds of configurations in the Styles dropdown and not block formats.

Mar 21, 2018 11:02 AM

Wohoo finally!

Only one question at this point, could it be possible to split this into two separate packages? Now when you install it you get the modules folder as well, which is not so nice in a class library.

Tigerhajen
Tigerhajen Mar 21, 2018 11:57 AM

@Johan Petersson @Ben McKernan  How would I go about adding these Syles dropdown? If an example of this would be included in this blog or on the example git it would be terrific.

Jørgen Helgheim
Jørgen Helgheim Mar 21, 2018 01:04 PM

When will you upgrade EPiServer.Forms.UI to support EPiServer.CMS.TinyMce 2.0.0? 


'EPiServer.CMS.TinyMce 2.0.0' is not compatible with 'EPiServer.Forms.UI 4.10.0 constraint: EPiServer.CMS.TinyMce (>= 1.0.0 && < 2.0.0)'.

Arild Henrichsen
Arild Henrichsen Mar 21, 2018 10:54 PM

@Ben: Is there any way to override the "theme: modern_episerver" setting? I see the "inlite" theme is included with the nuget package, and it looks neat: https://www.tinymce.com/docs/demo/inlite/ 

Tried various combinations of .Add() and .AddSettings() but it keeps reverting to the modern_episerver theme.

Ben  McKernan
Ben McKernan Mar 22, 2018 08:53 AM

@Arild there are a few settings that are not possible to override. We will need to document these so that it is clear for partner developers why they can't be overriden. The theme can't be overridden because doing so would cause the editor break in on-page edit along with some quirky bugs in all properties edit. Perhaps we can be more lenient with these settings and say that you can change them at your own risk. The other settings that can't be changed are the language, this is set based on the UI language the editor has chosen. Also we always turn the TinyMCE branding off. And the readonly setting is set based on the readonly state of the property.

@Jørgen I'm not sure about the forms addon. I hope they have something out soon.

@Tigerhajen You need to add the styleselect to the toolbar and then you can use StyleFormats method to configure style formats. https://www.tinymce.com/docs/configure/content-formatting/#style_formats I recommend reading the TinyMCE documentation for the configuration options. It is quite detailed.

Ben  McKernan
Ben McKernan Mar 22, 2018 08:56 AM

@Johan something we will consider for 3.x

Kristian
Kristian Mar 22, 2018 12:46 PM

And EPiServer.DynamicContent. When will EPiServer.DynamicContent be upgraded to support EPiServer.CMS.TinyMce 2.0?

Unable to resolve dependencies. 'EPiServer.CMS.TinyMce 2.0.0' is not compatible with 'EPiServer.DynamicContent 1.0.1 constraint: EPiServer.CMS.TinyMce

Ben  McKernan
Ben McKernan Mar 22, 2018 01:34 PM

@Kristian yes, like I said in the last section of my blog, we don't support dynamic content just now. I don't know if support is on the roadmap unfortunately

Antti Alasvuo
Antti Alasvuo Mar 22, 2018 09:20 PM

@Ben, I've replied to your comment in my blog post and added couple of issues. @tigerhajen, I think my blog post also answer your question how to add the styles.

Some issues:

  • the TinyMCE statusbar can't be set visible in the OPE mode, so no word count for example
    • even if explicitly setting the statusbar : true it is not visible in OPE
  • long styles list shows correctly in OPE mode but is cut in the all properites view, so few last items in the list can't be selected

I've added screen shots a the end of my blog post @Ben if you want to have a look. Just to clarify the screen shots are from Alloy demo from page 

"News & Events"

Antti Alasvuo
Antti Alasvuo Mar 22, 2018 09:39 PM

What about localizing the items in the styles list? I can't get those localized, the documentation says to add the style localizations based on the CSS class name and if using the StyleFormats then the title is used for localization. What ever I do I can't get either ones localized. Looking at the settings with 'window.tinymce.settings;' in browser developer console shows that the language is always empty (language: "") if that has anything to do with the localization not working.

Apr 19, 2018 07:56 AM

Hi Per! There is this premium plugin (https://www.tinymce.com/docs/enterprise/paste-from-word/) that probably does what you want.

Apr 24, 2018 02:18 PM

Hi,

We have updated the SDK to make it a bit more clear how you can configure TinyMCE.

https://world.episerver.com/documentation/developer-guides/CMS/add-ons/customizing-the-tinymce-editor-v2/

Please let us know if you are missing anything more or if anything is unclear.

Dave Johnson
Dave Johnson Apr 25, 2018 02:49 PM

"This is a major version upgrade so you can expect breaking changes"

The new TinyMCE 2 package is a dependency of Episerver.CMS since v11.5.2, so the breaking changes above should really be highlighted in big letters on the Releases page as other breaking changes are.

I have just had to roll back to v11.5.0 to go back to the old editor, as migrating all of our custom editor styles and config was not in the plan for our upgrade from v10 to v11, and is not listed anywhere as a breaking change.

May 2, 2018 05:00 PM

@Dave We have fixed that in 11.5.4, the dependency should not be on latest TinyMCE package as you correctly state that should be in a major version / breaking change.

Please login to comment.
Latest blogs
Omnichannel Analytics Simplified – Optimizely Acquires Netspring

Recently, the news broke that Optimizely acquired Netspring, a warehouse-native analytics platform. I’ll admit, I hadn’t heard of Netspring before,...

Alex Harris - Perficient | Oct 9, 2024 | Syndicated blog

Problem with language file localization after upgrading to Optimizely CMS 12

Avoid common problems with xml file localization when upgrading from Optimizely CMS 11 to CMS 12.

Tomas Hensrud Gulla | Oct 9, 2024 | Syndicated blog

Optimizely Autocomplete (Statistics)

A user starts typing in the search input, and it returns suggestions for phrases they might be searching for. How to achieve this?

Damian Smutek | Oct 9, 2024 | Syndicated blog

Optimizely Forms: You cannot submit this form because an administrator has turned off data storage.

Do not let this error message scare you, the solution is quite simple!

Tomas Hensrud Gulla | Oct 4, 2024 | Syndicated blog