A very common scenario that you'll encounter when working with Episerver is content editors trying to get their work done as fast as possible. I mean who can blame anyone trying to make their lives easier.  I probably write just as much content as most content teams on this site and any tips and tricks I can use to make writing content easier, I'm all over.

As I'm more technical (hopefully) then I'm very aware of the issue of writing content within a program like MSWord or LibreOffice and then copying into Episerver. When you do this, you'll end up getting a load of crappy metadata tags and other crap copied as well. In a word document, this might be acceptable. On the web, this can be a bit yuck, as it can break your responsive designs, it can make your content look funny and it can even make your pages load longer.

Now preventing content editors from pasting from Microsoft Word is shit. 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.

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

I'm assuming most of you know that the editor XHTML property uses TinyMCE. It's a very widely adopted online text editor. So if you want to customise how Episerver works, you can usually find an answer by Googling TinyMCE.

When it comes to customising 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 change it manually, you'd break your EPiserver upgrade path.

Instead, 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 to it, like so:

    [TinyMCEPluginNonVisual(
    PlugInName = nameof(DisablePasteTinyMCEPlugin),
    AlwaysEnabled = true,
    ServerSideOnly = true,
    EditorInitConfigurationOptions =
        @"{
            paste_text_sticky: true,
            paste_text_sticky_default: true
        }")]
    public class DisablePasteTinyMCEPlugin
    {
    }  
      

The important parts of the code include:

1. ServerSideOnly needs to be true, otherwise, you'll get a Javascript error when you load the editor. ServerSideOnly means the config is defined in C# code. If it's set to false, Episerver will try to find a file within your webroot and fail.

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

3. EditorInitConfigurationOptions. These are the settings. This bit is pure TinyMCE config only. In this instance, I've added the settings to disable TinyMCE allowing any extra crap to be pasted in.

Configuring TinyMCE To Enforce Paste In Certain Places

Ok, now I'm going to make you work a little harder if you only want to apply certain TinyMCE rules to certain pages/blocks. First, go and read this tutorial on how to customise the TinyMCE buttons, this has most of the code you need. 

In that guide, I explain how you can create a custom TinyMCESettings property and apply it to rich-text area on a page, or, block within Episerver. 

If you only want to apply this 'paste only text rule' defined above to a specific property, you need to follow that pattern with the tweak below. 

Within your public override TinyMCESettings GetPropertySettings() method, you'll need to add some code like this:

 
        public override TinyMCESettings GetPropertySettings()
        {
            var row1 = new List<string>
            {
                TinyMCEButtons.SelectAll
            };
            
            var tinyMceSettings = new TinyMCESettings();
            tinyMceSettings.ToolbarRows.Add(new ToolbarRow(row1)); tinyMceSettings.NonVisualPlugins.Add(nameof(DisablePasteTinyMCEPlugin));

            return tinyMceSettings;
        }

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 then apply the custom TinyMCE property within your pages and blocks and 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 intergration, without this, it won't work!

This way only certain richtext areas will prevent pasting crap in and some will, enjoy!