如何初始化Angular 2組件中的Quill編輯器？

我想在我的Angular 2項目中實現自己的Quill編輯器組件。我使用npm將羽毛筆安裝到我的項目中。我正嘗試用我的組件創建一個字計數器應用程序。我想實現從代碼：https://quilljs.com/blog/building-a-custom-module/如何初始化Angular 2組件中的Quill編輯器？

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; 
}

這是我的組件代碼：

當我爲我的應用程序，我收到：

quill Invalid Quill container #editor

來源

2017-07-17 Farhan Islam

您可以檢查Angular生命週期並在那裏調用您的與Quill相關的東西，將它們放在構造函數（）中可能會導致錯誤，因爲HTML元素尚未呈現。

你可以試試把它們放在ngOnInit（）或ngAfterViewInit（）

export class QuillComponent implements OnInit { 
    constructor() { 
    } 

    ngOnInit() { // Quill initialization and querying for elements here } 
}

參考：https://angular.io/guide/lifecycle-hooks

來源

2017-07-17 19:51:01

如何初始化Angular 2組件中的Quill編輯器？

回答

相關問題