Views: 13678
Number of votes: 6
Average rating:

Improvements to TinyMCE in EPiServer CMS 6 R2

EPiServer CMS 6 R2 comes with some nice improvements to the EPiServer implementation of TinyMCE. The TinyMCE editor is upgraded from version 3.2.7 to 3.3.9.3. Some of the more important changes in the new version are:

  • New text formatting engine.
  • Table plug-in now includes cell selection logic.
  • Advanced list plug-in (enables the user to define list type of list elements).
  • New paste plug-in logic that enables the user to retain style information from Office.
  • The content inside the editor now renders in standards mode by default. (no HTML5 support yet).
  • Performance enhancements.
  • The Safari plug-in is removed since the logic is replaced by the new text formatting engine.
  • Numerous bug fixes.

CSS Handling

The upgrade to 3.3 version in conjunction with a new CSS parser in EPiServer.Framework makes it possible to enhance the logic for populating Styles (CSS) drop downs in TinyMCE. See the EPiServer CSS Attributes section below for more details.

Format dropdown removed

Since the above CSS handling provides a way to make the Styles dropdown behave like the Format dropdown and many users might be confused by the difference between the two the Format drop down is no longer added in default configuration. It’s still possible to add and make use of the Format dropdown and if you have an upgraded site and have customized the TinyMCE settings the dropdown might still be there.

New Window Manager Plug-In

In the earlier version of EPiServer CMS6 some of the EPiServer dialogs where opened as modal dialogs (using EPiServer dialog functionality) but all dialogs built in to TinyMCE where opened as non modal which allowed the user to open several of the same kind and possibly causing errors. Now all dialogs are opened using the EPiServer dialog functionality creating a more consistent user experience.

Image Editor Plug-In

The new image editor plug-in makes it possible to open the image editor to edit an image directly from the TinyMCE editor. The plug-in is activated by default but may not be available if you have an upgraded site and have customized the TinyMCE settings for the current editor. The image editor contains tools for cropping, resizing and transforming images, the modified image can then be saved as a new image or replace the original image. Configuration settings, including size presets for the resize tool, can be found in the <imageEditor> element in the <episerver> section.

Configuration of CSS files used in TinyMCE

Like the EPiServer CMS 5 editor the TinyMCE editor in EPiServer CMS 6 R2 reads in external CSS files and there are three ways to configure which CSS files TinyMCE should use. Listed in the order of importance these are:

  • Content CSS path in settings of PropertyXHTMLStringControl.
  • Dynamic property on page UIEditorCSSPaths (could be inherited from parent page).
  • Site settings attribute uiEditorCssPaths.

All configuration settings accept a comma separated list of URLs to CSS files where each URL starts with / or ~.

The latter two are the same as in EPiServer CMS 5 and in EPiServer CMS 6 these are shared with the old editor, this means that if you are using both the old editor (CMS 5) and new TinyMCE editor, they both read in the same CSS files (if using site settings configuration or using/reading from the same dynamic property).

The first option, setting Content CSS path in PropertyXHTMLStringControl, provides the possibility to specify different CSS files for different editors in the same page as well as specifying global settings. This is also a way to avoid conflicts when using both the old editor and the TinyMCE editor on the same Web site.

EPiServer CSS Attributes

You can use EPiServer CMS specific attributes to your CSS files to define which styles should be available in the editor's Styles and how element specific classes should be handled.

EditMenuName and EditMenuTitle Attributes

The styles in the CSS file will appear in the Styles tool in the order they are defined in the CSS file. When a EditMenuTitle attribute is discovered a new heading will be added in the dropdown. All subseqent styles marked with the EditMenuName will added under the latest discovered heading until a new EditMenuTitle attribute is found.

Example:

If the CSS used by the editor looks like this:

.style1
{
   EditMenuName: Style1;
}
.style2
{
   EditMenuName: Style2;
}
h1
{
   EditMenuTitle: Heading Styles;
   EditMenuName: Heading 1;
}
h2
{
   EditMenuName: Heading 2;
}

 The resulting dropdown in the Styles tool will look like this:

Styles Tool Dropdown

 

You can localize the values of your EditMenuName and EditMenuTitle attributes by adding translations to an XML file in the lang folder. Create a new element at language_root/editorstyleoptions and add the translation strings as children of the new element. Whitespaces in EditMenuName and EditMenuTitle values should be replaced by underscore characters.

