Question

我正在尝试在CKEditor 4.0.x中启用一个插件，其代码如下所示：

CKEDITOR.plugins.add('strinsert', {
    requires: ['richcombo'],
    init: function (editor) {
        //  array of strings to choose from that'll be inserted into the editor
        var strings = [];

        strings.push(['%faq%', 'FAQs', 'FAQs']);
        strings.push(['%glossary%', 'Glossary', 'Glossary']);

        // add the menu to the editor
        editor.ui.addRichCombo('strinsert', {
            label: 'Insert Content',
            title: 'Insert Content',
            voiceLabel: 'Insert Content',
            className: 'cke_format',
            multiSelect: false,
            panel:
                {
                    css: [editor.config.contentsCss, CKEDITOR.skin.getPath('editor')],
                    voiceLabel: editor.lang.panelVoiceLabel
                },

            init: function () {
                this.startGroup("Insert Content");
                for (var i in strings) {
                    this.add(strings[i][0], strings[i][1], strings[i][2]);
                }
            },

            onClick: function (value) {
                editor.focus();
                editor.fire('saveSnapshot');
                editor.insertHtml(value);
                editor.fire('saveSnapshot');
            }
        });
    }
});

这就是我启用插件的方式：

 CKEDITOR.plugins.addExternal("strinsert", "/bundles/common/js/strinsert/", "plugin.js");

但是没有出现，我在控制台上看不到任何错误。

首先我虽然这是richcombo插件的依赖问题，所以我也下载并启用了它：

 CKEDITOR.plugins.addExternal("richcombo", "/bundles/common/js/richcombo/", "plugin.js");

但仍然没有工作，我在这里做错了什么？

更新：添加完整配置

在OP中我完全忘记添加整个配置，这可能会导致人们无法理解问题的来源，所以在这里：

var ivory_ckeditor_templates_content = CKEDITOR.replace("templates_content", {
    "language": "en",
    "toolbar": [
        ["Source", "-", "NewPage", "Preview", "Print", "-", "Templates"],
        ["Cut", "Copy", "Paste", "PasteText", "PasteFromWord", "-", "Undo", "Redo"],
        ["Find", "Replace", "-", "SelectAll", "-", "Scayt"],
        ["Form", "Checkbox", "Radio", "TextField", "Textarea", "SelectField", "Button", "ImageButton", "HiddenField"], "\/",
        ["Bold", "Italic", "Underline", "Strike", "Subscript", "Superscript", "-", "RemoveFormat"],
        ["NumberedList", "BulletedList", "-", "Outdent", "Indent", "-", "Blockquote", "CreateDiv", "-", "JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock", "-", "BidiLtr", "BidiRtl"],
        ["Link", "Unlink", "Anchor"], ["Image", "Flash", "Table", "HorizontalRule", "SpecialChar", "Smiley", "PageBreak", "Iframe"], "\/",
        ["Styles", "Format", "Font", "FontSize", "TextColor", "BGColor"],
        ["TextColor", "BGColor"], ["Maximize", "ShowBlocks"],
        ["About"]],
    "extraPlugins": "templates,richcombo,strinsert",
    "templates": "oneview_templates"
});

ivory_ckeditor_templates_content.on('change', function () {
    ivory_ckeditor_templates_content.updateElement();
});

Answer 1

addExternal只是告诉CKEditor插件所在的位置，它不会加载插件。您还需要使用extraPlugins属性，并将富组合的名称放在toolbar属性中，如下所示：

CKEDITOR.plugins.addExternal("strinsert", "/strinsert/", "plugin.js");
CKEDITOR.replace('editor1', {
    extraPlugins: 'strinsert',
    toolbar: [
        [ 'Source', '-', 'Bold', 'Italic', '-', 'strinsert' ]  // sample toolbar
    ]
});

编辑：如果您希望富组合自动显示在工具栏中而不手动指定，则必须在其定义中指定相应的toolbar group，如下所示：

editor.ui.addRichCombo('strinsert', {
    toolbar: 'insert',
    // all the other properties

但是，如果您需要自定义工具栏，那么您还需要指定toolbarGroups属性，最简单的方法是toolbar configurator（选择基本类型，自定义它并按“获取工具栏配置”按钮）。如果您不需要自定义工具栏，请不要指定CKEditor toolbarGroups和CKEditor toolbar属性，因此CKEditor将使用其默认工具栏组。

另外，根据CKEditor docs：您可以通过提供可选索引来影响工具栏组中按钮的位置，例如：

// This could position the button at the beginning of the "insert" group.
toolbar: 'insert,0'

// This could position the button at the end of the "insert" group.
toolbar: 'insert,100'

注意：确切的位置取决于工具栏中可用的其他按钮定义的索引，因此可能需要对索引值进行一些试验才能在组内创建完美的按钮序列。

启用插件不想显示，为什么我在这里丢失？

1 个答案: