Prevent joomla tinyMCE editor from not displaying image when copy paste content from other website.

I have a knowledge base site built with joomla. Recently, I found images does not shown when we copy&paste web page content from other sites.

This happens because original web pages put crossorigin="anonymous" in their tags. So, as long as joomla tinyMCE filters out this img attributes, those images will be shown again.

To solve this, a quick walk around is finding an tinyMCE plugin and register it in joomla. this plugin will filter out crossorigin attribute when content is pasted into tinyMCE textarea. As a quick dirty solution, I use tinyMCE paste plugin found in plugins directory. And modified two places as below.





java script

Open file:
/var/www/html/media/editors/tinymce/plugins/paste/plugin.min.js


Add below content marked as red,

function insertClipboardContent(clipboardContent, isKeyBoardPaste, plainTextMode, internal) {
        var content, isPlainTextHtml;
        if (hasContentType(clipboardContent, 'text/html')) {
          content = clipboardContent['text/html'];
        } else {
          content = pasteBin.getHtml();
          internal = internal ? internal : InternalHtml.isMarked(content);
          if (pasteBin.isDefaultContent(content)) {
            plainTextMode = true;
          }
        }
        content = Utils.trimHtml(content);
        //should use Dom parser for robust coding. 
        content = content.replace(/crossorigin=\"anonymous\"/gi,'');

    



chown apache:apache plugin.min.js


sudo chmod 644 plugin.min.js


PHP

Open below file,
/var/www/html/plugins/editors/tinymce/tinymce.php

Add below content marked as red,

// Drag and drop Images
        $allowImgPaste = false;
        $dragdrop      = $levelParams->get('drag_drop', 1);

        $externalPlugins['jpaste'] = JUri::root() . 'media/editors/tinymce/plugins/paste/plugin.min.js'; 



 $externalPlugins = array(
                array('jdragdrop' => JUri::root() . 'media/editors/tinymce/js/plugins/dragdrop/plugin.min.js'),
                array('jpaste' => JUri::root() . 'media/editors/tinymce/plugins/paste/plugin.min.js'),
            );



Above is just a quick dirty walk around. Creating a dedicate tinyMCE plugin for filtering should be a better neat solution.