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按钮。这是一个工作的小小提琴，它应该指向正确的方向：http://fiddle.tinymce.com/gJcaab

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

TinyMCE - 通过格式化插入组合框和选定的值

1 个答案: