在 Angular 应用程序中集成 Quill 文本编辑器
Integrating Quill text editor in an Angular application
我正在学习如何创建博客网站。我先尝试了一个简单的例子。但是文本编辑器没有出现在我的屏幕上。我用 npm install --save quill@1.3.6 ngx-quill
命令安装了 Quill。我的app.component.html
很简单
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand ml-auto mr-auto" href="#">Quill JS Editor with Angular</a>
</nav>
<div class="container">
<div class="row pt-5">
<div class="col-md-8">
<form [formGroup]="editorForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="editor">
<h3>Editor</h3>
</label>
<quill-editor></quill-editor>
</div>
</form>
</div>
<div class="col-md-4 bg-light p-4">
<h3>Output</h3>
<p class="my-5"></p>
</div>
</div>
</div>
其实应该是这样的。
我还在我的 app.component.ts
中从 @angular/forms
导入了 FormGroup
和 FormControl
,其中包含以下代码。
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
editorForm: FormGroup;
ngOnInit() {
this.editorForm = new FormGroup({
'editor': new FormControl(null)
})
}
}
但是我收到了这个错误。
整个项目都在 github。请告诉我我在这个项目中还缺少什么。
这意味着您没有正确配置该库,特别是您应该导入 QuillModule.forRoot()
以便正确初始化所有与该库提供程序一起提供的内容。
@NgModule({
imports: [
BrowserModule,
QuillModule.forRoot(),
...
顺便说一句,这就是我们 documentation tells 的做法。
按照以下步骤操作应该有效:
1- 安装:
npm install ngx-quill
npm install @angular/core
npm install @angular/common
npm install @angular/forms
npm install @angular/platform-browser
npm install quill
npm install rxjs — peer dependencies of rxjs-quill
- 在您的 index.html 中包含 quilljs 的 bubble.css、snow.css,或者使用
@import
语句将它们添加到您的 css/scss 文件中,或者在您的构建过程中添加它们的外部样式。
使用以下代码更新 angular.json 文件:
“styles”: [
“./node_modules/@angular/material/prebuilt-themes/indigo-pink.css”,
“src/styles.css”,
“./node_modules/quill/dist/quill.core.css”,
“./node_modules/quill/dist/quill.snow.css”
],
“scripts”: [“./node_modules/quill/dist/quill.js”]
将其导入您的 app.module.ts
import { QuillModule } from 'ngx-quill'
并在导入中添加如下所示
@NgModule({
declarations:[],
imports:[
CommonModule,
QuillModule.forRoot(),
]
})
在您的 component.ts 文件中,您可以像下面的代码那样修改编辑器样式:
editorStyle = {
height: '200px'
};
在您的 component.html 文件中,您可以像下面的代码那样调用它:
<div id="quill">
<p>Content *</p>
<quill-editor [styles]="editorStyle" placeholder="Enter Text" [modules]="config"
formControlName="yourCtrlname" required>
</quill-editor>
</div>
您还可以查看:https://lifecoders.wordpress.com/angular/quill-rich-text-editor-setup-in-angular-7-8/
感谢@MJ X 回答涵盖最多
今天是2021-09-13,Angular v11,ngx-quill 14.3.0,总结补充到 his/hers:
1) 安装
npm install ngx-quill
npm install @angular/core
npm install @angular/common
npm install @angular/forms
npm install @angular/material
npm install @angular/platform-browser
npm install quill
npm install bootstrap // optional for better look.
2) app.module.ts
import { QuillModule } from 'ngx-quill';
@NgModule({
declarations: [...],
imports: [..., QuillModule.forRoot() ]
3)根styles.css
@import "~@angular/material/prebuilt-themes/indigo-pink.css"; /* required */
@import '~quill/dist/quill.core.css';
@import '~quill/dist/quill.bubble.css';
@import '~quill/dist/quill.snow.css';
@import "~bootstrap/dist/css/bootstrap.css"; /* optional for better look */
我正在学习如何创建博客网站。我先尝试了一个简单的例子。但是文本编辑器没有出现在我的屏幕上。我用 npm install --save quill@1.3.6 ngx-quill
命令安装了 Quill。我的app.component.html
很简单
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand ml-auto mr-auto" href="#">Quill JS Editor with Angular</a>
</nav>
<div class="container">
<div class="row pt-5">
<div class="col-md-8">
<form [formGroup]="editorForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="editor">
<h3>Editor</h3>
</label>
<quill-editor></quill-editor>
</div>
</form>
</div>
<div class="col-md-4 bg-light p-4">
<h3>Output</h3>
<p class="my-5"></p>
</div>
</div>
</div>
其实应该是这样的。
我还在我的 app.component.ts
中从 @angular/forms
导入了 FormGroup
和 FormControl
,其中包含以下代码。
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
editorForm: FormGroup;
ngOnInit() {
this.editorForm = new FormGroup({
'editor': new FormControl(null)
})
}
}
但是我收到了这个错误。
整个项目都在 github。请告诉我我在这个项目中还缺少什么。
这意味着您没有正确配置该库,特别是您应该导入 QuillModule.forRoot()
以便正确初始化所有与该库提供程序一起提供的内容。
@NgModule({
imports: [
BrowserModule,
QuillModule.forRoot(),
...
顺便说一句,这就是我们 documentation tells 的做法。
按照以下步骤操作应该有效:
1- 安装:
npm install ngx-quill
npm install @angular/core
npm install @angular/common
npm install @angular/forms
npm install @angular/platform-browser
npm install quill
npm install rxjs — peer dependencies of rxjs-quill
- 在您的 index.html 中包含 quilljs 的 bubble.css、snow.css,或者使用
@import
语句将它们添加到您的 css/scss 文件中,或者在您的构建过程中添加它们的外部样式。
使用以下代码更新 angular.json 文件:
“styles”: [
“./node_modules/@angular/material/prebuilt-themes/indigo-pink.css”,
“src/styles.css”,
“./node_modules/quill/dist/quill.core.css”,
“./node_modules/quill/dist/quill.snow.css”
],
“scripts”: [“./node_modules/quill/dist/quill.js”]
将其导入您的 app.module.ts
import { QuillModule } from 'ngx-quill'
并在导入中添加如下所示
@NgModule({
declarations:[],
imports:[
CommonModule,
QuillModule.forRoot(),
]
})
在您的 component.ts 文件中,您可以像下面的代码那样修改编辑器样式:
editorStyle = {
height: '200px'
};
在您的 component.html 文件中,您可以像下面的代码那样调用它:
<div id="quill">
<p>Content *</p>
<quill-editor [styles]="editorStyle" placeholder="Enter Text" [modules]="config"
formControlName="yourCtrlname" required>
</quill-editor>
</div>
您还可以查看:https://lifecoders.wordpress.com/angular/quill-rich-text-editor-setup-in-angular-7-8/
感谢@MJ X 回答涵盖最多
今天是2021-09-13,Angular v11,ngx-quill 14.3.0,总结补充到 his/hers:
1) 安装
npm install ngx-quill
npm install @angular/core
npm install @angular/common
npm install @angular/forms
npm install @angular/material
npm install @angular/platform-browser
npm install quill
npm install bootstrap // optional for better look.
2) app.module.ts
import { QuillModule } from 'ngx-quill';
@NgModule({
declarations: [...],
imports: [..., QuillModule.forRoot() ]
3)根styles.css
@import "~@angular/material/prebuilt-themes/indigo-pink.css"; /* required */
@import '~quill/dist/quill.core.css';
@import '~quill/dist/quill.bubble.css';
@import '~quill/dist/quill.snow.css';
@import "~bootstrap/dist/css/bootstrap.css"; /* optional for better look */