aggiungendo un elenco a discesa personalizzato in tinymce

Question

Devo visualizzare un elenco a discesa in tinymce. Ho cercato su google per trovare qualsiasi tutorial o qualsiasi buon esempio, ma ho appena scoperto che il codice:

// 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); 

Questo codice sembra creare un elenco a discesa, ma non so dove mettere questo codice o il modo di usarlo per mostra un elenco a discesa personalizzato. Gentilmente qualcuno mi aiuta ad aggiungere un elenco a discesa personalizzato in tinyMCE.

Answer 1

Questa è la documentazione di TinyMCE per la creazione di un plug-in http://www.tinymce.com/wiki.php/TinyMCE3x:Creating_a_plugin. Vorrei iniziare con questo solo per sapere come funzionano i plugin. Quindi, per avere un'idea migliore della creazione di un menu a discesa, guarda il plug-in del menu contestuale. Copialo e modificalo per soddisfare le tue esigenze.

Answer 2

In primo luogo, registrare il 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' 
    }); 
}); 

Quindi aggiungere alla tua lista di plug-in quando si inizializza il vostro 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

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 
    }); 
}); 

Quindi aggiungere alla tua lista di plug-in quando si inizializza il tuo editore:

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

Ecco come pulsante del pannello con discesa appare come: