The TinyMCE is the WYSIWYG HTML editor I use in my applications. Its purpose is to replace textarea fields with an editor that offers a variety of features. You can get an idea of its capabilities from the size of the toolbar below:
There are 94 buttons in total. In one of my applications, I used 41 of these buttons. While updating, I decided to trim down the number of buttons, since it is easy to see that most of them are rarely used. After briefly reviewing the features, I reconfigured the toolbar as follows:
- I don’t allow underlining, so users don’t get into the bad habit of underlining more text than necessary.
- I deliberately left out the alignment toolbar, since the alignment convention I use in my applications is left-aligned.
- I chose not to use the formatting list-box section because sizes and colors are standardized. I may enable the styles item in the future, but users will need to understand that it applies a predefined format.
- I thought the copy and paste section was unnecessary, since users generally use Ctrl+C and Ctrl+V anyway. I make it clear that they should copy from Word into Notepad to remove the “junk” (formatting characters), then copy the unformatted content from Notepad and paste it into the editor.
- I have nothing to add about the links and images section, since it is essential.
- I thought it would be useful to keep the subscript and superscript buttons for occasional needs, as well as the insert-symbol button.
- In the next-to-last section, I keep the horizontal rule for separating sections, the table button (which is very useful when used appropriately), and a button that removes formatting. I find that last one quite helpful, so ordinary users don’t have to access the HTML code to make a change. Finally, the HTML editor is essential, since some things can only be “fixed by hand.”
- I finish the toolbar on the far right with the preview button, so users can get an idea of how the text will look.
The result is a very compact toolbar. You can see the configuration script below:
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "table,save,layer,advhr,inlinepopups,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,flash,searchreplace,print,paste,directionality,fullscreen,noneditable,contextmenu,wordcount",
theme_advanced_buttons1 : "bold,italic, strikethrough,|,bullist,numlist,|,undo,redo,|,link,unlink,anchor,image,|,sub,sup,charmap,|,hr,table,removeformat,code,|,preview",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true
});
I’d like to mention two plugins in particular that I add to the script:
wordcount— a word counter. I manage a scientific-article system that will use this feature to make it easier for users to check whether their text is within the word limit.inlinepopups— I could no longer stand the old version opening a new popup window every time an image or link was added. This plugin greatly improves usability.
Now I’d like to hear your opinion. What kind of editor do you use, and why did you choose it? Maybe I’ll switch editors after hearing your argument!