Search code examples
jquerypluginsckeditor

Custom richcombo loses selected item when unfocused or click inside the text area of ckeditor


this is the code of my custom plugin.

CKEDITOR.plugins.add('priority', {
    requires: ['richcombo'],
    init: function(editor) {
        var tags = [];
        // ajax call to load the the items

        editor.ui.addRichCombo('priority', {
            label: "Select Priority",
            title: "Select Priority",
            voiceLabel: "Select Priority",
            className: 'cke_format',

            panel: {
                css: [editor.config.contentsCss, CKEDITOR.skin.getPath("editor")],
                voiceLabel: editor.lang.panelVoiceLabel,
                multiSelect: false,
            },

            init: function() {
                this.startGroup("Priority Group1");
                //this.add('value', 'drop_text', 'drop_label');
                for (var this_tag in tags) {
                    this.add(tags[this_tag][0], tags[this_tag][1], tags[this_tag][2]);
                }
            },

            onClick: function(value) {
                editor.focus();
                this.setValue(value);
                editor.fire('saveSnapshot');
            }
        });
    }
});

unexpected behavior is when I select an element, then click inside text area for writing the combo selected item canceled, and display the default. I need to keep the selected item displayed.

I have the same issue in this question but the solution doesn't fix it


Solution

  • I opened the source file ckeditor.js, then I made unminify it using http://unminify.com/

    After debugging I found line calls setValue function and pass empty string to it, which causes losing the selected item after each selection in the run time.

    I stopped this line, and the problem solved with me, I don't know if stopping this line will affect another features or not; but I don't think that there are anybody need the plugin resets the control without his will and I checked all my needs, it doesn't affect them.

    enter image description here

    all you need to keep the selection after stopping above line, handle onlick event as below

            // add the menu to the editor
            editor.ui.addRichCombo('myCombo',
                {
                    label: "DefaultText",
                    title: "Title",
                    multiSelect: false,
                    panel: { css: [CKEDITOR.skin.getPath("editor")].concat(editor.config.contentsCss) },
                    init: function () {
                        //add items of the combo
                        for (var i in strings) {
                            this.add(strings[i][0], strings[i][1], strings[i][2]);
                        }
                    },
                    onClick: function (value) {
                        this.setValue(value, this._.items[value]);
                        // add your code
                    }
                });