前言
由于需要一个富文本编辑器来编辑一些网页内容, 手动编辑后存储到数据库比较麻烦, 所以着手实现一个自己的富文本编辑器, 来编辑和存储一些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 | ngx-quill | supported |
|---|---|---|
| v15 | >= 20.0.0 | until May, 2024 |
| v14 | >= 17.0.0 | until Dec 02, 2023 |
| v13 | >= 15.0.0, < 17.0.0 | until May 04, 2023 |
由于我目前使用的angular版本13.3.11, 我选择了一个稳定版本ngx-quill@16.2.1
查看ngx-quill@16.2.1的配置文件package.json, 其对应的quill版本为quill@1.3.7, 所以这里quill使用quill@1.3.7. 为了让typescript能识别类型信息, 这里还需要导入一个开发依赖包@types/quill@1.3.10, 版本也可以从ngx-quill的package.json中找到.
npm install ngx-quill@16.2.1 --save
npm install quill@1.3.7 --save
npm install @types/quill@1.3.10 --save-dev
当前最新版本为 ngx-quill@20.0.1 quill@1.3.7
创建编辑器
引入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示例