如何在白玉兰CMS中添加CKEditor的外部插件

Question

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

我在某种程度上尝试过，我下载了这些插件并将这些插件.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而不是自定义的。

错误:图像，超链接不工作。

你能推荐我吗?

Answer 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上的文档以获取更多信息，以及添加codemirror插件的第三方教程。

Answer 2

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