在 www.npmjs.com/package/ngx… 中可以查到有关对应版本的说明
各个插件需要版本号完全对应上才可以正确使用,否则会报错。
Angular版本为11.0.0,依次输入指令:
npm install ngx-quill@13.0.1
npm install quill@1.3.6
npm install @type/quill@1.3.10
npm install @angular/platform-browser
注:其中还有@angular/core,@angular/common,@angular/forms需要安装,直接输入指令不需要版本号。
还需要安装rxjs,版本:6.6.3
模块安装完成后直接在HTML中导入使用:
编辑器代码如下:
<quill-editor [style]="{height: '300px'}" [(ngModel)]="content" placeholder="…" (onContentChanged)="contentChanged($event)">
<div quill-editor-toolbar>
<span class="ql-formats">
<!-- 加粗 -->
<button class="ql-bold" [title]="'Bold'"></button>
</span>
<select class="ql-align" [title]="'Aligment'">
<option selected></option>
<option value="center"></option>
<option value="right"></option>
<option value="justify"></option>
</select>
<!-- 删除线 -->
<button type="button" class="ql-strike"></button>
<!-- 列表显示 -->
<button type="button" class="ql-list" value="ordered"></button>
<!-- 缩进 -->
<button type="button" class="ql-indent" value="-1"></button>
<button type="button" class="ql-indent" value="+1"></button>
<!-- 清除按钮 -->
<button type="button" class="ql-clean"></button>
</div>
</quill-editor>
各种功能按钮例如调整字体大小、删除线等等在文档中可以查询。