javascript - 如何使用 TypeScript 和 Angular 2 向 ng2-ckeditor 添加插件？

Question

我正在尝试将 Justify 插件添加到我的 ckeditor，但遗憾的是我找不到任何关于如何将插件添加到 ng2-ckeditor 的信息。

此外，我找不到任何我应该添加插件的目录或配置文件。

我正在使用 ng2-ckeditor 1.0.6 和 TypeScript。

Answer 1

ng-ckeditor 使用 CKEditor CDN。 This page向您展示如何从 cdn 添加外部插件或下载插件并使用本地版本。

declare var CKEDITOR: any;

CKEDITOR.plugins.addExternal(
  'uploadimage',
  '../full-all/plugins/divarea/',
  'plugin.js');

这是访问cdn上的full-all路径。或者，如果您想从本地文件夹访问它，您可以将路径设置为类似于/users/app/assets/...等，具体取决于您下载的文件夹所在的位置。

在您的 html 中，您将添加以下内容:[config]="{extraPlugins: 'divarea'}"到你的 ckeditor 标签。

由于崩溃问题，大多数 Angular2 用例默认需要 divarea 插件，因此您添加的任何其他插件都需要作为逗号分隔的字符串插入:

[config]="{extraPlugins: 'divarea,uploadimage'}"

如果绑定(bind)到局部组件变量，例如，它会是这样的:

this.ckConfig = {
  height: '250',
  extraPlugins: 'divarea,uploadimage',
  enterMode: '2',
  toolbar: [
    {name: 'document', items: ['Source', '-']},
    {name: 'clipboard', items: ['Undo', 'Redo']},
    {name: 'paragraph', items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight']},
    {name: 'insert', items: ['Image']},
    {name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', '-']},
    {name: 'styles', items: ['Font', 'FontSize']},
    {name: 'colors', items: [ 'TextColor' ]},
  ]
};

注意 - 不要在逗号后留空格。事实上，该字符串中没有空格，它必须是 'pluginname,pluginname,pluginname' ...等等...