Ckeditor 插件配置不起作用

Question

我尝试添加 justify 插件以便能够将文本右对齐、左对齐或居中对齐。但是按照文档中的说明（http://apostrophecms.org/docs/tutorials/howtos/ckeditor.html），我想知道插件是否应该位于特定文件夹中（我的在 public/modules/apostrophe-areas/js/ckeditorPlugins/justify/），因为它在加载站点时消失了，但是如果我将它包含在其他文件夹中，例如 public/plugins/justify 仍然不起作用。

这是我的代码以防万一：（位于 lib/modules/apostrophe-areas/public/js/user.js）

apos.define('apostrophe-areas', {
  construct: function(self, options) {
    // Use the super pattern - don't forget to call the original method
    var superEnableCkeditor = self.enableCkeditor;
    self.enableCkeditor = function() {
      superEnableCkeditor();
      // Now do as we please
      CKEDITOR.plugins.addExternal('justify', '/modules/apostrophe-areas/js/ckeditorPlugins/justify/', 'plugin.js');
    };
  }
});

此外，很高兴知道如何在可编辑小部件的工具栏设置中调用插件。谢谢！

Answer 1

您需要的URL是：

/modules/my-apostrophe-areas/js/ckeditorPlugins/justify/

my- 前缀会自动添加到前面，这样原始 apostrophe-areas 模块的 public 文件夹和它的项目级扩展都可以有不同的 URL.否则，两者都无法访问他们的 user.js，例如。

我会将此注释添加到有问题的 HOWTO 中，该 HOWTO 目前通过在虚构的 URL.

中存根来解决问题

至于应该如何调用插件，请使用该插件导出的工具栏控件名称——那部分是 ckeditor 的问题，而不是真正的撇号问题。但是查看该插件的源代码，它们可能是 JustifyLeft、JustifyCenter、JustifyRight 和 JustifyBlock.

Answer 2

事实证明，仅仅在apostophe-areas里面调用CKEDITOR.plugins.addExternal是不够的。您还需要覆盖 apostrophe-rich-text-widgets-editor 模块的 self.beforeCkeditorInline 并显式调用 self.config.extraPlugins = 'your_plugin_name';.

这是我最终得到的结果：

在lib/modules/apostrophe-areas/public/js/user.js中：

apos.define('apostrophe-areas', {
  construct: function(self, options) {
    // Use the super pattern - don't forget to call the original method
    var superEnableCkeditor = self.enableCkeditor;
    self.enableCkeditor = function() {
      superEnableCkeditor();
      // Now do as we please
      CKEDITOR.plugins.addExternal('justify', '/modules/my-apostrophe-areas/js/ckeditorPlugins/justify/', 'plugin.js');
    };
  }
});

然后在 in lib/modules/apostrophe-rich-text-widgets/public/js/editor.js:

apos.define('apostrophe-rich-text-widgets-editor', {
  construct: function(self, options) {
    self.beforeCkeditorInline = function() {
        self.config.extraPlugins = 'justify';
    };
  }
});

出于某种原因，在 apostrophe-areas 中执行 CKEDITOR.config.extraPlugins = 'justify' 不起作用，可能是由于 CKEDITOR 的初始化方式；

还有一件事：这个特定的插件（justify，即）似乎不遵循按钮定义逻辑。它具有定义为图像的按钮图标，而 Apostrophe CMS 2.3 中使用的 CKEditor 4.6 使用 font-awesome 来显示图标。这意味着不会显示 justify 模块附带的图标，您必须为每个按钮单独编写自己的 css。

当您最终启用对齐按钮时，您可能会遇到另一个问题。内置的 html 清理器将剥离对齐添加的样式以对齐内容。

Apostrophe CMS 似乎正在使用 sanitize-html 来清理输入，因此更改 CKEditor 设置不会有任何效果。要解决此问题，请将以下内容添加到您的 app.js:

'apostrophe-rich-text-widgets': {
  // The standard list copied from the module, plus sup and sub
  sanitizeHtml: {
    allowedAttributes: {
      a: ['href', 'name', 'target'],
      img: ['src'],
      '*': ['style'] //this will make sure the style attribute is not stripped off
    }
  }
}

Answer 3

谢谢你们的帮助。在遵循以下两种方法之后：在 my-apostrophe-areas 文件夹中找到插件以及在 apostrophe-rich-text 小部件上编辑 editor.js（sanitize.html 文件已经在使用该配置），我得到了插件工作。但是，我仍然遇到图标问题。

我修复了在 public/modules/apostrophe-areas/js/vendor/ckeditor/skins/apostrophe/editor.less

末尾添加对应于 align-justify, align-right, align-left 和 align-center 的 Font Awesome 图标的问题

Ckeditor 插件配置不起作用

Ckeditor plugin configuration not working

ckeditor

apostrophe-cms