Ckeditor插件配置不起作用 [英] Ckeditor plugin configuration not working

问题描述

我尝试添加对齐插件以能够将文本右，左或中对齐。但请按照文档中的说明进行操作（ http://apostrophecms.org/docs/tutorials /howtos/ckeditor.html ），我想知道该插件是否应位于特定的文件夹中（我的文件夹位于public / modules / apostrophe-areas / js / ckeditorPlugins / justify /），因为该插件在网站上消失了已加载，但是如果我将其包含在其他文件夹（例如public / plugins / justify）中仍然无法正常工作。

I have tried to add justify plugin to be able to align text right, left or centre. But after following the instructions in the documentation (http://apostrophecms.org/docs/tutorials/howtos/ckeditor.html), I wonder if the plugin should be located in a specific folder (mine is at public/modules/apostrophe-areas/js/ckeditorPlugins/justify/), as it disappears when the site is loaded, but if I include it in some other folder such as public/plugins/justify still doesn't work.

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

This is my code just in case: (located at 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');
    };
  }
});

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

Also, it would be nice to know how the plugin should be called at the Toolbar settings for editable widgets. Thanks!

推荐答案

事实证明，仅调用 CKEDITOR.plugins是不够的.addExternal 放在撇子区域中。您还需要覆盖<$ c $ aposquotphe-rich-text-widgets-editor 模块的 self.beforeCkeditorInline 并显式调用 self.config.extraPlugins ='your_plugin_name'; 。

It turns out that it's not enough to simply call CKEDITOR.plugins.addExternal inside apostophe-areas. You also need to override self.beforeCkeditorInline of the apostrophe-rich-text-widgets-editor module and explicitly call self.config.extraPlugins = 'your_plugin_name';.

这就是我最后得到的结果：

Here's what I ended up with:

在 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');
    };
  }
});

然后在lib / modules / apostrophe-rich-text-widgets /中的中public / js / editor.js ：

then in 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'撇号区域内的code>不起作用，可能是由于初始化CKEDITOR的方式所致；

For some reason doing CKEDITOR.config.extraPlugins = 'justify' inside apostrophe-areas does not work, probably due to the way how CKEDITOR is initialized;

另外一件事：这个特定的插件（即证明是合理的）似乎不遵循按钮定义逻辑。它具有定义为图像的按钮图标，而Apostrophe CMS 2.3中使用的CKEditor 4.6使用超棒的字体显示图标。这意味着justify模块附带的图标将不会显示，您必须为每个按钮分别编写自己的CSS。

One more thing: this particular plug-in (justify, that is) does not seem to follow the button definition logic. It has button icons defined as images, whereas CKEditor 4.6 used in Apostrophe CMS 2.3 uses font-awesome to display icons. It means that the icons that ship with the justify module won't be displayed and you'll have to write your own css for each button individually.

还有另一个问题最后启用对齐按钮时，您可能会遇到的问题。

There is another issue which you'll probably face when you finally enable the justify buttons. The built-in html sanitizer will be strip off the styles justify adds to align the content.

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

Apostrophe CMS seems to be using sanitize-html to sanitize the input, so changing CKEditor settings won't have any effect. To solve the issue, add the following to your 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
    }
  }
}

这篇关于Ckeditor插件配置不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！