Ckeditor插件配置不起作用

Question

我已经尝试添加调整插件，以便能够右对齐、左对齐或居中对齐。但是在遵循文档(插件)中的说明后，我想知道插件是否应该位于特定的文件夹中(我的插件位于public/modules/apostrophe-areas/js/ckeditorPlugins/justify/)，，因为它在站点加载时会消失，但如果我将其包含在其他文件夹中，例如http://apostrophecms.org/docs/tutorials/howtos/ckeditor.html/http://apostrophecms.org/docs/tutorials/howtos/ckeditor.html/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

事实证明，仅仅在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 CMS2.3中使用的CKEditor 4.6使用了令人敬畏的字体来显示图标。这意味着与justify模块一起提供的图标将不会显示，您必须为每个按钮单独编写自己的css。

当您最终启用对齐按钮时，您可能会面临另一个问题。内置的html消毒器将去掉样式调整添加的样式以对齐内容。

撇号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 2

您需要的URL是：

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

my-前缀是自动预先加上的，这样原始apostrophe-areas模块和它的项目级扩展的public文件夹都可以有一个不同的URL。否则，例如，两者都将无法访问其user.js。

我将把这个注释添加到有问题的HOWTO中，它目前通过在一个虚构的URL中存根来处理这个问题。

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

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对应的字体令人敬畏的图标