TinyMCE - Update Validation Config Settings to allow <div> inside <a>

Question

I have an issue where TinyMCE is removing my links in my static CMS blocks. I believe this is because the anchor includes div's which doesn't meet the validation for TinyMCE.

How is it possible to update the TinyMCE validation to allow me to link my div's.

I've taken a look at the following file

lib/web/mage/adminhtml/wysiwyg/tiny_mce/setup.js

I believe this file is what handles the validation as I can see within the settings variable there is:

valid_elements': this.schema.validElements.join(','), 

Although I am unsure how I can edit the Tiny MCE to allow me to link divs?

Any advise would be greatly appreciated.

Answer 1

At this point in time you can't get TinyMCE to allow this HTML. Without getting into too many details, TinyMCE views each tag as either block or inline (it cannot be both). A div is a block element so the validator in TinyMCE will not allow it inside the div. If you use a span instead you can nest that tag inside the a tag without issue.

Answer 2

Allowing div elements inside a. Similarly you can add additional rules.

app/code/VENDOR/MODULE/Plugin/WysiwygConfig.php

<?php

    namespace VENDOR\MODULE\Plugin;
    
    class WysiwygConfig
    {
    
        /**
         * @param \Magento\Ui\Component\Wysiwyg\ConfigInterface $configInterface
         * @param \Magento\Framework\DataObject $result
         * @return \Magento\Framework\DataObject
         */
        public function afterGetConfig(
        \Magento\Ui\Component\Wysiwyg\ConfigInterface $configInterface,
        \Magento\Framework\DataObject $result
        )
    {
                $settings = $result->getData('settings');
                $settings['valid_children'] = '+a[div]';
                $result->setData('settings', $settings);
                return $result;
    }
}


**app/code/VENDOR/MODULE/etc/di.xml**

    <?xml version="1.0"?>
    <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
            xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">

        <type name="Magento\Ui\Component\Wysiwyg\ConfigInterface">
            <plugin name="plugin_wysiwyg_config"
                    type="VENDOR\MODULE\Plugin\WysiwygConfig"
                    sortOrder="10"/>
        </type>
    
    </config>