2

私はTinyMCEを理解しようとしています。例を見てきましたが、例はタスクを達成するためにさまざまな方法を使用しているようです。そして、必要なものを集めるのに苦労しています。

基本的に、一連の値を持つ 2 つのコンボボックスが必要です。そして、最初の両方のコンボボックスから選択した値を挿入するための 3 番目のボタン。そして、可能であれば、書式設定のために特定の 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 に答える