如何在 Magnolia CMS 中为 CKEditor 添加外部插件?

Posted

技术标签:

【中文标题】如何在 Magnolia CMS 中为 CKEditor 添加外部插件?【英文标题】:How to add external plug in for CKEditor in Magnolia CMS? 【发布时间】: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 而不是自定义的。

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

你能推荐我吗?

【问题讨论】:

【参考方案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 您需要做的是在您的自定义配置中重新添加 magnolialinkmagnoliaFileBrowser 插件......也许还有其他一些事情。

【讨论】:

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

以上是关于如何在 Magnolia CMS 中为 CKEditor 添加外部插件?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 magnolia CMS 中配置自定义 servlet

如何通过magnolia cms成像模块改变图像大小

如何在 Magnolia CMS 中获取图像尺寸

Magnolia CMS:如何配置代理和绕过

如何在 Magnolia CMS 中配置 My sql?

如何更改 magnolia cms 应用程序的 url