Technology

Overcoming Magento’s WYSIWYG Part 2: Customizing TinyMCE Settings

Posted by Pixafy Team

overcoming-Magento-WYSIWYG-part-2-blog-graphic

[series_block]

This post is part of a series on Magento‘s WYSIWYG editor:

[/series_block]

Recently, I wrote an article about how to work around Magneto’s WYSIWYG editor to obtain the design accuracy you expect from a regular text editor. After writing that post, I kept coming across similar issues and I found myself having to work around the rich text editor. Eventually enough frustration set in and I decided to look under the hood to see if I could actually fix the problem instead of working around it. After hours of configuration changes and a lot of head scratching, I finally came up with a recipe for WYSIWYG greatness!

First things first: where do we edit TinyMCE settings?

Magento can be quite the file maze if you don’t know what you’re looking for. The most important thing here is that you know how to properly create a design package ( or at least design theme ) to make these edits, otherwise you are going to lose these changes if you upgrade Magento. (If you don’t know how to do this head over to http://www.magentocommerce.com/resources/magento-user-guide and download the Designer’s Guide to Magento, this will get you started.)

Okay, so let’s dig in! First navigate from your root Magento directory to:

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

Once you have this file open do a search for “var settings = {“. You should see something similar to this:

 Overcoming-Magentos-WYSIWYG-Part-2-image-1

Now that we’re here, what do we edit?

Next we are going to add a few options to the settings to make TinyMCE work with us, not against us.

The first option we will add is “extended_valid_elements”.

Overcoming-Magentos-WYSIWYG-Part-2-image-2

This option allows you to set a rule for empty elements being valid. Think fb-root div for Facebook integration or an anchor tag that you do not want to have text in. Or maybe an element you plan to add content to with Javascript after page load. Default settings will currently remove these empty elements from the code after you save. Example:

<div id=”fb-root”></div>

This is the div Facebook tells you to add to the page so that they can load Javascript for Facebook integration.

The “+” indicates that you are adding and not removing. The next part is the tag type, “div” or whatever you want to stay put if left empty. You can see I chose to add support for divs, anchors, and spans. The last part, “[]” is where you add acceptable child elements, the “*” indicates any or none. None being the thing we care about with this option. No more disappearing tags! How sweet is that! For more on this option see: http://www.tinymce.com/wiki.php/Configuration:extended_valid_elements

The next option is the “valid children” option.

Overcoming-Magentos-WYSIWYG-Part-2-image-3

This allows you to specify what elements can be children of other elements. By default TinyMCE removes block elements from inline elements. Example:

<a href=”#”><div class=”thumb-image”><img src=”someimage.jpg” /></div></a>

Here is an example where maybe you want to display thumbs that are links to profiles, or products. The problem is by default TinyMCE will close the anchor tag before the div to prevent invalid markup, but that is functionality that is very common. So we adjust the acceptable child elements for the anchor tag and a few others as well. Again the first part is the “+”, this indicates we are adding acceptable child elements for the chosen tag. The next part is the tag type we wish to alter, and again the third part is the elements we want to allow inside of anchor tags. As you can see I added most block type elements, each separated with a pipe “|”. For more on this option see: http://www.tinymce.com/wiki.php/Configuration:valid_children

Next we will fix new line breaks creating paragraphs and we will instead have them create break tags. The two options we will add are “force_br_newlines: true” and “force_p_newlines: false”. (NOTE: you must set both of these for the br trick to work, if you only add one it will not work as expected.)

Overcoming-Magentos-WYSIWYG-Part-2-image-4

We simply add the two options from the image above and presto chango! Now when you’re in the editor and you press the “Enter” key, you will get a break tag and not a paragraph tag! Simple right!? For more on these options see:

http://www.tinymce.com/wiki.php/Configuration:force_p_newlines

http://www.tinymce.com/wiki.php/Configuration3x:force_br_newlines

Last, but by far not the least, (this one is actually my favorite) is the “forced_root_block” option.

Overcoming-Magentos-WYSIWYG-Part-2-image-5

Many times I have created static blocks in Magento when the only thing I want returned to me in my page is just text, just plain old text!! By default if you do not add any tags to the text in the editor TinyMCE will wrap your text in a “p” tag! Ugh! This caused me no small amount of headaches. This would break my layouts or force me to use the “strip_tags()” function in PHP, or wrap the text in a span. However, all of those workarounds ended up causing me a lot of hassle at one point or another. This option allows you to just put text in the editor without wrapping it in “p” tags for you. (NOTE: This fix only works if you follow the previous fix and make break tags the default for new lines.)

For more on this option see: http://www.tinymce.com/wiki.php/Configuration3x:forced_root_block

I don’t understand, this seems so easy! Why so much fuss?

Although these options are easy enough to set, it seems that majority of them only work when you set them all together! Don’t believe me? Play around with it for yourself and you will see what I am talking about! I hope this is useful and will save you the tons of headaches that I had to experience while figuring this out. Have fun editing!!

Have great WYSIWYG tricks or techniques? Share them in comments or tweet us @Pixafy! For more valuable insights, sign up for our FREE newsletter! 

[series_block]
Related articles:

[/series_block]