TinyMCE _mcePaste divs and Webkit browsers

Posted in Javascript -

There is a bug in older versions of TinyMCE when using Webkit based browsers (Google Chrome and Apple's Safari) which added and failed to remove hidden divs with the id _mcePaste. This post looks at the problem and offers two solutions: upgrade TinyMCE completely, or just upgrade the paste plugin.

Versions affected

I'm not sure which versions of TinyMCE this bug affects but it doesn't affect the current version, which is 3.3.9.2 at the time of this post.

How to replicate the error

If you copy and paste from a text editor into the TinyMCE HTML editor with a webkit based browser and the content contains a line break, the hidden divs are added and never removed.

For example, copying "some example text" from a text editor, including a line break and then pasting it into TinyMCE will result in this:

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

This is not really ideal because it results in duplicated content in a hidden div and is completely unnecessary.

Fix the error by upgrading

Simply upgrade to the latest version of TinyMCE and this particular issue will go away. The only catch is that you'll need to manually edit the HTML source all of your pages which are affected by deleting these <div> blocks and their content.

Fix the error by replacing the paste plugin

If you are using a framework or CMS that uses an affected version of TinyMCE then you may not easily be able to simply replace the entire install of TinyMCE. I personally use SilverStripe and replacing the entire install of TinyMCE broke the CMS admin area.

You may be able to still fix the issue by just replacing the paste plugin, which is what I was able to do with my SilverStripe install to solve the problem.

Download the latest version of TinyMCE and unzip the downloaded file. Then locate the paste plugin files at jscripts/tiny_mce/plugins/paste and copy the entire "paste" directory over to the appropriate location of the CMS you are using.

In SilverStripe, for example, delete the old paste directory from sapphire/thirdparty/tinymce/plugins and then copy the paste directory over to there from the unzipped files. I can't tell you where this is located for any other CMS or framework, but search for the paste directory using whatever file search tool you use.




Comments