adding custom drop down list in tinymce -
i have display drop down list in tinymce. googled find tutorial or example found code:
// adds menu active editor instance var dm = tinymce.activeeditor.controlmanager.createdropmenu('somemenu'); // add menu items dm.add({title : 'menu 1', onclick : function() { alert('item 1 clicked.'); }}); dm.add({title : 'menu 2', onclick : function() { alert('item 2 clicked.'); }}); // adds submenu var sub1 = dm.addmenu({title : 'menu 3'}); sub1.add({title : 'menu 1.1', onclick : function() { alert('item 1.1 clicked.'); }}); // adds horizontal separator sub1.addseparator(); sub1.add({title : 'menu 1.2', onclick : function() { alert('item 1.2 clicked.'); }}); // adds submenu submenu var sub2 = sub1.addmenu({title : 'menu 1.3'}); // adds items sub sub menu sub2.add({title : 'menu 1.3.1', onclick : function() { alert('item 1.3.1 clicked.'); }}); sub2.add({title : 'menu 1.3.2', onclick : function() { alert('item 1.3.2 clicked.'); }}); dm.add({title : 'menu 4', onclick : function() { alert('item 3 clicked.'); }}); // display menu @ position 100, 100 dm.showmenu(100, 100); this code seems create drop down list don't know put code or how use display custom drop down list. kindly me in adding custom drop down list in tinymce.
first, register plugin:
var mylistitems = ['item1','item2']; tinymce.pluginmanager.add('mynewpluginname', function(editor) { var menuitems = []; tinymce.each(mylistitems, function(mylistitemname) { menuitems.push({ text: mylistitemname, onclick: function() { editor.insertcontent(mylistitemname); } }); }); editor.addmenuitem('insertvalueofmynewdropdown', { icon: 'date', text: 'do new dropdown', menu: menuitems, context: 'insert' }); }); then add list of plugin when initialize editor:
$('#mytesxtarea').tinymce({ theme: "modern", convert_urls: false, height: 100, plugins: [ "advlist autolink lists link image charmap print preview hr anchor pagebreak", "searchreplace wordcount visualblocks visualchars code fullscreen", "insertdatetime nonbreaking save table contextmenu directionality", "mynewpluginname paste textcolor" ], toolbar1: "undo redo | forecolor backcolor | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image", image_advtab: true });
Comments
Post a Comment