Menu button example

This example shows you how to add an menu button with submenus, ones you click an item it will insert some contents into the editor.

HTML source

Below is all you need to setup the example.

<script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
// Creates a new plugin class and a custom listbox
tinymce.create('tinymce.plugins.ExamplePlugin', {
	createControl: function(n, cm) {
		switch (n) {
			case 'mymenubutton':
				var c = cm.createMenuButton('mymenubutton', {
					title : 'My menu button',
					image : 'img/example.gif',
					icons : false
				});

				c.onRenderMenu.add(function(c, m) {
					var sub;

					m.add({title : 'Some item 1', onclick : function() {
						tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'Some item 1');
					}});

					m.add({title : 'Some item 2', onclick : function() {
						tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'Some item 2');
					}});

					sub = m.addMenu({title : 'Some item 3'});

					sub.add({title : 'Some item 3.1', onclick : function() {
						tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'Some item 3.1');
					}});

					sub.add({title : 'Some item 3.2', onclick : function() {
						tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'Some item 3.2');
					}});
				});

				// Return the new menu button instance
				return c;
		}

		return null;
	}
});

// Register plugin with a short name
tinymce.PluginManager.add('example', tinymce.plugins.ExamplePlugin);

// Initialize TinyMCE with the new plugin and menu button
tinyMCE.init({
	plugins : '-example', // - tells TinyMCE to skip the loading of the plugin
	mode : "textareas",
	theme : "advanced",
	theme_advanced_buttons1 : "mymenubutton,bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright,justifyfull,bullist,numlist,undo,redo,link,unlink",
	theme_advanced_buttons2 : "",
	theme_advanced_buttons3 : "",
	theme_advanced_toolbar_location : "top",
	theme_advanced_toolbar_align : "left",
	theme_advanced_statusbar_location : "bottom"
});
</script>

<form method="post" action="somepage">
	<textarea name="content" style="width:100%">
	</textarea>
</form>