在ToolBar上添加一个listbox
<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 'mylistbox': var mlb = cm.createListBox('mylistbox', { title : 'My list box', onselect : function(v) { tinyMCE.activeEditor.windowManager.alert('Value selected:' + v); } }); // Add some values to the list box mlb.add('Some item 1', 'val1'); mlb.add('some item 2', 'val2'); mlb.add('some item 3', 'val3'); // Return the new listbox instance return mlb; case 'mysplitbutton': var c = cm.createSplitButton('mysplitbutton', { title : 'My split button', image : 'img/example.gif', onclick : function() { tinyMCE.activeEditor.windowManager.alert('Button was clicked.'); } }); c.onRenderMenu.add(function(c, m) { m.add({title : 'Some title', 'class' : 'mceMenuItemTitle'}).setDisabled(1); m.add({title : 'Some item 1', onclick : function() { tinyMCE.activeEditor.windowManager.alert('Some item 1 was clicked.'); }}); m.add({title : 'Some item 2', onclick : function() { tinyMCE.activeEditor.windowManager.alert('Some item 2 was clicked.'); }}); }); // Return the new splitbutton 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 listbox tinyMCE.init({ plugins : '-example', // - tells TinyMCE to skip the loading of the plugin mode : "textareas", theme : "advanced", }); </script> <form method="post" action="somepage"> <textarea name="content" style="width:100%"> </textarea> </form>
Menu button 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>