Replacing the TinyMCE paste plugin in SilverStripe 2.4

Posted December 12th, 2011 in SilverStripe

The SilverStripe 2.4.x CMS uses TinyMCE as the WYSIWYG HTML editor and comes with the Paste plugin for reformatting pasted text. Unfortunately the version that comes with SilverStripe 2.4 is fairly out of date and doesn't handle pasting very well in webkit based browsers (or at least for me on Chrome on the Mac).

Replacing the TinyMCE Paste plugin vs the whole thing

Unfortunately it's not easily possible to simply drop in an updated version of TinyMCE into SilverStripe; I've tried it and doesn't work. However, it is possible to simply replace the Paste plugin which I'll show how to do after a couple of examples of what happens with the bundled version.

Note that the current version of TinyMCE at the time of this post is 3.4.7 and there are issues with paste in that; I've provided the version I use which seems to work pretty well, although I'm not sure which version of TinyMCE it comes from.

Use the plain text paste function instead

Using the paste as plain text function doesn't have this issue, but you have to remember to always use it. By replacing the plugin with an updated version you don't have to remember and can just paste the text using keyboard shortcuts.

Examples of bad formatting

Copying some text from an external application (such as a text editor) and then pasting into the editor works fine if there are no line breaks. As soon as there are, it gets messy. For example, copy and pasting the text "some text copied from another app" with a couple of line breaks ends up looking like this:

<p>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">some text copied from another app</div>
<p>some text copied from another app</p>
<div></div>
</p>

I mentioned above that the 3.4.7 paste plugin has issues too. Pasting the same text into that version results in this:

<p>
<p>some text copied from another app</p>
<p>&nbsp;</p>
</p>

After saving the Page, SilverStripe fixes it (see below) but it's preferable to have it paste better in the first place.

<p>&nbsp;</p>
<p>some text copied from another app</p>
<p>&nbsp;</p>

Replacing the Paste plugin

Download this file and replace the existing "paste" directory which can be found at sapphire/thirdparty/tinymce/plugins . You might need to clear the cache in your browser and then pasting will work a lot better from external sources.

It doesn't resolve the issue when copying and pasting from other TinyMCE instances (e.g. adding stuff like style="line-height:16px") but at least it solves one major annoyance.