Question

我尝试添加对齐插件，以便能够将文本右对齐，左对齐或居中对齐。但是按照文档（http://apostrophecms.org/docs/tutorials/howtos/ckeditor.html）中的说明操作后，我想知道插件是否应该位于特定的文件夹中（我的是在public / modules /撇号区域/ 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

您需要的网址是：

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

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

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

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

Answer 2

事实证明仅仅在CKEDITOR.plugins.addExternal内拨打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的初始化方式;

还有一件事：这个特定的插件（证明，就是这样）似乎不遵循按钮定义逻辑。它有按钮图标定义为图像，而Apostrophe CMS 2.3中使用的CKEditor 4.6使用font-awesome来显示图标。这意味着，对齐模块附带的图标将不会显示，您必须单独为每个按钮编写自己的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文件夹中找到插件以及在editor.js窗口小部件上编辑apostrophe-rich-text（sanitize.html文件已经在使用该配置），我得到了插件工作。但是，我仍然遇到图标问题。

我修复了在align-justify, align-right, align-left

末尾添加与align-center和public/modules/apostrophe-areas/js/vendor/ckeditor/skins/apostrophe/editor.less对应的字体真棒图标的问题

Ckeditor插件配置不起作用

3 个答案: