Allow style attribute in image tags in TinyMCE in SilverStripe

Posted June 13th, 2011 in SilverStripe

The SilverStripe CMS html editor uses TinyMCE which strips out style attributes for the image tag by default. Fortunately it is very easy to prevent this from happening if you want to be able to assign styles directly in the HTML to an <img> tag. Whether or not you should actually add inline styles is a different post altogether :)

HTMLEditorConfig

The configuration settings for TinyMCE are controlled via the HTMLEditorConfig object. There are settings for valid_elements and extended_valid_elements. I tried changing the setting for valid_elements first but that had no affect but it works for extended_valid_elements.

In your website's mysite/_config.php file, add the following:

HtmlEditorConfig::get('cms')->setOption('extended_valid_elements', str_replace('img[', 'img[style|', HtmlEditorConfig::get('cms')->getOption('extended_valid_elements')));

The string replacements looks at the config option and replaces "img[" with "img[style|". There are several other allowed attributes in the modified string after the |.

The reason I've used a string replacement on getting the option rather than just pass a hard-coded string is a) to keep the code easier to read and b) it means if the core code changes what's allowed later down the track this modification doesn't cause any issues with it.