hinzufügen von benutzerdefinierten Dropdown-Liste in tinymce

Habe ich die Anzeige einer drop-down-Liste in tinymce. Ich googeln, um jede übung oder jedes gute Beispiel, aber ich habe gerade festgestellt, dass-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);

Dieser code scheint auf ein drop-down-Liste, aber ich weiß nicht wo man diesen code, oder, wie Sie es verwenden, um die Anzeige von benutzerdefinierten Dropdown-Liste.
Freundlicherweise jemand helfen mich in das hinzufügen von benutzerdefinierten Dropdown-Liste in tinyMCE.

ist es der TinyMCE-4b oder 3.5 ?
Ich bin mit TinyMCE 4b aber nicht sicher über dieses-code nahm ich einfach diesen code aus tinyMCE.com .
Wo wollen Sie in der dropdown-Liste angezeigt werden soll(Menü "Bearbeiten" - Fenster)?
ja. wie kann ich das tun?
Das Beispiel, das Sie oben aufgeführt sieht aus wie seine von TinyMCE 3. Seine ganz ein bisschen anders zwischen den zwei code-Basen. Ich kann Ihnen zeigen, es zu tun für die 3.x, aber ich bin nicht so vertraut mit tinyMCE 4.
Ich kann Umschalten auf TinyMCE 3.x. Bitte helfen Sie mir oder geben mir gute Beispiel dafür .Dank

InformationsquelleAutor Rabeel | 2013-05-15

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

Dann fügen Sie Sie zur Liste der plugins, wenn Sie Sie initialisieren 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
});

Hier ist, wie panel button mit dropdown aussieht:

hinzufügen von benutzerdefinierten Dropdown-Liste in tinymce

Erklären Sie Ihre Antwort? Das wird helfen, andere, die den code sehen und wollen es anwenden, um Ihre eigene Situation.
Ja warum nicht.. Auf editor.addMenuItem es ist das hinzufügen eines Menüpunkt einfügen-Menü von tinymce und editor.addButton es ist das hinzufügen eines Menüpunktes Taste auf die Symbolleiste
Für diejenigen, die kämpfen, um zu verstehen, was bedeutet prependToContext option bedeuten ich den link.

InformationsquelleAutor Atul Rungta

Ersten registrieren des plugins:

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

Dann fügen Sie Sie zur Liste der plugins, wenn Sie Sie initialisieren 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
});

InformationsquelleAutor kdelmonte

0

Hier ist der TinyMCE-Dokumentation für ein plugin erstellen http://www.tinymce.com/wiki.php/TinyMCE3x:Creating_a_plugin. Ich würde beginnen mit, nur um zu lernen, wie plugins arbeiten. Dann, um ein besseres Gefühl für das erstellen eines dropdown-Menü, Blick auf die contextmenu-plugin. Kopieren und modifizieren, um Ihre Bedürfnisse zu erfüllen.
- Ich Suche im contextmenu-plugin-code und ich kann nicht verstehen, wie &, welche Aktion ausgelöst wird, wenn Sie klicken Sie auf Menüpunkt.
- Hmm.. es scheint, dass es so einfach wie das hinzufügen onclick Eigenschaft Menüpunkt.
InformationsquelleAutor loyalBrown

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.