1

我试图添加 justify 插件以使文本能够向右、向左或居中对齐。但是按照文档中的说明（http://apostrophecms.org/docs/tutorials/howtos/ckeditor.html），我想知道插件是否应该位于特定文件夹中（我的位于 public/modules/apostrophe- area/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');
    };
  }
});

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

4

3 回答 3

2

您需要的网址是：

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

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

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

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

于 2017-08-02T14:13:44.863 回答
1

CKEDITOR.plugins.addExternal事实证明，仅仅调用inside是不够的apostophe-areas。您还需要覆盖self.beforeCkeditorInline模块apostrophe-rich-text-widgets-editor并显式调用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';
    };
  }
});

由于某种原因，CKEDITOR.config.extraPlugins = 'justify'内部apostrophe-areas操作不起作用，可能是由于 CKEDITOR 的初始化方式；

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

当您最终启用 justify 按钮时，您可能会遇到另一个问题。内置的 html sanitizer 将去掉 justify 添加的样式以对齐内容。

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
    }
  }
}
于 2017-08-06T16:49:51.813 回答
0

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

我修复了添加对应于align-justify, align-right, align-left和align-center末尾的 Font Awesome 图标public/modules/apostrophe-areas/js/vendor/ckeditor/skins/apostrophe/editor.less

于 2017-10-10T22:15:15.323 回答