3

回答：

结果可以在这里看到：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/ <- 这里我部署了一个沙​​盒版本。

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

右侧是精确的复制品，但带有 CK 的本机工具栏。

如您所见，简单的命令（如Link和Bold ）由于其简单的性质而正在工作。

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

也许有人对CK足够专业并且可以帮助我解决这个问题？

目标是在我的工具栏按钮上具有与 CK 相同的功能。

我发现，单击Text Color后，颜色选择弹出窗口会附加到正文，因此，它不会扩展到 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））该函数接受一个参数，我认为我可以通过调用向它提供任何DOM元素color.click( element );，这也导致了错误：

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)

对于随后的每一次点击。

4

1 回答 1

1

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

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

重用颜色按钮

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

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

一些技巧：

  • 你不需要打电话editor.getCommand().exec()。有一种editor.execCommand()方法。
  • 您可能希望根据上下文（插入符号位置）激活/停用按钮。每个命令都有自己的状态selectionChange，并且会根据事件自动更新。

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

于 2013-01-10T00:21:31.507 回答