Angular6引入ng2-ckeditor插件

723 阅读1分钟

项目需要用到富文本框,于是在网上找到了ng2-ckeditor插件,使用方式如下:

首先,下载 ng2-ckeditor 到angular项目中:

npm install ng2-ckeditor --save    ( 或者 cnpm install ng2-ckeditor --save)

然后,添加 ckeditor.js 到index.html中:

<script src="https://cdn.ckeditor.com/4.13.1/standard/ckeditor.js"></script>

注意:ckeditor 4.9的版本不支持图片导入。

接着就是添加模块到项目的主模块中:

import{ CKEditorModule }from'ng2-ckeditor';

@NgModule( { imports: [ CKEditorModule, ...], ... })

最后就是使用方法了,这个插件的使用方法非常的简单:

<ckeditor name="ckeditor"id="ckeditor"  [(ngModel)]="editContent"  debounce="500" [config]="config"> </ckeditor>

config对象可以配置在ts文件中:

import { environment } from 'src/environments/environment';
export const ckeditorConfig = {
    uiColor: '#F8F8F8',   // 编辑框背景色
    language: 'zh-cn',  // 显示语言
    toolbarCanCollapse: true,  // 是否可收缩功能栏
    toolbar: [['Maximize'], ['Undo', 'Redo', '-', 'Cut', ' Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Link', 'Unlink', 'Anchor', '-',
        'Image', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', '-', 'Source'], ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript',
        'Superscript', '-', 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'], ['Styles', 'Format', 'Font', 'FontSize']],  // 工具部分
    removeDialogTabs: 'image:advanced;link:advanced',
    filebrowserImageUploadUrl: environment.apiDomain + '/fileCommon/upload/pic/articleContent', // 上传接口地
    image_previewText: '',
    readOnly: false,
    format_tags: 'p;h1;h2;h3;pre',
}

此行代码为导入图片的配置:

    filebrowserImageUploadUrl: environment.apiDomain + '/fileCommon/upload/pic/articleContent', // 上传接口地址

需要注意的是,这个接口的请求参数和返回参数必须与插件ckeditor4的官方文档要求的一致:

请求参数:

{
    upload:"",
    ckCsrfToken:"",
}

返回参数:

{
    "uploaded": 1,
    "fileName": "foo(2).jpg",
    "url": "/files/foo(2).jpg",
    "error": {
        "message": "A file with the same name already exists. The uploaded file was renamed to \"foo(2).jpg\"."
    }
}