Posted 2009-03-27 in Guides
Here are the steps I took to create a new TinyMCE theme for TinyMCE 3.x. It isn't very hard to do, but the documentation is extremely out of date. You can tweak these all you want, but if you want to make a custom TinyMCE theme there isn't much available.
Warning: This is by no means guaranteed to be the right way, or even a good way to do this. I just started implementing TinyMCE for the first time. The skin system appears to let you customize things to a great extent, but this is my first attempt to create an entirely new theme. Now that that's out of the way…
1. Copy the default theme
It's easiest to use the default 'advanced' theme as a base for the new theme. Copy the 'advanced' theme folder found in 'tiny_mce/themes/' and give it a new name, for example 'mytheme'.
2. Edit the language file
There is one small edit required in the theme language file. For English (default):
Note: If you have multiple languages or are using a non-English language file just edit all of the appropriate files in 'mytheme/langs/'.
3. Setup the new editor template
The 'editor_template.js' file is the main theme file and requires the most changes, but it's a compressed file. To get the uncompressed version setup:
4. Edit the template
Now we need to edit the theme template with the new theme name and author info. Note the capitalization – check 'match case' or equivelant in your editor.
Here is the exact code used for the theme author information:
5. Using the new theme
If everything went okay so far, you should be ready to test the new theme. You would initialize your new editor from an HTML page like this (note the red areas which have been changed from the default example):
Now you can modify your theme to your heart's content!
I'm much more familiar with Xinha than TinyMCE, and this is my first whack at TinyMCE themes. I can't promise it's perfect but I'll try to keep this page updated as I experiment. Please let me know if anything is missing or incorrect.
Subscribe via RSS
Stay current with Scriptalicious news and subscribe in your favorite RSS reader.
Get the latest Scriptalicious news delivered to your inbox.
77 powerful SEO scripts for under $100.
Real-time Backlink Rank Checker script.