Example for the CSS above:

<language name="svenska" id="sv">
   <editorstyleoptions>
      <style1>Stil 1</style1>
      <style2>Stil 2</style2>
      <heading_styles>Rubrikstilar</heading_styles>
      <heading_1>Rubrik 1</heading_1>
      <heading_2>Rubrik 2</heading_2>
   </editorstyleoptions>
   ...
</language>

The resulting dropdown when the editor has selected Swedish:

Styles Tool Dropdown With Translated Style Names

 

ChangeElementType Attribute

The standard behaviour when applying element specific classes (like p.myClass) is that they can only be applied to elements that already are of the correct type. I.e. nothing will happen if you try to apply p.myClass to a h1 element. By using the ChangeElementType attribute you have the option to apply the class and change the element type in one action.

Note: The ChangeElementType attribute only works for text block elements like p, h1, h2 etc..

Example:

h2.italic
{
   ChangeElementType: true;
   EditMenuName: Heading 2 Italic;
   font-style: italic;
}

 

All these changes are available to test in the EPiServer CMS 6 R2 Beta release. We hope that the improved style handling will make it much more easy to change editor when upgrading a EPiServer CMS site since they both can consume css-files with the editmenuname attribute.

Mar 17, 2011

johan.petersson
(By johan.petersson, 3/17/2011 7:11:58 PM)

Nice improvements! Is the json-parser for TinyMCEPluginNonVisualAttribute updated?

jens.altback
(By jens.altback, 3/17/2011 8:09:08 PM)

Oh, i have search for such kind of information for almost 2 month now... This made my day. Thank you for much better implementation of TinyMCE than the version before!

David.Knipe
(By David.Knipe, 3/17/2011 8:12:51 PM)

I've just been talking to a client about upgrades to their site (CMS 6). They wanted to edit images directly in the rich text editor. Killer upgrade reason - tick!

linus.ekstrom
(By linus.ekstrom, 3/17/2011 8:14:24 PM)

Johan: No, it's still the same json parser in the R2 release so you still need to create a public method that you call in your init options.

johan.petersson
(By johan.petersson, 3/18/2011 10:22:56 AM)

Linus Ekström: We have tried that with no luck http://world.episerver.com/Modules/Forum/Pages/Thread.aspx?id=39513&epslanguage=en. We also filed a support incident on this that resulted in a bug report.

erik.karrsgard
(By erik.karrsgard, 3/22/2011 2:56:25 PM)

@Johan: I have posted some code to modify the class_filter setting in the thread you are referring to.

linus.ekstrom
(By linus.ekstrom, 3/24/2011 2:48:04 PM)

If you are upgrading a site that used the CMS 5 editor you want to set the ChangeElementType attribute to true (as described above) to get the same functionality in TinyMCE. Otherwise nothing will happen if you select a text and want to convert it to another element with a style when you have both an element and a class:
h1.heading1
{
ChangeElementType: true;
font-size: 1.625em;
EditMenuName: Heading 1;
}

Oskar Zetterberg
(By Oskar Zetterberg, 3/28/2011 4:07:03 PM)

New paste plug-in logic that enables the user to retain style information from Office.-- Uh oh the horror ;)

Johan Kronberg
(By Johan Kronberg, 5/26/2011 12:00:50 PM)

Have tried saving my CMS R2 editor CSS in different encodings (UTF-8 with and without BOM and Windows-1252) but ÅÄÖ-characters always breaks the style-dropdown.

For instance:
EditMenuName: Vänsterställd;

I haven't tried using the using the lang-file way but would rather keep the labels in the CSS file...

linus.ekstrom
(By linus.ekstrom, 5/27/2011 10:15:50 AM)

Johan: I have investigated this and it seems that the CSS parser in the EPiServer Framework (that was added in the 6 R2 release) parses the content as ASCII which means that you can't use non ASCII characters. The CSS parser it itself is a very complicated beast so I'm not sure that we want to take the time to rewrite this to support Unicode since CSS itself seems bound to ASCII. Therefore I think that language files is the way to go in this case.

Travis Schettler
(By Travis Schettler, 7/23/2011 8:29:48 AM)

"It’s still possible to add and make use of the Format dropdown..."

Would you care to expound upon this?

