Jack McDade

Dealing with WYSIWYGs – Taming TinyMCE

Posted on 20. Jun, 2009 by Jack in Development, ExpressionEngine

“I hate most WYSIWYG editors. Why can’t they all be more like WordPress’s?”

I’ve heard this, or something similar, many times. I’ve both thought it myself and said it aloud. It shouldn’t be hard, right? While designing and developing ExpressionEngine websites, i try to avoid implementing them at all costs. However, I’ve eventually had to spend enough time taming them that maybe we can be friends. Or at least not enemies. Oh and newsflash. WordPress uses TinyMCE. They also have over 650 lines of javascript customizing it, but hey, nothing is keeping you from making your own tweaks.

There are two big players on the WYSIWYG scene. FCKeditor and TinyMCE. I’ll be focusing in on the later in this article. If anyone else has insights on FCKeditor, please post them in the comments. There are plenty other small ones, including jWYSIWYG (which i ported to ExpressionEngine, but i digress… it has it’s own issues). Also worth noting, there are two main ways of implementing TinyMCE in ExpressionEngine. Leevi Graham’s Extension, and the 1st party extension.

The Problem

There are 2 main problems with the default install of TinyMCE. The first: it’s ugly, bloated and unintuitive. The second: the code that might come out of it when clients take control. Let’s get to work:

The first step is customizing which buttons and features (including plugins) are on loaded. How this is done can depend on where the javascript is loaded (the tinyMCE.init() function), but the method is the same regardless. Parameters can be added inside the function which control what’s being loaded. I’ll show you what i use myself and then I can walk through what’s going on:

Where We’re Going:

Clean TinyMCE

mode : "textareas",
theme : "advanced",
skin  : "thebigreason",
plugins : "fullscreen",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_buttons1 : "formatselect,fontselect,fontsizeselect,separator,bold,italic,underline,separator,justifyleft,justifycenter,justifyright,bullist,numlist,separator,link,unlink,image,separator,code,separator,undo,redo,fullscreen",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : ""

Customizing Appearance and Theme: Parameters

• mode: This tells TinyMCE where to apply itself. If set to “textareas”… i think you get the idea. If you set it to “exact” you can target specific ids with the additional parameter -> elements: “first_id, second_id”
• theme: If you want to get custom, set this to “advanced”. It’s as easy as that. There’s a “simple”, but you lose a lot of functionality.
• skin: Skins can be be created or downloaded by others that have done the same. They usually consist of a few css files, some images, and a bit of javascript. They’ll go in the /tiny_mce/themes/advanced/skins/ directory. I really like TheBigReason’s skin — it’s clean and easy, utlizing the famfamfam silk icon set. Check it out
• plugins: There are number of cool functions to throw in here, from spellcheck and emoticons, to print and preview. Take a look at the whole list of plugins.
• theme_advanced_toolbar_location: Position the toolbar at the top of the textarea. Self explanitory.
• theme_advanced_toolbar_align: Left or right. Pick left. It’s better.
• theme_advanced_buttons1/2/3: The advanced theme, by default, has three rows of buttons. I myself prefer only one row, so I put all the buttons i want in the buttons1 parameter and leave 2 & 3 empty to prevent the defaults from sneaking back in. See the full list of TinyMCE buttons. can be found here. Just separate them by commas and use “separator” if you want to break the icons up. Feel free to drop in my list and see if that works for you.

Cleaning Up The Rendered Code

There are a few parameters here that can help you get more for less:

• fix_list_elements : true – This option enables you to specify that list elements UL/OL is to be converted to valid XHTML. This option is disabled by default.
• forced_root_block : false — This keeps block level elements, such as <strong> from being wrapped with <p> tags, if you need to prevent that.
• invalid_elements : “b,i,span” — Set any html elements you want to prevent being written. Not a bad idea at all. Conversely, there is a “valid_elements” parameter. Look at the defaults to see if you need to squash anything
• convert_fonts_to_spans : false — if you allow the user to set fonts, i would recommend this one, which prevents the depreciated font tag: <font size=”3″ face=”Comic Sans MS”>. USE THIS.

There are plenty–too many in fact–other parameters, but hopefully this will get you going in the right direction. Check out the full list if need be.

You can also customize the visual appearance of the redered in-editor code via the content.css file. You can find it here: tiny_mce/themes/advanced/skins/<your skin name>/content.css. Not a bad way to have your clients see a rough guess of what they’ll see on the site.

I plan on playing with creating my own theme(s) in the near future. We’ll see how that goes. If you’re ambitious, check out the documentation on that whole bag of apples.

Let me know if there is anything you’re trying to do in TinyMCE and maybe I can help you, and others, out. Hope this helps!

Tags: ExpressionEngine, open source, TinyMCE, wysiwyg