Angular + quill实现富文本编辑器

前言

由于需要一个富文本编辑器来编辑一些网页内容, 手动编辑后存储到数据库比较麻烦, 所以着手实现一个自己的富文本编辑器, 来编辑和存储一些html文件.
这里使用Angular框架, 加Quill库实现.

ngx-quill: https://github.com/KillerCodeMonkey/ngx-quill
quill官网: https://quilljs.com/

创建Angular工程

创建工程

首先创建一个angular工程. 工程的名字就叫angular-editor.

ng new angular-editor

添加依赖

这里需要添加ngx-quill依赖包, 以下是 ngx-quill 与Angular之间的兼容关系.

由于我目前使用的angular版本13.3.11, 我选择了一个稳定版本[email protected]
查看[email protected]的配置文件package.json, 其对应的quill版本为[email protected], 所以这里quill使用[email protected]. 为了让typescript能识别类型信息, 这里还需要导入一个开发依赖包@types/[email protected], 版本也可以从ngx-quill的package.json中找到.

npm install [email protected] --save
npm install [email protected] --save
npm install @types/[email protected] --save-dev

当前最新版本为 [email protected] [email protected]

创建编辑器

引入Quill模块

添加依赖包之后还不能直接使用Quill, 还需要再使用Quill的Module声明文件引入它.

以下以根模块为例讲解如何引入模块，引入ngx-quill的QuillModule

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { QuillModule } from 'ngx-quill';  // 引入富文本编辑器模块
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    QuillModule.forRoot()                  // 富文本编辑器模块
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

引入quill css样式

由于我使用的scss, 所以可以很方便的引入quill css. 可以在预编译的时候将quill的样式编译进来.

找到styles.scss, 添加如下代码引入quill样式

quill提供两种主题, 一种是bubble, 另一种是snow, 默认是snow, 可以任选一种导入, 也可以同时导入两种主题, 方便动态切换样式.

styles.scss

@import url('https://cdn.quilljs.com/1.3.7/quill.snow.css');
@import url('https://cdn.quilljs.com/1.3.7/quill.bubble.css');

将quill富文本编辑器添加到页面

做好以上准备工作, 我们就可以将quill富文本编辑器. 以app.component.html为例, 只要在页面添加这样一行, 然后启动angular应用, 就可以看到编辑器了.

<quill-editor></quill-editor>

启动应用看效果

ng serve --open

加载与获取富文本内容

当我们使用quill编辑文档的时候, 往往不是从空白文档开始, 大多数情况下我们是在已有文档的基础上进行修改.

当我们拿到一个文档时, 如何将其内容加载到quill编辑器中呢? 网上很多的教程或博客讲解得不够深入.

首先要将quill-editor与一个control控件连接起来, 如下:

<form [formGroup]="form">
  <quill-editor format="html" formControlName="html"></quill-editor>
</form>

当然连接之前, 我们需要创建该控件.

  form: FormGroup = this.fb.group({
    html: new FormControl('<div>test</div><ul><li>1</li><li class="ql-indent-1">1-1</li><li>2</li><ol><li>numbered</li><li class="ql-indent-1">numbered-1</li></ol></ul><div><br></div>'),
  })

这样我们通过控制该控件, 可以在构建FormControl时传入, 也可以在创建完FormControl后通过setValue方法加载html内容, 就能加载html内容到quill编辑器中. 而在quill中编辑文档内容时, control控件中的内容会自动更新.

当我们准备存盘时, 获取到该控件, 通过value熟悉即可获取到修改后的html内容 form.get('html').value, 而不必去操作quill-editor组件.

更多用法可以参考ngx-quill示例

参考文档

Angular：ngx-quill富文本编辑器的使用

如何在Angular 11/12版本中整合ngx-quill教程

element ui富文本编辑器的使用