javascript - CKEditor : How to enable custom plugin button when in "Source" mode

Question

我已经成功地将 CKEditor 集成到我的项目中，并且刚刚构建了我的第一个“Hello, world!” 类型的插件。该插件在“所见即所得”模式下运行良好，但一旦切换到“源代码”模式，该插件就会自动禁用。

我的任何强制都无法使插件按钮保持启用状态。我知道这是可能的，因为默认情况下，CKEditor 中的“全选”和“关于”工具栏按钮在所见即所得和源代码模式下均已启用。

我看到了对工具栏项的“模式”设置 的引用，但无法发现所需的语法。这是我尝试编辑自己的 customConfig 文件的失败示例:

config.toolbar = [
    { name: 'custom', items: ['HelloWorld'], modes: { wysiwyg: 1, source: 1 } },
    { name: 'about', items: ['About'] }
];

这也行不通:

config.toolbarGroups = [
    { name: 'custom', modes: { wysiwyg: 1, source: 1 } },
    { name: 'about' }
];

如何为两种模式启用 CKEditor 插件工具栏按钮？

Answer 1

明白了。通过反复试验，我发现了一些有效的语法。

可能还有其他方法可以做到这一点，但这对我有用:

config-text.js

CKEDITOR.editorConfig = function (config) {
    config.toolbar = [
        { name: 'custom', items: ['HelloWorld'] },
        { name: 'about', items: ['About'] }
    ];

    config.toolbarGroups = [
        { name: 'custom' },
        { name: 'about' }
    ];
};

plugin.js

CKEDITOR.plugins.add("helloworld", {
    init: function (editor) {
        editor.addCommand("helloWorld",
            {
                // Enable the button for both 'wysiwyg' and 'source' modes
                modes: { wysiwyg: 1, source: 1 },
                exec: function (editor) {
                    alert("Hello, world!");
                }
            });
        editor.ui.addButton("HelloWorld", {
            label: "Hello World",
            command: "helloWorld",
            icon: this.path + "images/helloworld.png"
        });
    }
});