项目需要用到富文本框,于是在网上找到了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\"."
}
}