I've written a plugin which adds a RichCombo box to my CKEditor. I want to be able to update the content in the ListBox within this RichCombo

Here's my code.

var merge_fields = [];

CKEDITOR.plugins.add('mergefields',
{
    requires: ['richbo'], //, 'styles' ],
    init: function (editor) {
        var config = editor.config,
           lang = editor.lang.format;

        // Gets the list of tags from the settings.
        var tags = merge_fields; //new Array();

        // Create style objects for all defined styles.
        editor.ui.addRichCombo('tokens',
        {
            label: "Merge",
            title: "title",
            voiceLabel: "voiceLabel",
            className: 'cke_format',
            multiSelect: false,

            panel:
            {
                css: [config.contentsCss, CKEDITOR.getUrl(CKEDITOR.skin.getPath('editor') + 'editor.css')],
                voiceLabel: lang.panelVoiceLabel
            },

            init: function () {
                // this.startGroup("mergefields");
                for (var this_tag in tags) {
                    this.add(tags[this_tag], tags[this_tag], tags[this_tag]);
                }
            },

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

Unfortunately this list is not update when merge_fields changes. Is there a way to reinitialize the plugin, or failing that remove it and re-add it with updated content?

Note Id prefer NOT to have to remove the entire editor and replace it, as this looks very unpleasant to the user

UPDATE

As requested, here's a jsfiddle to help

/

In this JSFiddle, you'll see that the menu is dynamically created the first time it is accessed. It should should the checkboxes which are selected. However, every subsequent time it is accessed, it keeps the same values and is not updated. The only way to update it is to reinitialise the editor using the reinit button I have provided, but this causes the editor to disappear and reappear, so I don't want to have to do this.

200 points of a bounty to someone who can make the dropdown dynamically update EVERY TIME it is called.

I've written a plugin which adds a RichCombo box to my CKEditor. I want to be able to update the content in the ListBox within this RichCombo

Here's my code.

var merge_fields = [];

CKEDITOR.plugins.add('mergefields',
{
    requires: ['richbo'], //, 'styles' ],
    init: function (editor) {
        var config = editor.config,
           lang = editor.lang.format;

        // Gets the list of tags from the settings.
        var tags = merge_fields; //new Array();

        // Create style objects for all defined styles.
        editor.ui.addRichCombo('tokens',
        {
            label: "Merge",
            title: "title",
            voiceLabel: "voiceLabel",
            className: 'cke_format',
            multiSelect: false,

            panel:
            {
                css: [config.contentsCss, CKEDITOR.getUrl(CKEDITOR.skin.getPath('editor') + 'editor.css')],
                voiceLabel: lang.panelVoiceLabel
            },

            init: function () {
                // this.startGroup("mergefields");
                for (var this_tag in tags) {
                    this.add(tags[this_tag], tags[this_tag], tags[this_tag]);
                }
            },

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

Unfortunately this list is not update when merge_fields changes. Is there a way to reinitialize the plugin, or failing that remove it and re-add it with updated content?

Note Id prefer NOT to have to remove the entire editor and replace it, as this looks very unpleasant to the user

UPDATE

As requested, here's a jsfiddle to help

http://jsfiddle/q8r0dkc4/

In this JSFiddle, you'll see that the menu is dynamically created the first time it is accessed. It should should the checkboxes which are selected. However, every subsequent time it is accessed, it keeps the same values and is not updated. The only way to update it is to reinitialise the editor using the reinit button I have provided, but this causes the editor to disappear and reappear, so I don't want to have to do this.

200 points of a bounty to someone who can make the dropdown dynamically update EVERY TIME it is called.

• javascript
• jquery
• ckeditor

• 1 This looks like it might help: stackoverflow./questions/7762810/… – morloch Commented Oct 27, 2014 at 9:02
• that doesn't help for me. Any of the dynamic solutions I've tried only refresh ONCE. I need mine to refresh as many times as necessary – roryok Commented Apr 17, 2015 at 19:50
• Can you add something to jsFiddle so that we have some thing to work with, rather than having to create everything from scratch? – Siva Commented Apr 17, 2015 at 22:26

2 Answers 2

How about using CKEditors custom events something like this ?

First get reference to CKEditors instance

var myinstance = CKEDITOR.instances.editor1;

Since the checkboxes are outside the scope of CKEditor add a change handler to checkboxes

$(':checkbox').change(function () {
    myinstance.fire('updateList'); // here is where you will fire the custom event
});

Inside plugin definition add a event listener on the editor like this

editor.on("updateList", function () { // this is the checkbox change listener
  self.buildList(); // the entire build is created again here
});

Instead of directly attaching events on checkboxes (which are outside the scope of CKEditor) inside the plugin, I am using CKEditor's custom events. Now the editor instance and checkboxes are decoupled.

Here is a DEMO

Hope this helps

Update

Option 2

Plugin's methods can directly be called like this

$(':checkbox').change(function () {
    CKEDITOR.instances.editor1.ui.instances.Merge.buildList(); //this method should build the entire list again
});

Even though this seems very straightforward, I don't think it is pletely decoupled. (But still works)

Here is a demo for option 2

I think I've got a fix for you.

In your richCombo's init function add this line: $('input').on('click', rebuildList);

Pretty simple JQuery fix, but every time I click those input boxes it will rebuild the list.

Fiddle for proof: https://jsfiddle/q8r0dkc4/7/