如何在 Magnolia CMS 中为 CKEditor 添加外部插件？答案

【问题标题】：How to add external plug in for CKEditor in Magnolia CMS?如何在 Magnolia CMS 中为 CKEditor 添加外部插件？
【发布时间】：2015-09-07 14:30:04
【问题描述】：

我正在尝试在 Magnolia CMS 5.3 中自定义我的 CKEditor。为此，我想在我的 CKEditor 中添加字体、颜色按钮。

我尝试了一种方法，我下载了这些插件并将这些 plugin.js 文件放在我的 STK->资源中，我在 FCKconfig.js 文件中添加了以下代码

load external plugin
    (function() {
    CKEDITOR.plugins.addExternal('font','ckeditor/', 'font-plugin.js');
    CKEDITOR.plugins.addExternal('font','ckeditor/', 'color-plugin.js');
})();

还有，

config.extraPlugins = 'font';
config.extraPlugins = 'colorbutton';

但我得到的是默认的 CKEditor 而不是自定义的。

错误：图像、超链接不起作用。

你能推荐我吗？

【问题讨论】：

标签： magnolia

【解决方案1】：

在对话框的 JCR 或 YAML 中的字段定义中，您可以使用 configJsFile 标记指向配置 .js 文件，例如：

form:
  tabs:
    - name: tabText
      label: Text
      fields:
        - name: text
          fieldType: richText
          tables: true
          configJSsFile: 'path_to_File'
          height: 500
          label: Text Editor

在该文件中，您可以更改配置并添加插件，如下所示：

CKEDITOR.plugins.addExternal("plugin_name", CKEDITOR.vaadinDirUrl + "js/plugin_folder/");

CKEDITOR.editorConfig = function( config ) {
  // MIRROR info.magnolia.ui.form.field.definition.RichTextFieldDefinition
  definition = {
    alignment: false,
    images: true,
    lists: true,
    source: true,
    tables: true,
    colors: null,
    fonts: null,
    fontSizes: null
  }


...
...

您可以查看 Magnolia 上的 this 文档以获取更多信息，并查看此第三方教程 tutorial 添加 codemirror 插件。

【讨论】：

【解决方案2】：

您可能想阅读 Magnolia 文档，了解如何自定义 Magnolia 随附的 ckEditor。 https://documentation.magnolia-cms.com/display/DOCS53/Rich+text 您需要做的是在您的自定义配置中重新添加 magnolialink 和 magnoliaFileBrowser 插件......也许还有其他一些事情。

【讨论】：

谢谢 Jan。我做了同样的事情，我得到了除字体和颜色之外的所有工具。你能推荐我吗？
如果您在使用自己的配置文件时想要与 Magnolia 使用的颜色和字体相同，则需要将它们从 Magnolia 的配置复制到您的配置中。