我的角度项目版本:
"@angular/animations": "^14.2.0",
"@angular/cdk": "^14.2.7",
"@angular/common": "^14.2.0",
"@angular/compiler": "^14.2.0",
"@angular/core": "^14.2.0",
"@angular/forms": "^14.2.0",
"@angular/material": "^14.2.7",
"@angular/platform-browser": "^14.2.0",
"@angular/platform-browser-dynamic": "^14.2.0",
"@angular/router": "^14.2.0"
我已经尝试了quill2.0.0-dev.3创建了一个编辑器,但我仍然无法在工具栏或通过按钮插入表格功能。
这是我的代码:
MyComponent.component.ts
import Quill from 'quill';
export class MyComponent implements OnInit, OnDestroy, AfterViewInit {
@ViewChild('editor', { static: false }) public editor!:ElementRef;
private quillInstance: any;
modules = {
toolbar: {
container: [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block', 'image'],
[{ 'header': 1 }, { 'header': 2 }],
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'script': 'sub' }, { 'script': 'super' }],
[{ 'indent': '-1' }, { 'indent': '+1' }],
[{ 'direction': 'rtl' }],
[{ 'size': ['small', false, 'large', 'huge'] }],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }],
[{ 'font': [] }],
[{ 'align': [] }],
['clean'],
[
{ table: 'TD' },
{ 'table-insert-row': 'TIR' },
{ 'table-insert-column': 'TIC' },
{ 'table-delete-row': 'TDR' },
{ 'table-delete-column': 'TDC' }
]
],
handlers: {
}
},
table: true
};
}
ngAfterViewInit() {
this.quillInstance = new Quill(this.editor.nativeElement, {
theme: 'snow',
modules: this.modules
});
console.log(this.quillInstance)
}
MyComponent.component.html
<article>
<div id="editor" #editor>
</div>
</article>