{ // Normal configuration ... mode : "textareas", theme : "advanced", theme_advanced_buttons1 : "mybutton," + "mybutton2," + "mybutton3," + "|,bold,italic,underline," + "|,bullist,numlist," + "|,undo,redo,code", theme_advanced_buttons2 : "", theme_advanced_buttons3 : "", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", // Extensions: first add tags for person, place, org custom_elements : "-person,-place,-org", extended_valid_elements : "person,place,org", // Then add buttons for them setup : function(ed) { // Add custom buttons ed.addButton('mybutton', { title : 'Tag as name of person', image : '../../../lib/xsltforms-1.0RC/scripts/tinymce_3.4.6/plugins/emotions/img/smiley-cool.gif', onclick : function() { ed.focus(); ed.selection.setContent( '<person>' + ed.selection.getContent() + '</person>'); ed.formatter.apply('person_format'); } }); ed.addButton('mybutton2', { title : 'Tag as placename', image : '../../../lib/xsltforms-1.0RC/scripts/tinymce_3.4.6/plugins/emotions/img/smiley-smile.gif', onclick : function() { // Add you own code to execute something on click ed.focus(); ed.selection.setContent( '<place>' + ed.selection.getContent() + '</place>'); ed.formatter.apply('place_format'); } }); ed.addButton('mybutton3', { title : 'Tag as organization', image : 'http://blackmesatech.com/lib/xsltforms-1.0RC/scripts/tinymce_3.4.6/plugins/emotions/img/smiley-tongue-out.gif', onclick : function() { ed.focus(); ed.selection.setContent( '<org>' + ed.selection.getContent() + '</org>'); ed.formatter.apply('org_format'); } }); } } <p>At that time, Wittgenstein was living in Cambridge.</p>

Test case

This page illustrates a simple extension to TinyMCE: new buttons are added to the tool bar which tag selected text using non-HTML elements person, place, and org.

The problem is that the buttons do not appear. Compare the TinyMCE-only version of this test case, in which the buttons do appear.