javascript - TinyMCE - 插入组合框和选定的值与格式

Question

我正在尝试弄清楚 TinyMCE。我已经查看了这些示例，但这些示例似乎使用了不同的方式来完成任务。我很难将它们组合在一起以获得我需要的东西。

基本上，我需要两个带有一组值的组合框。第三个按钮用于插入第一个组合框中选定的值。如果可能的话，我想用特定的 CSS 类插入它们以进行格式化(我认为是)。

这是我到目前为止得到的代码。我真的很感激一些帮助!

// Creates a new plugin class and a custom listbox
tinymce.create('tinymce.plugins.ExamplePlugin', {
    createControl: function(n, cm) {
        switch (n) {
            case 'comboboxChordsPrimary':
                var mlb = cm.createListBox('comboboxChordsPrimary', {
                     title : 'Akkorder',
                     onselect : function(v) {
                         tinyMCE.activeEditor.windowManager.alert('Value selected:' + v);
                     }
                });

                // Add some values to the list box
                mlb.add('C', 'C');
                mlb.add('C#-Db', 'C#-Db');
                mlb.add('D', 'D');
                mlb.add('D# -Eb', 'D# -Eb');
                mlb.add('E', 'E');
                mlb.add('F', 'F');
                mlb.add('F# -Gb', 'F# -Gb');
                mlb.add('G# -Ab', 'G# -Ab');
                mlb.add('A', 'A');
                mlb.add('A# -Bb', 'A# -Bb');
                mlb.add('B', 'B');

                // Return the new listbox instance
                return mlb;

        case 'comboboxChordsSecondary':
                var mlb2 = cm.createListBox('comboboxChordsSecondary', {
                     title : 'Akkorder',
                     onselect : function(v) {
                         tinyMCE.activeEditor.windowManager.alert('Value selected:' + v);
                     }
                });

                // Add some values to the list box
                mlb2.add(' ', ' ');
                mlb2.add('m', 'm');
                mlb2.add('dim', 'dim');
                mlb2.add('aug', 'aug');
                mlb2.add('7', '7');
                mlb2.add('m7', 'm7');
                mlb2.add('maj7', 'maj7');

                // Return the new listbox instance
                return mlb2;

        case 'btnAddChord':
                var mlb3 = cm.createButton('btnAddChord', {
                     title : 'Add',
                     onselect : function(v) {
            cm.focus();
            cm.selection.setContent(comboboxChordsPrimary.value + comboboxChordsSecondary.value);
                     }
                });

                // Return the new listbox instance
                return mlb3;

        }   

        return null;
    }
});

// Register plugin with a short name
tinymce.PluginManager.add('example', tinymce.plugins.ExamplePlugin);

// Initialize TinyMCE with the new plugin and listbox
tinyMCE.init({
    plugins : '-example', // - tells TinyMCE to skip the loading of the plugin
    mode : "textareas",
    theme : "advanced",
    theme_advanced_buttons1 : "comboboxChordsPrimary,comboboxChordsSecondary,btnAddChord,bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright,justifyfull,bullist,numlist,undo,redo,link,unlink",
    theme_advanced_buttons2 : "",
    theme_advanced_buttons3 : "",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom"    
});

我什至不确定我是否以正确的方式完成这项任务。我以前在 VB.NET 中也做过这样的事情，但 Javascript 确实让我很困惑。这是因为那些该死的括号:p

Answer 1

您需要添加一个tinymce按钮来读取所选值。 这是一个有效的tinymce fiddle ，它应该为您指明正确的方向:http://fiddle.tinymce.com/gJcaab

如果您遇到任何问题 - 请告诉我。