tinymce

Question

में कस्टम ड्रॉप डाउन सूची जोड़ना मुझे tinymce में एक ड्रॉप डाउन सूची प्रदर्शित करना है। मैं किसी भी ट्यूटोरियल या किसी अच्छा उदाहरण खोजने के लिए googled लेकिन मैं सिर्फ इतना है कि कोड मिला:

// Adds a menu to the currently active editor instance 
var dm = tinyMCE.activeEditor.controlManager.createDropMenu('somemenu'); 

// Add some menu items 
dm.add({title : 'Menu 1', onclick : function() { 
    alert('Item 1 was clicked.'); 
}}); 

dm.add({title : 'Menu 2', onclick : function() { 
    alert('Item 2 was clicked.'); 
}}); 

// Adds a submenu 
var sub1 = dm.addMenu({title : 'Menu 3'}); 
sub1.add({title : 'Menu 1.1', onclick : function() { 
    alert('Item 1.1 was clicked.'); 
}}); 

// Adds a horizontal separator 
sub1.addSeparator(); 

sub1.add({title : 'Menu 1.2', onclick : function() { 
    alert('Item 1.2 was clicked.'); 
}}); 

// Adds a submenu to the submenu 
var sub2 = sub1.addMenu({title : 'Menu 1.3'}); 

// Adds items to the sub sub menu 
sub2.add({title : 'Menu 1.3.1', onclick : function() { 
    alert('Item 1.3.1 was clicked.'); 
}}); 

sub2.add({title : 'Menu 1.3.2', onclick : function() { 
    alert('Item 1.3.2 was clicked.'); 
}}); 

dm.add({title : 'Menu 4', onclick : function() { 
    alert('Item 3 was clicked.'); 
}}); 

// Display the menu at position 100, 100 
dm.showMenu(100, 100); 

इस कोड को इस सूची में नीचे एक बूंद बनाने के लिए लगता है, लेकिन मैं जहां इस कोड डाल करने के लिए पता नहीं है या करने के लिए इसका इस्तेमाल करने के लिए कैसे कस्टम ड्रॉप डाउन सूची प्रदर्शित करें। कृपया किसी को tinyMCE में कस्टम ड्रॉप डाउन सूची जोड़ने में मेरी सहायता करें।

Answer 1

प्लगइन http://www.tinymce.com/wiki.php/TinyMCE3x:Creating_a_plugin बनाने के लिए यहां TinyMCE के दस्तावेज़ हैं। मैं सिर्फ यह सीखने के लिए शुरू करूंगा कि प्लगइन्स कैसे काम करते हैं। फिर ड्रॉपडाउन मेनू बनाने के लिए बेहतर महसूस करने के लिए contextmenu प्लगइन देखें। इसे कॉपी करें, और अपनी जरूरतों को पूरा करने के लिए इसे संशोधित करें।

Answer 2

पहले, प्लगइन रजिस्टर:

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 something with this new dropdown', 
     menu: menuItems, 
     context: 'insert' 
    }); 
}); 

फिर प्लगइन का अपनी सूची में जोड़ने जब आप अपने संपादक को आरंभ:

$('#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 
}); 

Answer 3

var myListItems = ['Item1', 'Item2', 'Item3', 'Item4', 'Item5', 'Item6', 'Item7', 
     'Item8', 'Item9', 'Item10', 'Item11']; 

tinymce.PluginManager.add('mypluginname', function (editor) { 
    var menuItems = []; 
    tinymce.each(myListItems, function (myListItemName) { 
     menuItems.push({ 
      text: myListItemName, 
      onclick: function() { 
       editor.insertContent(myListItemName); 
      } 
     }); 
    }); 

    editor.addButton('mypluginname', { 
     type: 'menubutton', 
     text: 'My Plugin Name', 
     icon: 'code', 
     menu: menuItems 
    }); 

    editor.addMenuItem('mypluginnameDropDownMenu', { 
     icon: 'code', 
     text: 'My Plugin Name', 
     menu: menuItems, 
     context: 'insert', 
     prependToContext: true 
    }); 
}); 

फिर प्लगइन की अपनी सूची के लिए जब आप प्रारंभ करने में जोड़ने आपका संपादक:

$('#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", 
    "paste textcolor","mypluginname" 
], 
toolbar1: "undo redo | forecolor backcolor | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image", 
image_advtab: true 
});