817 views
How to disable image copy/paste on TinyMCE HTML editor
Problem
TinyMCE comes with several options enabled. One of them allows the user to copy/paste images into the body. However, using this function results in images not displaying properly when received by certain email clients. 

Copy/paste an imange


Symptoms
On certain email clients, the image will not display.


Disabling the copy/paste function on TinyMCE will force users to add the images using the image icon on the toolbar (see screenshot below). This sends the image as an attachment rather than in the body of the email, making the outbound email more compatible with most email clients. For more information, see KB0621606.





Note: In Istanbul, copy/pasting images will create an attachment instead of using inline images on some browsers. Disabling copy/paste also disable that feature. However, attaching via the image icon on the toolbar will still work fine.

Cause

The reason for this behavior is because TinyMCE has been initialized with paste_data_images = true. Learn more here: TinyMCE | Paste Plugin


Resolution

Use this simple UI script to disable the pasting of data images into any TinyMCE editor. This UI script targets the email client only but can be modified to include more tables. It loops through the tinymce.editors array in case there is more than one initialized editor on the page.

There is a set timeout for 2 seconds to wait for the TinyMCE to be initialized. If TinyMCE is not initialized, the setting will not work. Consider increasing the set timeout from 2000 to a higher value (e.g. 5000) on clients where TinyMCE takes longer to load.


UI ScriptValue
NameDisablePasteImageEmailClient
GlobalOn (ticked)
ActiveOn (ticked)
Script
1
2
3
4
5
6
7
8
(function (arrayofvalidpages) {
	document.location.pathname && (new RegExp("\\b" + arrayofvalidpages.join("\\b|\\b") + "\\b"))
	.test(document.location.pathname) && setTimeout(function () {
		tinymce && tinymce.editors.forEach(function (a) {
			a.settings.paste_data_images = !1; // false
		})
	}, 2000)
})(["email_client.do"]);
 


UI Script

 

Article Information

Last Updated:2017-08-03 09:36:01
Published:2017-04-06