Magento 1.9 Stop Removal of Valid Elements in WYSIWYG

Question

Rather frustratingly, I can see that magento's wysiwyg removes elements such as the picture element.

Digging around I can see that the TinyMCE editor is used and setup is hardcoded here:

/magento1938/js/mage/adminhtml/wysiwyg/tiny_mce

Now, I can override the file, and use my own as follows:

<?xml version="1.0"?>
<layout>
    <default>
        <reference name="head">
            <action method="removeItem">
                <type>js</type>
                <name>mage/adminhtml/wysiwyg/tiny_mce/setup.js</name>
            </action>
            <action method="addItem">
                <type>skin_js</type>
                <name>js/path/to/your/tiny_mce_setup.min.js</name>
                <params/>
                <if/>
                <condition>can_load_tiny_mce</condition>
            </action>
        </reference>
    </default>
</layout>

Then add the following extended_valid_elements configuration to the setup, as per TinyMCE, to extend our valid elements:

extended_valid_elements : "img[align<bottom?left?middle?right?top|alt|border|class|dir<ltr?rtl|height"
            +"|hspace|id|ismap<ismap|lang|longdesc|name|onclick|ondblclick|onkeydown"
            +"|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover"
            +"|onmouseup|src|srcset|sizes|style|title|usemap|vspace|width],"
            +"picture[source]" ,

Would this be the most suitable solution?

Answer 1

Magento is dynamically creating a settings element for the TinyMCE editor, but it’s doing do with a hard coded list of properties. As written, the tinyMceWysiwygSetup object is incapable of supporting the extended_valid_elements setting, or any other setting not hard coded in the getSettings method.

Luckily Javascript’s object system (particularly as used by PrototypeJS) has built in support for method replacement.

Specifically, if we modify the prototype property of our class before an object is instantiated, we can actually redefine the getSettings method.

Thus, I have arrived at the following working solution, which will allow us to extend the Magento TinyMCE configuration, with our own configuration(s). Without the need to even copy the entire file.

1. Update the Admin layout with:

   <adminhtml>
     <layout>
       <updates>
           <modules>
               <file>Custadmin.xml</file>
           </modules>
       </updates>
     </layout>
   </adminhtml>
   

   The custadmin.xml file:

         <?xml version="1.0"?>
           <layout>
            <default>
             <reference name="head">
              <action method="addItem">
               <type>skin_js</type>
               <name>js/tiny_mce_setup.js</name>
               <params/>
               <if/>
               <condition>can_load_tiny_mce</condition>
              </action> 
             </reference>
            </default>
           </layout>
   

2. In your Custom Admin js folder create the file tiny_mce_setup.js

3. Redefine the getSettings method, as follows:

   (function (getSettings) {
   tinyMceWysiwygSetup.prototype.getSettings = function (mode) {
       var oSettings = getSettings.call(this, mode);
       oSettings.extended_valid_elements =  "img[align<bottom?left?middle?right?top|alt|border|class|dir<ltr?rtl|height"
               +"|hspace|id|ismap<ismap|lang|longdesc|name|onclick|ondblclick|onkeydown"
               +"|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover"
               +"|onmouseup|src|srcset|sizes|style|title|usemap|vspace|width],"
               +"picture[source]";
       return oSettings;
   };
   }(tinyMceWysiwygSetup.prototype.getSettings));
   

Further information and slightly alternate solution can be found here: https://alanstorm.com/magento_html5_tinymce/