如何在 Angular 2 组件中初始化 Quill Editor?
How do you initialize a Quill Editor in an Angular 2 Component?
我正在尝试在我的 Angular 2 项目中实现我自己的 Quill 编辑器组件。我使用 npm 将 quill 安装到我的项目中。我正在尝试使用我的组件创建一个单词计数器应用程序。我正在尝试实现来自 :https://quilljs.com/blog/building-a-custom-module/
的代码
HTML代码:
<div id="editor"></div>
<div id="counter">0</div>
CSS:
body {
padding: 25px;
}
#editor {
border: 1px solid #ccc;
}
#counter {
border: 1px solid #ccc;
border-width: 0px 1px 1px 1px;
color: #aaa;
padding: 5px 15px;
text-align: right;
}
这是我的组件代码:
import { OnInit, Component, ViewChild, ElementRef } from '@angular/core';
import * as Quill from 'quill';
@Component({
selector: 'app-quill-editor',
templateUrl: './quill-editor.component.html',
styleUrls: ['./quill-editor.component.css']
})
export class QuillEditorComponent{
// Implement and register module
constructor()
{
Quill.register('modules/counter', function(quill, options) {
var container = document.querySelector('#counter');
quill.on('text-change', function() {
var text = quill.getText();
// There are a couple issues with counting words
// this way but we'll fix these later
container.innerHTML = text.split(/\s+/).length;
});
});
console.log(document.querySelector('#editor'))
// We can now initialize Quill with something like this:
var quill = new Quill('#editor', {
modules: {
counter: true
}
});
}
}
当我提交我的申请时,我收到:
quill Invalid Quill container #editor
您可以检查 Angular 生命周期并在那里调用与 Quill 相关的东西,将它们放在 constructor() 中可能会导致错误,因为 HTML 元素尚未呈现。
您可以尝试将它们放入 ngOnInit() 或 ngAfterViewInit()
export class QuillComponent implements OnInit {
constructor() {
}
ngOnInit() { // Quill initialization and querying for elements here }
}
参考:https://angular.io/guide/lifecycle-hooks
2019 年 3 月 4 日
另一种可以做到这一点的方法是:
- 如果您的元素是 ViewChild ,那么使用上面的生命周期应该会有所帮助
- 如果您希望当前元素成为编辑器,也可以尝试注入 ElementRef
我正在尝试在我的 Angular 2 项目中实现我自己的 Quill 编辑器组件。我使用 npm 将 quill 安装到我的项目中。我正在尝试使用我的组件创建一个单词计数器应用程序。我正在尝试实现来自 :https://quilljs.com/blog/building-a-custom-module/
的代码HTML代码:
<div id="editor"></div>
<div id="counter">0</div>
CSS:
body {
padding: 25px;
}
#editor {
border: 1px solid #ccc;
}
#counter {
border: 1px solid #ccc;
border-width: 0px 1px 1px 1px;
color: #aaa;
padding: 5px 15px;
text-align: right;
}
这是我的组件代码:
import { OnInit, Component, ViewChild, ElementRef } from '@angular/core';
import * as Quill from 'quill';
@Component({
selector: 'app-quill-editor',
templateUrl: './quill-editor.component.html',
styleUrls: ['./quill-editor.component.css']
})
export class QuillEditorComponent{
// Implement and register module
constructor()
{
Quill.register('modules/counter', function(quill, options) {
var container = document.querySelector('#counter');
quill.on('text-change', function() {
var text = quill.getText();
// There are a couple issues with counting words
// this way but we'll fix these later
container.innerHTML = text.split(/\s+/).length;
});
});
console.log(document.querySelector('#editor'))
// We can now initialize Quill with something like this:
var quill = new Quill('#editor', {
modules: {
counter: true
}
});
}
}
当我提交我的申请时,我收到:
quill Invalid Quill container #editor
您可以检查 Angular 生命周期并在那里调用与 Quill 相关的东西,将它们放在 constructor() 中可能会导致错误,因为 HTML 元素尚未呈现。
您可以尝试将它们放入 ngOnInit() 或 ngAfterViewInit()
export class QuillComponent implements OnInit {
constructor() {
}
ngOnInit() { // Quill initialization and querying for elements here }
}
参考:https://angular.io/guide/lifecycle-hooks
2019 年 3 月 4 日
另一种可以做到这一点的方法是:
- 如果您的元素是 ViewChild ,那么使用上面的生命周期应该会有所帮助
- 如果您希望当前元素成为编辑器,也可以尝试注入 ElementRef