The TinyMCE Editor continues to pleasantly surprise me. I have two sites that I am working on at the moment. One needs to be maintainable by it’s owner who has many skills other other than computer related skills. The other is this one! I need to be able to specify styles (from an external CSS) while editing posts for such things as code examples etc. I may end up using configuring additional quicktags for this, but using TinyMce is clearly an option.
For the simple user option I wanted to remove any unnecessary styling options, so that the site would maintain a consistent style. I wanted the user to access to H1,H2 type formatting but not adhoc colours or fonts. We also did not need emoticons.
Wordpress (WP 2) uses the TinyMCE for it’s visual rich editor. The default use is a fairly basic one. However it is possible to configure it (see below). Labnotes has a piece of code that you can edit and install as a plugin. I downloaded that, changed it to remove the colour formatting options, renamed the file to correct the spelling and am using it on various sites. My version is here.
Before realising that WP 2.0 already had TinyMCE built in:
I implemented TinyMCE via Mudbombs wordpress 2.0 plugin. The configuration below is from mudbomb’s plugin in /plugins/wysi-wordpress/wordpress.js file which contains the call to TinyMCE and it’s configuration parameters. The configuration for WP 2 is very similar and is in the wordpress\wp-includes\js\tinymce\tiny_mce_gzip.php file.
TinyMCE has an “advanced” option. I switched that on, disabled the buttons I did not want and then the TinyMCE piece de resistance
for me was the ability to add your custom styles to the TinyMCE style selector. By disabling and then adding back the buttons in theme_advanced_buttons1_add or theme_advanced_buttons2_add, you can control where the buttons appear.
This is all done in the calling instruction.
Example:
tinyMCE.init({
mode : "exact",
theme : "advanced",
language : "en",
plugins : "imagebrowser,dictionary",
theme_advanced_disable : "hr,styleselect,strikethrough,
visualaid,anchor,zoom,
table,row_before,row_after,delete_row,separator,
col_before,col_after,delete_col,anchor,image,cleanup,
help,code,preview,sub,sup,separator,
charmap,removeformat,visualaid,forecolor,backcolor",
theme_advanced_buttons1_add : "link,unlink,separator,
imagebrowser,hr,separator,dictionary,separator,
cut,copy,paste,separator,undo,redo,separator,code",
relative_urls : false,
remove_script_host : false,
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_resizing : true,
theme_advanced_path_location : "bottom",
extended_valid_elements : "a[name|href|target|
title|onclick],
img[class|src|border=0|alt|title|
hspace|vspace|width|height|
align|onmouseover|onmouseout|name|style],
hr[class|width|size|noshade],font[color|background]",
elements : "content",
content_css : "http://..../style.css"
});