Angular4.x、5.x富文本编辑器ngx-quill插件的使用

ngx-quill是Angular2.x、4.x、5.x的富文本编辑器,可以让我们快速的实现一个富文本编辑器,ngx-quill 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 ngx-quill 把传统的多行文本输入框(textarea)替换为可视化的富文本.


下面看看Angular4.x、5.x富文本编辑器ngx-quill插件的使用



1.首先安装ngx-quill插件


使用ngx-quill前首先你得知道你的angular的版本,如果是angular版本是大于5.x需要按照下面方式安装:

    npm install ngx-quill


如果你的 Angular版本 < v5.0.0 用下面命令安装:npm install ngx-quill@1.6.0


2.引入ngx-quill需要的css


找到你的angualr对应的index.html  然后引入下面css


<link href="https://cdn.quilljs.com/1.2.2/quill.snow.css" rel="stylesheet">


注意是index.html里面引入



3.在app.module.ts里面引入ngx-quill模块



import { QuillModule } from 'ngx-quill'



在app.module.ts 里面的NgModule注入QuillModule



@NgModule({
  imports: [
    ...,

    QuillModule
  ],
  ...
})
class YourModule { ... }



4.找到对应的模块里面使用



<quill-editor [(ngModel)]="editorContent"> quill-editor>






github地址:https://github.com/KillerCodeMonkey/ngx-quill