Creating a New TinyMCE Theme for 3.x

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…

All you need is the latest download and a text editor with basic search & replace. You might even get away with using the Search & Replace function on the TinyMCE demo (the binoculars icon).

You will need to know some basic HTML, CSS and JavaScript to follow along. For the most part it's pretty easy.

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):

Open 'mytheme/langs/en.js' in your editor
Change the text in the first line from 'en.advanced' to 'en.mytheme'
Save and close the file

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:

Delete the file 'mytheme/editor_template.js'
Rename 'mytheme/editor_template_src.js' to 'mytheme/editor_template.js'

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.

Open 'mytheme/editor_template.js' in your editor
Replace all instances of 'AdvancedTheme' with 'MyTheme'
Replace all instances of 'advanced' with 'mytheme'
Change author info around lines 460-467 (see code below)
Save and close the file

Here is the exact code used for the theme author information:

		getInfo : function() {
			return {
				longname : 'Advanced theme',
				author : 'Moxiecode Systems AB',
				authorurl : 'http://tinymce.moxiecode.com',
				version : tinymce.majorVersion + "." + tinymce.minorVersion
			}
		},

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):

<script type="text/javascript" src="/jscripts/tiny_mce/tiny_mce.js"></script>

<script type="text/javascript">
	tinyMCE.init({
		// General options
		mode : "textareas",
		theme : "<strong>mytheme</strong>",
		plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

		// Theme options
		theme_<strong>mytheme</strong>_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
		theme_<strong>mytheme</strong>_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
		theme_<strong>mytheme</strong>_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
		theme_<strong>mytheme</strong>_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
		theme_<strong>mytheme</strong>_toolbar_location : "top",
		theme_<strong>mytheme</strong>_toolbar_align : "left",
		theme_<strong>mytheme</strong>_statusbar_location : "bottom",
		theme_<strong>mytheme</strong>_resizing : true,

		// Example content CSS (should be your site CSS)
		content_css : "css/content.css",

		// Drop lists for link/image/media/template dialogs
		template_external_list_url : "lists/template_list.js",
		external_link_list_url : "lists/link_list.js",
		external_image_list_url : "lists/image_list.js",
		media_external_list_url : "lists/media_list.js",

		// Replace values for the template plugin
		template_replace_values : {
			username : "Some User",
			staffid : "991234"
		}
	});

</script>

Now you can modify your theme to your heart's content!

When you're ready to deploy your new theme, you can use the JavaScript compressor to compress your 'editor_template.js' file down. First make a copy of the uncompressed version called 'editor_template_src.js'.

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.

Tags: tinymce, wysiwyg, themes, scripts, JavaScript, guides

Permalink: http://www.scriptalicious.com/blog/2009/03/creating-a-new-tinymce-theme-for-3x/

Scriptalicious Blog