Calling UI button externally

Question

Answered:

Result can bee seen here: http://apitecture.com/dev/cked/index.2.html

Working code excerpt:

$('a.color').on({
    click : function()
    {
        var self = $(this);

        var editor = self.data('editor-instance') || CKEDITOR.instances['one'];
        var button = self.data('editor-button') || editor.ui.create('TextColor');

        if (!self.data('editor-instance'))
        {
            self.data('editor-instance', editor);
        }

        if (!self.data('editor-button'))
        {
            button._.id = self.attr('id');
            self.data('editor-button', button);
        }

        button.click( editor );
    }
});

---

I am working on a rich GUI based content editor.

I have come to conclusion, to use CKEditor for the text styling part, because it's 4th version comes with a lot of customization and configuration options, plus, is very well built.

I started to implement some of the commands in CK to my own toolbar, that isn't connected with CK. Apparently, my ventures weren't as easy as I thought they'd be...

http://apitecture.com/dev/cked/ <- here I have deployed a sandbox version.

On the left hand side, you can see a veeeery stripped down version of CK, and a custom toolbar.

On the right, exact replica, but with CK's native toolbar.

Simple commands, like Link and Bold, as you can see, are working, due to their simple nature.

The problem is with the Text Color button. It isn't bound to a command in CK, therefore I cannot execute it externally - well, at least I haven't found a way how.

Maybe somebody is pro enough with CK and could help me to figure this out?

The goal is to have the same functionality on my toolbar's button as the CK one.

I have found out, that upon clicking the Text Color, the color selection popup is appended to body, so, it doesn't extend upon CK styles and should, in theory, work standalone. Though, I cannot seem to find the code where the HTML is appended to body.

I have tried to get the UI button instance:

var color = CKEDITOR.instances['one'].ui.create('TextColor');

// and fire click on it
color.click();

But, that caused a partially expected (due to click not being started from toolbar) exception:

Uncaught TypeError: Cannot read property 'elementMode' of undefined ckeditor.js:552
    CKEDITOR.ui.floatPanel.CKEDITOR.tools.createClass.$ ckeditor.js:552
    CKEDITOR.ui.panelButton.CKEDITOR.tools.createClass.proto.createPanel ckeditor.js:541
    e ckeditor.js:540
    $.on.click cktest.js:59
    v.event.dispatch jquery.min.js:2
    o.handle.u

Seeing (from: console.log(color.click)) that the function accepts a parameter, I thought that I could provide any DOM element to it, by calling color.click( element );, that also caused error:

Uncaught TypeError: Cannot read property 'baseFloatZIndex' of undefined ckeditor.js:547
    CKEDITOR.ui.panel.render ckeditor.js:547
    o ckeditor.js:552
    CKEDITOR.ui.floatPanel.CKEDITOR.tools.createClass.$ ckeditor.js:553
    CKEDITOR.ui.panelButton.CKEDITOR.tools.createClass.proto.createPanel ckeditor.js:541
    e ckeditor.js:540
    $.on.click cktest.js:59
    v.event.dispatch jquery.min.js:2
    o.handle.u

Here is link to the source where the color plugin and it's buttons is introduced: https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/colorbutton/plugin.js

Update:

I think this happens with every single button, that has dropdowns instead of dialogs.

Update 2:

Reinmar's answer did show some light at the end of the tunnel: http://apitecture.com/dev/cked/index.2.html

In the example, the "Color" text-link on the right can be clicked, and the dropdown shows, plus, it functions perfectly (besides that the shadow is enforced). The only catch here is, it works for the first time. Resulting in:

TypeError: Cannot read property 'title' of undefined
    at CKEDITOR.ui.panel.block.CKEDITOR.tools.createClass.$ (http://apitecture.com/dev/cked/ckeditor/ckeditor.js:549:298)
    at new b (http://apitecture.com/dev/cked/ckeditor/ckeditor.js:26:149)
    at Object.CKEDITOR.ui.panel.addBlock (http://apitecture.com/dev/cked/ckeditor/ckeditor.js:547:503)
    at CKEDITOR.ui.floatPanel.CKEDITOR.tools.createClass.proto.addBlock (http://apitecture.com/dev/cked/ckeditor/ckeditor.js:553:409)
    at CKEDITOR.ui.panelButton.CKEDITOR.tools.createClass.proto.createPanel (http://apitecture.com/dev/cked/ckeditor/ckeditor.js:541:333)
    at e [as click] (http://apitecture.com/dev/cked/ckeditor/ckeditor.js:540:304)
    at HTMLAnchorElement.$.on.click (http://apitecture.com/dev/cked/cktest.2.js:64:24)
    at HTMLAnchorElement.v.event.dispatch (http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js:2:38053)
    at HTMLAnchorElement.o.handle.u (http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js:2:33916) 

For every subsequent click.

Answer 1

You've asked a hardcore question :). I'm CKEditor core dev for last 1 year and I had to spend an hour digging in toolbar, panels and buttons. This part of CKE's API is really twisty and definitely lacks of documentation. But the worst part of it is that it's not really reusable, cause all the parts are tightly coupled.

Anyway. I tried to reuse colorbutton and I succeeded. On editor without toolbar plugin (this is important) I was able to open it for specified element:

And it even seems to work :) (at least on Chrome).

I'm curious how hard it will be for you to replace toolbar plugin with your own basic implementation (perhaps without a11y support and other heavy stuff). At the moment your bold and link buttons work correctly on Chrome, FF, Opera and IE7-9 (this in fact proves how cool CKE is because it does a lot in the background ;). I hope that you won't encounter any serious troubles.

Some tips:

• You don't need to call editor.getCommand().exec(). There is an editor.execCommand() method.
• You'll probably want to activate/deactivate buttons depending on context (caret location). Each command has its state and it's automatically updated on selectionChange event.

Good luck. And it will be cool if you share your thoughts and result of work with us :). Feedback will be very useful if someday we'll decide to improve this part of API.