Javascript 外部调用UI按钮 回答：

结果如下所示：

工作守则摘录：

$('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，因为它的第四个版本有很多定制和配置选项，而且构建得非常好

我开始在我自己的工具栏上实现CK中的一些命令，这与CK无关。显然，我的冒险并不像我想象的那么容易

---

你问了一个核心问题：）。我是过去一年的CKEditor核心开发人员，我花了一个小时在工具栏、面板和按钮上挖掘。CKE的API的这一部分非常曲折，而且肯定缺乏文档。但最糟糕的是，它不是真正可重用的，因为所有部件都是紧密耦合的

无论如何。我尝试重用

colorbutton

，我成功了。在没有

工具栏的编辑器上

插件（这很重要），我能够为指定元素打开它：

甚至它似乎也能起作用：）（至少在Chrome上是这样）

我很好奇用自己的基本实现替换

工具栏

插件会有多困难（可能没有1y支持和其他繁重的东西）。目前，您的粗体和链接按钮在Chrome、FF、Opera和IE7-9上正常工作（这实际上证明了CKE是多么酷，因为它在后台做了很多工作；）。我希望你不会遇到任何严重的麻烦

一些提示：

• 您不需要调用

  editor.getCommand（）.exec（）

  。有一个

  editor.execCommand（）

  方法
• 您可能需要根据上下文（插入符号位置）激活/停用按钮。每个命令都有其自身的属性，并在事件发生时自动更新

---

祝你好运。如果你能与我们分享你的想法和工作成果，那就太酷了：）。如果有一天我们决定改进API的这一部分，反馈将非常有用。

如果我将按钮附加到“elementspath”按钮（您的示例）上，反馈将非常有效。但是，在实例化CK之前，我无法让它在HTML中显式定义的元素上工作，在CK的范围之外。哦请稍等。您需要存储

按钮
变量（UI项）。它只能创建一次（不知道为什么；我的try-catch也用于测试。现在，存储它-工作完美（在Chrome、IE9和IE7上测试）。只需删除它附带的所有花式样式，并为工具栏添加更多逻辑。已接受！并且肯定会收到反馈。
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

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

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)