adding custom drop down list in tinymce - drop-down-menu

Question

I have to display a drop down list in tinymce. I googled to find any tutorial or any good example but I just found that code:
// 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);
This code seems to create a drop down list but I don't know where to put this code or how to use it to display custom drop down list.
Kindly somebody help me in adding custom drop down list in tinyMCE.

Answer 1

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
});
});
Then add to your list of plugin when you initialize your 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",
"paste textcolor","mypluginname"
],
toolbar1: "undo redo | forecolor backcolor | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
image_advtab: true
});
Here's how panel button with dropdown looks like:

Answer 2

First, register the 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 something with this new dropdown',
menu: menuItems,
context: 'insert'
});
});
Then add to your list of plugin when you initialize your 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
});

Answer 3

Here is TinyMCE's documentation for creating a plugin http://www.tinymce.com/wiki.php/TinyMCE3x:Creating_a_plugin. I would start with that just to learn how plugins work. Then to get a better feel for creating a dropdown menu look at the contextmenu plugin. Copy it, and modify it to meet your needs.