angular7中ngx-quill富文本编辑器的使用
在angular中使用ngx-quill
在angular中使用ngx-quill富文本编辑器的入坑指南。
- 如果在ng2<=>ng5版本中,根据网上的教程是没有问题的。
- 如果在>=ng5版本,目前项目在ng7项目中使用ngx-quill出现错误。
在ng6及以上的版本中使用ngx-quill,会出现如上错误,不能够解决quill,那是因为在ng6以上的版本中使用ngx-quill需要安装quill。
正确使用姿势
- 安装依赖
// 安装 quill
npm install quill -save
// 安装 ngx-quill
npm install ngx-quill -save
- 在对应的模块中引入QuillModule模块
例如:在app.module.ts中引入
import { QuillModule } from 'ngx-quill';
imports: [
QuillModule
]
- 在index.html中引入css
<link href="https://cdn.quilljs.com/1.2.2/quill.snow.css" rel="stylesheet">
- 使用
<quill-editor></quill-editor>
- 效果图