Tuesday
Oct032006
Expanding TinyMCE for WordPress
Tuesday, October 3, 2006 at 19:04
The default TinyMCE rich editor for WordPress lacks a lot of functionality (IMO). I wanted to use other fonts, and be able to change font sizes in posts.
At first I started to look for an alternative rich text editor for WordPress, but I didn't find any usefull alternatives. Most of them are suitable for older WordPress versions, and are not compatible with the latest WordPress releases.
While I was developing my former blog in Coldfusion, I used FCKEditor. This editor had the possibility to add extra functionality by editting the source files. So I started digging through the sources of the WordPress files, and found the file where the TinyMCE configuration was stored.
Although the changes are not that hard, it would be nice to have a more user friendly interface for changing the capabilities of the rich text editor. The following paragraphs explain the changes I made to add fonts and font sizes to the editor.
The file for displaying the editor is called "tiny_mce_gzip.php" (located in wp-includes/js/tinymce/). Open this file in a texteditor (BBEdit/Notepad/UltraEdit), or a HTML editor (I used Macromedia Dreamweaver).
Find the string "mce_buttons" (without the quotes). It's located near the end of the file. The line that holds the string also defines the buttons / options for the TinyMCE editor. The default line is:
This line can be editted, to add extra functionality. The problem is that the file doesn't mention all possible options, so I had to do some reseach on the TinyMCE editor itself. On the website are some examples showing the capabilities of the editor. The TinyMCE website has an overview of the available buttons / options which can be used with the editor. Note that not all options may work with WordPress.
I added "fontselect", "fontsizeselect", and "forecolor" to the editor;
After editting the file, save it and launch the WordPress admin page and start creating posts with the newly added functionality.
UPDATE: it seems that the added functionality removes the TinyMCE functions if you use Safari as a browser :( (this is probably a "feature"). No problemo if you use FireFox
UPDATE 2: This won't work with Wordpress 2.1 :(. You have to do the following if you want extra functionality in Wordpress 2.1:
This adds the ability to change fonts and use colors in your blogs. There is also a third line you can use to add other stuff, but you got to figure that one out for yourself.
At first I started to look for an alternative rich text editor for WordPress, but I didn't find any usefull alternatives. Most of them are suitable for older WordPress versions, and are not compatible with the latest WordPress releases.
While I was developing my former blog in Coldfusion, I used FCKEditor. This editor had the possibility to add extra functionality by editting the source files. So I started digging through the sources of the WordPress files, and found the file where the TinyMCE configuration was stored.
Although the changes are not that hard, it would be nice to have a more user friendly interface for changing the capabilities of the rich text editor. The following paragraphs explain the changes I made to add fonts and font sizes to the editor.
The file for displaying the editor is called "tiny_mce_gzip.php" (located in wp-includes/js/tinymce/). Open this file in a texteditor (BBEdit/Notepad/UltraEdit), or a HTML editor (I used Macromedia Dreamweaver).
Find the string "mce_buttons" (without the quotes). It's located near the end of the file. The line that holds the string also defines the buttons / options for the TinyMCE editor. The default line is:
$mce_buttons = apply_filters('mce_buttons', array('bold', 'italic', 'strikethrough', 'separator', 'bullist', 'numlist', 'outdent', 'indent', 'separator', 'justifyleft', 'justifycenter', 'justifyright' ,'separator', 'link', 'unlink', 'image', 'wordpress', 'separator', 'undo', 'redo', 'code', 'wphelp'));
This line can be editted, to add extra functionality. The problem is that the file doesn't mention all possible options, so I had to do some reseach on the TinyMCE editor itself. On the website are some examples showing the capabilities of the editor. The TinyMCE website has an overview of the available buttons / options which can be used with the editor. Note that not all options may work with WordPress.
I added "fontselect", "fontsizeselect", and "forecolor" to the editor;
$mce_buttons = apply_filters('mce_buttons', array('bold', 'italic', 'strikethrough', 'fontselect', 'fontsizeselect', 'forecolor', 'separator', 'bullist', 'numlist', 'outdent', 'indent', 'separator', 'justifyleft', 'justifycenter', 'justifyright' ,'separator', 'link', 'unlink', 'image', 'wordpress', 'separator', 'undo', 'redo', 'code', 'wphelp'));
After editting the file, save it and launch the WordPress admin page and start creating posts with the newly added functionality.
UPDATE: it seems that the added functionality removes the TinyMCE functions if you use Safari as a browser :( (this is probably a "feature"). No problemo if you use FireFox
UPDATE 2: This won't work with Wordpress 2.1 :(. You have to do the following if you want extra functionality in Wordpress 2.1:
- Open the tiny_mce_config.php (located in wp-includes/js/tinymce/).
- Find the line that starts with $mce_buttons_2 = apply_filters (around line 34)
- Add extra functions on that line
Example: $mce_buttons_2 = apply_filters('mce_buttons_2', array('formatselect', 'fontselect', 'fontsizeselect', 'styleselect', 'separator', 'forecolor', 'backcolor'));
This adds the ability to change fonts and use colors in your blogs. There is also a third line you can use to add other stuff, but you got to figure that one out for yourself.
Reader Comments