最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Dynamic menu for a RichCombo box in CKEditor - Stack Overflow

programmeradmin4浏览0评论

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.

Share Improve this question edited Jun 20, 2020 at 9:12 CommunityBot 11 silver badge asked Oct 15, 2014 at 14:17 roryokroryok 9,64519 gold badges81 silver badges139 bronze badges 3
  • 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
Add a ment  | 

2 Answers 2

Reset to default 4 +200

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/