CODEWITHSUNDEEP
javascriptformattingtinymce
Kenny Bones
Kenny Bones

Reputation: 5129

TinyMCE - Insert combobox and selected value with formatting

I'm trying to figure out TinyMCE. And I've looked at the examples, but it seems the examples use different ways of achieving the tasks. And I'm having a hard time putting it together to get what I need.

Basically, I need two comboboxes with a set of values. And a third button to insert the selected value from both the first comboboxes. And I want to insert these with a specific CSS class for formatting, if possible (I reckon in is).

Here's the code I've got so far. I'd really appreciate some help in this!

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

I'm not even sure if I approached this task the correct way. I've done this exact this before in VB.NET, but Javascript really confuses me. It's because of those damn brackets :p

Upvotes: 2

Views: 2837

Answers (1)

Thariama
Thariama

Reputation: 50832

You will need to add a tinymce button which will read the selected values. Here is a working tinymce fiddle which should point you into the correct direction: http://fiddle.tinymce.com/gJcaab

If you encounter any problems - let me know.

Upvotes: 2

Related Questions