Angular11.0.0安装ngx-quill

265 阅读1分钟

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>

各种功能按钮例如调整字体大小、删除线等等在文档中可以查询。