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

时间:2016-09-12 08:30:38

标签: javascript angularjs angular ckeditor

我试图将 Justify 插件添加到我的ckeditor,但遗憾的是我无法找到有关如何将插件添加到ng2-ckeditor的任何信息。

此外,我无法找到应添加插件的目录或配置文件。

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

1 个答案:

答案 0 :(得分:4)

ng-ckeditor使用CKEditor CDN。 This page向您展示如何从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' ......等......