http://world.episerver.com/Modules/Forum/Pages/Thread.aspx?id=52427&epslanguage=en

Thanks!

Håkon Kvalen
(By Håkon Kvalen, 8/31/2011 3:45:44 PM)

I'm trying to Change the UIEditorCssPath in web.config to another css, but I get an Parse error no matter what or how i'm writing it.

I can however create an dynamicproperty that contains my path to the css and this works as expected. The same path that fails in web.config works when applied in an dynamic property.

Anyone else seen this issue?

Linus Engback
(By Linus Engback, 8/31/2011 3:55:20 PM)

I had a problem with the editor not loading on Firefox or Chrome (worked in IE though).
The problem manifested itself in it trying to load:
"NetworkError: 404 Not Found - http://holmen.com/util/Editor/tinymce/plugins/CustomEditorSettings/editor_plugin.js"

This was due to the file "EditorSettings.cs" which contained:
content_css : ""/Templates/Public/Styles/MainLayout.css"",

Removing this line made the editor not krasch.

However, now we did not get the custom formatting. This was solved by setting the css-path in the uiEditorCssPaths attribute in settings in episerver.config.

linus.ekstrom
(By linus.ekstrom, 9/6/2011 6:35:52 PM)

Håkon: I just tried to remove the dynamic property setting and set to web.config setting to "~/Templates/AlloyTech/Styles/Default/Editor2.css" for the Alloy templates and it seems to load my copy of the standard templates file. Are you getting an Exception when trying to parse the configuration or are you getting a parse error of the actual file content?

Arve Systad
(By Arve Systad, 10/13/2011 12:42:37 PM)

Looks good, but TinyMCE has stopped working in Opera, which I find sad. I know Opera's not officially supported, but is there any chance there will come some sort of hotfix?

I'ts bothersome to have to use a different browser for a proper view of edit mode when it all used to work in R1. And we all know Opera is the only proper browser :-)

linus.ekstrom
(By linus.ekstrom, 10/13/2011 6:10:13 PM)

Arve: I tried installing the latest Opera version and tested some basic editing on a couple of different sites and I did not see any problems. Since Opera is not a supported version I can not answer about any hotfixes but it would be interesting to know what problems you are experiencing.

Arve Systad
(By Arve Systad, 10/18/2011 3:11:55 PM)

Hm, I guess it's my upgrading and/or other things that have ruined things for me then. Thanks for the answer anyways.

Pascal Schmitt
(By Pascal Schmitt, 1/18/2012 1:03:19 PM)

Thank you! Great post.
We also figured out, that img and table classes appearing in their specific plugins, if they are named correctly.
But if we try to style our table via the style drop-down, the classes are not applying correctly. Especially when we try to reformat an table created in CMS 6.

linus.ekstrom
(By linus.ekstrom, 1/24/2012 1:11:00 PM)

Hi Xuan!

Do you have an example on how to reproduce this. Preferrable the html for the table giving the problem and the class definition that does not work.

Andreas Nicolaisen
(By Andreas Nicolaisen, 6/22/2012 3:32:39 PM)

Linus, how can I add classes to the dropdownlist in the window where you insert images? (The one placed here: /util/Editor/tinymce/plugins/advimage/image.htm) and, I quess it's the select-field with id=class_list.

linus.ekstrom
(By linus.ekstrom, 6/25/2012 12:40:27 PM)

Andreas: The list of items in the insert image dialog should show all classes assigned to the img tag with an editmenuname attribute. An example from the Alloy templates:

img.image-topleftfloat
{
margin-right: 1em;
margin-bottom: 1em;
EditMenuName: Top left;
float: left;
}

Jonas Boman
(By Jonas Boman, 4/29/2014 4:50:34 PM)

I can't get a link-tag with multiple classnames; e.g
a.btn.linkbtn{
EditMenuName: Link button;
...some other styles.
}

Bug or feature?

linus.ekstrom
(By linus.ekstrom, 5/5/2014 2:28:50 PM)

@Jonas: At the time that this functionality was implemented in EPiServer, Tiny MCE did not have support for multiple classes in one style. This seems to have been added since then (http://www.tinymce.com/develop/bugtracker_view.php?id=4972) but to my knowledge, we have not added this support to the CSS parser that's used to extract the styles. I will forward this request to the product manager team so that they are aware of the need for this.

Please login to comment.