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

Question

我正在嘗試將Justify插件添加到我的ckeditor，但遺憾的是我無法找到有關如何將插件添加到ng2-ckeditor的任何信息。

此外，我無法找到任何目錄或配置文件，我應該添加插件。

我正在使用帶有TypeScript的ng2-ckeditor 1.0.6 。

Answer 1

ng-ckeditor使用CKEditor CDN。 此頁面顯示如何從cdn或下載插件並使用本地版本添加外部插件。

declare var CKEDITOR: any;

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

這是訪問cdn上的完整所有路徑。 或者，如果您想從本地文件夾訪問它，您可以根據下載文件夾的位置使路徑類似於/users/app/assets/...etc。

在你的html中你要添加以下內容： [config]="{extraPlugins: 'divarea'}"到你的ckeditor標簽。

由於崩潰問題，大多數Angular2用例默認需要divarea插件，因此您添加的任何其他插件都需要以逗號分隔的字符串形式插入：

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

例如，如果綁定到本地組件變量，它將是這樣的：

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' ......等等......