在这篇博文中，我们将学习如何在Angular 11/12版本中整合ngx-quill。
ngx-quill是一个流行的npm库，提供丰富的所见即所得编辑器。
什么是WYSIWYG编辑器？
它被缩写为What You See Is What You Get。它是一个用于在线创建/设计文档的UI组件，你可以在线看到文档的输出。这使得开发者不需要为布局写代码，而只需要关注实际的内容。
有很多开源框架，我们可以在Angular应用程序中在线创建一个所见即所得的富文本编辑器。
以下是一些流行的Angular WYSIWYG编辑器
- ngx-quill WYSIWYG编辑器
- Angular Froala WYSIWYG编辑器
- Angular - CKEditor组件
- ngx-editor
Quill JS Wysiwyg富文本编辑器
Quill是一个用于所见即所得富文本编辑器的javascript开源框架。它是一个非常流行的javascript和jquery框架的编辑器。
ngx-quill是QuillJS框架的一个angular版本。它支持所有angular 2/4/5/6版本。
ngx-quill tutorials
在下面的章节中，它涵盖了功能、注释和例子以及angular版本。
特点和说明
- 它基于自定义模块，可以配置或扩展模块 例如，可以配置预置的工具栏或自定义工具栏
- 支持气泡/雪花主题样式，默认的CSS主题是雪花。
- 支持使用ngModel的Angular双向绑定
- 可以使用自定义CSS样式覆盖内置样式
- 内置事件 -onEditorCreated- 这将在编辑器创建实例时被调用。onContentChanged- 这将在内容被修改或更新时被触发。onSelectionChanged- 选定内容更新事件。
让我们看看创建Angular应用程序、添加npm库以及将quillJS集成到Angular应用程序中的步骤顺序。
使用ng cli命令创建Angular应用程序
Angular CLI是一个用于创建项目结构的应用程序生成器。这包括生成typecript配置、组件和测试文件。
首先，使用ng -version comamnd检查angular cli是否已经安装。
B:\>ng --version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 12.0.3
Node: 14.17.0
Package Manager: npm 7.11.1
OS: win32 x64
Angular: 12.0.3
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1200.3
@angular-devkit/build-angular 12.0.3
@angular-devkit/core 12.0.3
@angular-devkit/schematics 12.0.3
@schematics/angular 12.0.3
rxjs 6.6.7
typescript 4.2.4
接下来，使用ng -version comamnd创建一个angular应用程序：ng new command
B:\>ng new angular-app
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS
你可以通过ng serve命令启动服务器，
它可以启动webserver，并且应用程序可以访问localhost:4200。
在应用程序中添加ngx-quill和quill npm
ngx-quill是Quill富文本编辑器的一个angular模块，可以作为npm包库使用。QuillJs是一个用于wysiwyg编辑器的javascript框架。
因为QuillJs框架是ngx-quill的一个依赖。
两个库都必须安装在应用程序中。
npm install ngx-quill --save
npm install quill --save
这就在node_modules中安装了ngx-quill 和quill 包，并在项目的package.json中把这两个包作为依赖项加入。
"dependencies": {
"ngx-quill": "^14.0.0",
"quill": "^1.3.7"
}
下面的代码显示了如何将第三方模块导入到应用程序模块。要使用第三方模块，首先要导入模块
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { QuillModule } from 'ngx-quill';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
QuillModule, // Add Quill Angular WYSIWYG Editor
],
providers: [],
bootstrap: [AppComponent],
schemas:
[CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }
import quill.snow.min.css cdn style in index.html
这个框架有样式，你必须将其整合到angular应用程序中。
你可以将样式表复制到src/assets文件夹并包含在angular.json中，或者在index.xml中包含Quill CDN URL。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.snow.min.css">
Html模板组件的变化。我们将在HTML模板文件
app.component.html中添加。
<div style="text-align:center">
<h1>
Primeng Quill WYSIWYG Component Example
</h1>
</div>
<quill-editor>
<div quill-editor-toolbar>
<span class="ql-formats">
<button class="ql-bold" [title]="'Bold'"></button>
</span>
<span class="ql-formats">
<select class="ql-align" [title]="'Aligment'">
<option selected></option>
<option value="center"></option>
<option value="right"></option>
<option value="justify"></option>
</select>
<select class="ql-align" [title]="'Aligment2'">
<option selected></option>
<option value="center"></option>
<option value="right"></option>
<option value="justify"></option>
</select>
</span>
</div>
</quill-editor>
使用ng serve command 启动开发服务器。这将启动angular项目并监听4200输出。
支持的Angular版本
- Angular 2和4 - ngx-quill支持小于等于1.6.0的版本
- Angular 5 - ngx-quill支持大于1.6.0的版本
- Angular 10/11/12- ngx-quill支持大于等于3.7.0的版本。
上面的例子使用的是3.7.0版本。
总结
我们已经完成了quill wysiwyg文本编辑器与angular应用程序的集成，在这个教程中，我们安装了quillJS npm库并学习了如何创建富文本编辑器。
