Use paste as plain text dialog in TinyMCE 3.3

Posted February 4th, 2011 in Javascript

The TinyMCE Javascript WYSIWYG HTML editor has a paste as plain text function. Earlier versions opened up a dialog box to paste the text and then click a button to paste that plain text into the editor. From 3.3 the behavior is instead to paste it directly into the editor without the additional dialog step. This post shows how to re-enable the dialog and the reasons you might want to do it.

Reasons to re-enable the dialog

Let's say for example you have the following text which you want to copy from one document and paste into the HTML editor:

apple
banana
pear

carrot
potato
eggplant

Paste with using the paste as plain text function

Using a Webkit based browser (Chrome and Opera) and Windows or Mac OS X and pasting without using the paste as plain text function will paste this (assuming the original text is actually plain text):

applebananapear
carrotpotatoeggplant

Using Opera on Mac OS X results in this:

apple banana pear carrot potato eggplant

Paste as plain text without the dialog

Using the plain text function without the dialog (i.e. the default setting) will result in this:

applebananapear carrotpotatoeggplant

Using Opera on Mac OS X results in this:

apple banana pear carrot potato eggplant

Neither of those are a very good representation of the original text and it takes a bit of work to put the line breaks in the correct place manually.

Paste as plain text with the dialog

Enabling the paste as plain text dialog, pasting into that, and then clicking the Insert button results in this for Chrome, Safari and Opera:

apple

banana

pear

 

carrot

potato

eggplant

This still isn't perfect but it's a vast improvement over the unreadable pasting shown above.

Browsers affected

Note that the issues described in this post only affect the webkit based browsers (Chrome and Safari) on both Mac OS X and Windows, and Opera on Mac OS X only.

When pasting inline with the paste as plain text function, Firefox 3 on both Windows and Mac will paste it in exactly the same format as the source; when pasting with the dialog Firefox results in the same sort of text as shown in the "paste as plain text with the dialog" example above.

Internet Explorer 8 is the same as Firefox although the double line break between "pear" and "carrot" is not added in the final example.

Enabling the paste as plain text dialog

When the TinyMCE editor is initialized in Javascript, add "paste_text_use_dialog : true" to the initialization call. For example:

tinyMCE.init({
	// General options
	mode : "textareas",
	theme : "advanced",
	plugins : ... plugin options etc ...

	paste_text_use_dialog : true,

});

Now reload the page and when clicking the paste as plain text button you will get the dialog instead of pasting inline.

Conclusion - should you enable it?

If you only need to support Internet Explorer and Firefox then there's probably no need to enable the paste as plain text dialog and just have inline pasting, because inserting from the dialog adds additional line breaks.

If you need to support Chrome, Safari and/or Opera then at least for TinyMCE 3.3.x you do need to enable the paste dialog. You could possibly use browser sniffing to enable it for these browsers and not the others but I'll leave that decision up to you.

These issues may of course be addressed with future versions of TinyMCE. I note that the 3.4 release it now in beta and will follow up this post once it reaches full release status and test the pasting functions against the same set of browsers.