Question

我已成功将 CKEditor 集成到我的项目中，并刚刚构建了我的第一个“Hello，world！”类型插件。该插件在“wysiwyg”模式下运行良好，但只要切换到“Source”模式，插件就会自动禁用。

我没有任何强制措施能够保持启用插件按钮。我知道这是可能的，因为默认情况下，对于所见即所得和源模式都启用了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

知道了。通过试用和错误我发现一些有效的语法。

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

<强>配置-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"
        });
    }
});

Answer 2

这对我来说对ckeditor 4有用：

CKEDITOR.instances.myInstance.getCommand('myPlugin').enable();

使用这个小JS，您几乎可以对每个事件做出反应并启用您需要的按钮。

来源：ckeditor Forum

CKEditor：如何在“源”模式下启用自定义插件按钮

2 个答案: