Add TinyMCE code button

I had quite a few problems adding the htmlCode button to a fairly old copy of TinyMCE (I think around version 2.x).

All is resolved now and this is what I had to change:

Both changes are made in “editor_template.js” file, I also swopped the 2 files so that I could include and edit editor_template.js instead of the compressed “editor_template_src.js.

Using the advanced theme I added the following line near the top of the file:

['cleanup', 'cleanup.gif', 'lang_cleanup_desc', 'mceCleanup']
Code language: JSON / JSON with Comments (json)
_buttons : [ ['_bold', '{$lang_bold_img}', 'lang_bold_desc', 'bold'], ['italic', '{$lang_italic_img}', 'lang_italic_desc', 'Italic'], ['underline', '{$lang_underline_img}', 'lang_underline_desc', 'Underline'], ['bullist', 'bullist.gif', 'lang_bullist_desc', 'InsertUnorderedList'], ['numlist', 'numlist.gif', 'lang_numlist_desc', 'InsertOrderedList'], ['cut', 'cut.gif', 'lang_cut_desc', 'Cut'], ['copy', 'copy.gif', 'lang_copy_desc', 'Copy'], ['paste', 'paste.gif', 'lang_paste_desc', 'Paste'], ['undo', 'undo.gif', 'lang_undo_desc', 'Undo'], ['redo', 'redo.gif', 'lang_redo_desc', 'Redo'], ['link', 'link.gif', 'lang_link_desc', 'mceLink', true], ['unlink', 'unlink.gif', 'lang_unlink_desc', 'unlink'], ['code', 'code.gif', 'lang_theme_code_desc', 'mceCodeEditor'], ['cleanup', 'cleanup.gif', 'lang_cleanup_desc', 'mceCleanup'] ],
Code language: JavaScript (javascript)

Then in order for it to be available to the layout I added the ‘seperator’ and ‘code’ to the end of the layoutManager on about line 551.

var defVals = { theme_advanced_buttons1 :"undo,redo,separator,link,unlink,separator,cleanup,separator,code" };
Code language: JavaScript (javascript)

Have any strange tinyMCE questions? Ask, perhaps I can help!

Notify of
Oldest Most Voted
Inline Feedbacks
View all comments
Joya Solliday
Joya Solliday
9 years ago

Wow! How amazing this was. Like Marcelle, I really enjoyed that you actually took the D/s as a single unit. The result was just too damn hot!

10 years ago


I want to write css and html code when I edit in HTML mode, but the editor remove all own css. What can I do, if the editor’s Edit CSS Stlye isn’t enogh for me?

P.s.: Sorr for my Englis. 🙂