Life is busy. When it comes to publishing content within an Episerver powered website, content editors will usually want to get on with a task as efficiently as possible. Who can fault anyone who has lots to do and not enough time to do it in. For speed and ease of creation, a lot of editors will create the initial draft within a program like MSWord or LibreOffice. When they are happy with their prose, they will then copy the content directly into an Episerver ContentArea. When content is copied into Episerver like this, a number of hidden metadata tags and other crap will also be copied as well. In a word document where page load times are not important, this might be acceptable, however, on a website this is pants. These hidden tags can break your responsive designs, it can make your content look funny and it can even make your pages load longer.

Creating some proclamation that content editors who use your Episerver powered website can not use Microsoft Word is unrealistic. The content editors are the people who'll actually be using the product day-in and day-out, so it's unfair to make their lives difficult, just to ensure they don't make any mistakes. How do you solve this issue? A better solution is to configure Episerver to strip out all the extra crap and only allow a 'text-only' copy and paste. If you want to learn how to do this, read on.

Configuring TinyMCE To Enforce Paste As Plain Text Globally

When working with rich content in Episerver you will be working with the XHTML property. Within the CMS the WYSIWYG editor that is associated with this property is called TinyMCE. TinyMCE is a very widely adopted online text editor. If you want to customise how the Episerver editor works when copying and pasting content from MsWord within the TinyMCE editor, you will more likely find a useful answer by Googling for the term TinyMCE rather than Episerver editor.

When it comes to customizing TinyMCE with Episerver though, it's not as easy as simply updating a config file within your webroot. Episerver is installed via Nuget and the TinyMCE config file is also installed this way. If you tried to customise any core file, you'd break your Episerver upgrade path. When you upgraded Episerver you will loose your custom changes... so what do you do?

When you want to customise TinyMCE within Episerver, instead of messing about with a config file we can do it in code, using the TinyMCEPluginNonVisual attribute! To get started, create a regular empty class within Visual Studio and apply the TinyMCEPluginNonVisual attribute onto it, like so:

The important parts of the code above include:

ServerSideOnly: Seen on Line 4, this needs to be true, otherwise, you'll get a JavaScript error when the editor loads. ServerSideOnly mode means the config is defined in C# code. If it's set to false, Episerver will try to find a file within the webroot instead.

AlwaysEnabled: Seen on Line3, if true, the config will be enabled for the whole of Episerver. If you only want to apply it to certain parts then read on.

EditorInitConfigurationOptions: Seen on Line5, this is the attribute that allows you to configure the editor. The object passed into here, is pure TinyMCE config only. In this instance, I've added the settings to disable TinyMCE from allowing any extra crap to be pasted in.

Configuring TinyMCE To Enforce Paste-In Certain Places

First, go and read this tutorial on how to customise the TinyMCE buttons, this contains most of the code you need to get started. In that tutorial, I explain how you can create a custom TinyMCESettings property and apply it to the rich-text area contained on a page, or a block within Episerver. If you only want to apply this 'paste only text rule' defined above onto a specific property, you need to follow that pattern outline in that tutorial, with an added tweak that I will show you below. Within your public override TinyMCESettings GetPropertySettings() method. Add this code:

In this example, you simply add the rule you created above to the TinyMCE property and job done! If you want to go down this route, you can apply the custom TinyMCE property within your pages and blocks. Everywhere you add that property, the extra rule will be applied as well.

NOTE: Notice that I'm adding the SelectAll. This is intentional and needs to be there. This is a quirk with the Episerver TinyMCE integration, without this, it won't work!

With the code covered in this tutorial, TinyMCE will not prevent content editors from pasting in accidental crap from MsWord. Happy Coding 🤘