2

我正在尝试找出 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

4

1 回答 1

2

您将需要添加一个 tinymce 按钮，该按钮将读取选定的值。这是一个工作的tinymce小提琴，它应该指向正确的方向： http: //fiddle.tinymce.com/gJcaab

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

于 2013-02-11T12:14:27.693 回答