Episerver 11, TinyMCE

Easily add special characters in Episerver TinyMCE editor

What if an editor comes to you and ask how they can add special characters to the content they enter in Episerver? They want to add for example the copyright character ‘©’. As you are a tech guy your answer is simple “Just hold alt and dial 0169 from keypad”. Can you see the question mark above the editor?

As we know Episerver uses the TinyMCE editor for XhtmlString properties (rich text editor). TinyMCE comes with some cool plugins that you can enable and for this case the Character Map plugin is what we need.

I’ll be using the EPiServer.CMS.TinyMce v2.6.1 NuGet in this example and will not go to details on the configuration initialization module as it is well documented in the developer guide. So please have a look at the documentation if this configuration part is new to you. You can also look at the Alloy MVC demo or in GitHub the alloy mvc template sources.

Add character map plugin to configuration

The following image shows the two things you need to add to the Alloy MVC default TinyMceConfiguration, first add the plugin and then add the toolbar button — that simple!

charmap-default-config-code

After adding the configuration code you now have a new toolbar button in Episerver rich text editor (in this sample I just add the button to the existing toolbar so the order of the buttons might not be perfect but you can use the toolbarIndex parameter to insert the button to a certain index in the toolbar).

charmap-default

The character map comes with a preconfigured set of special characters.

Append more special characters to character map

You can also append more characters to the preconfigured set but you cannot remove characters. The following code shows how to do that.

charmap-appended-config-code

And the editor looks like the following.

charmap-appended

Configure what special characters are available

As I mentioned you cannot remove characters from the preconfigured special charatcers but your last option is to override the default set and specify your own special characters. The code is almost the same as in append but now the setting name is ‘charmap’.

charmap-limited-config-code

And in the editor view we now get a limited special characters option.

charmap-limited

Hope this helps you and your customers to get better experience with special characters in the content.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s