Search code examples
javascriptckeditor

Update the Label of a RichCombo according to Selection - CKEditor

I have a custom RichCombo to allow Font selection. It goes through some data and creates its options, while the "special feature" consists of spans with the corresponding font-family set, instead of just plain text.

Font Selector

Now i want to change / update the value or label of this RichCombo box, on every change and from the outside as well. Basically, it should act exactly like the default Font selection box.

editor.ui.addRichCombo( 'FontFamily', {
    multiSelect : false,
    label: 'Schriftart',
    title: 'Schriftart',
    className:   'cke_format',
    panel: { css:[CKEDITOR.skin.getPath("editor")].concat(editor.config.contentsCss) },
    toolbar: 'font',
    init: function() {
        for (var i=0; i < allFonts.length; i++) {
            this.add(
                allFonts[i].class,
                '<span class="'+ allFonts[i].class +'">' + allFonts[i].label + '</span>',
                 allFonts[i].label
             );
        };
    },
    onClick: function(value) {
         updateFontCorrectly();
    }
}

Note that there is actually more code in place of the updateFontCorrectly() function.

I want to be able to do something like

this.setValue("Times New Roman");

(and instead pass through a variable), from inside the onClick function as well as from the outside, globally.

Theoretically, the code above works but breaks the box entirely after one use. Some class jQuery target (deep within the CKEditor source) seems to fail after using it once, and the RichCombo refuses to open.

I've stripped it down to

this._.value = "Times New Roman";

but this breaks after one use as well.

I have to be completely missing something here. How can i get this to work?

Solution

  • It's really simple, as it turns out.

    this.setValue(foo, "Text");

    The only tricky part is that foo has to be a valid value, as in, it exists in this._.items.

    If it's invalid, the richCombo will break. "Text" can be whatever you want it to be.