Question

回答：

结果可以在这里看到：http://apitecture.com/dev/cked/index.2.html

工作代码摘录：

$('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 );
    }
});

我正在开发基于GUI的丰富内容编辑器。

我得出结论，使用CKEditor作为文本样式部分，因为它的第4个版本附带了很多自定义和配置选项，而且非常好。

我开始将CK中的一些命令实现到我自己的工具栏中，这与CK没有关联。显然，我的冒险并不像我想象的那么容易......

http://apitecture.com/dev/cked/＆lt; - 这里我部署了一个沙箱版本。

在左侧，您可以看到一个精简版的CK和一个自定义工具栏。

在右侧，精确复制，但使用CK的原生工具栏。

如您所见，简单的命令，如链接和粗体，由于其简单的特性，正在运行。

问题在于文字颜色按钮。它没有绑定到CK中的命令，因此我无法在外部执行它 - 好吧，至少我没有找到方法。

也许有人对CK有足够的帮助，可以帮我解决这个问题吗？

目标是在工具栏的按钮上使用与CK一样的功能。

我发现，单击文本颜色后，颜色选择弹出窗口会附加到正文中，因此，它不会扩展到CK样式，理论上应该是独立工作的。虽然，我似乎无法找到将HTML附加到正文的代码。

我试图获取UI按钮实例：

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

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

但是，这导致部分预期（由于点击未从工具栏启动）异常：

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

看到（来自：console.log（color.click））函数接受一个参数，我以为我可以通过调用color.click( element );为它提供任何DOM元素，这也导致错误：

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

以下是引入颜色插件及其按钮的来源的链接：https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/colorbutton/plugin.js

更新

我认为每个按钮都会发生这种情况，它有下拉菜单而不是对话框。

更新2：

Reinmar的回答确实在隧道尽头显示了一些亮点：http://apitecture.com/dev/cked/index.2.html

在该示例中，可以单击右侧的“颜色”文本链接，并且下拉列表显示，此外，它完美地运行（除了强制执行阴影）。这里唯一的问题是，这是第一次有效。导致：

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)

每次后续点击。

Answer 1

你问了一个硬核问题:)。我是CKEditor核心开发人员，过去1年我不得不花费一个小时挖掘工具栏，面板和按钮。这部分CKE的API真的很曲折，绝对缺乏文档。但最糟糕的部分是，它不是真正可重复使用的，因为所有部件都是紧密耦合的。

反正。我试图重用colorbutton，我成功了。在没有toolbar插件的编辑器上（这很重要）我能够为指定的元素打开它：

Reusing colorbutton

它甚至可以工作:)（至少在Chrome上）。

我很好奇用你自己的基本实现替换toolbar插件是多么困难（可能没有支持和其他重要的东西）。目前，您的粗体和链接按钮在Chrome，FF，Opera和IE7-9上正常工作（这实际上证明了CKE有多酷，因为它在后台做了很多事情;）。我希望你不会遇到任何严重的麻烦。

一些提示：

您无需致电editor.getCommand().exec()。有editor.execCommand()方法。
您可能希望根据上下文（插入位置）激活/停用按钮。每个命令都有state，并且会在selectionChange事件中自动更新。

祝你好运。如果你与我们分享你的想法和工作结果，那将会很酷:)。如果有一天我们决定改进这部分API，反馈将非常有用。

从外部调用UI按钮

回答：

更新

更新2：

1 个答案: