背景：
我目前正在使用QuillJS和Angular 5在我的应用上注册一些富文本。 DB部分的注册运行良好。我可以检索完全相同的样式文本。
问题：
但是，当我在检索文本后尝试格式化文本时，quilljs就像是冻结的：没有任何按钮（警察大小，文本颜色等）正常工作。当然，没有错误。我点击它们但没有任何反应。如果我只是创建一个新文本，那些按钮就可以工作。
我仍然可以将我的选择器放在文本区域并更新新的（普通）文本并再次检索它。
它是否与我使用带有获取/设置内容功能的QuillJs实例化文本的方式有关？这是我第一次使用Quill，所以我可能会误用它。
如果需要，我可以更新更多代码。非常感谢你的帮助
以下是我的 text-editor.component.ts 的代码：
@Component({
selector: 'app-text-editor',
templateUrl: './text-editor.component.html',
styleUrls: ['./text-editor.component.css']
})
export class TextEditorComponent implements OnInit {
quill: any = Quill;
subscription: Subscription;
subjectResetFields: Subscription;
constructor(private textSvc: TextService, private passDataSvc: PassDataService) {
this.subscription = this.textSvc.getTextFromDb()
.subscribe(textToLoad => {
// console.log('text to load', textToLoad);
this.setContentIntoQuill(textToLoad);
});
this.subjectResetFields = this.passDataSvc.resetTextFieldConfirmed()
.subscribe(f => {
this.setContentIntoQuill('');
});
}
// Homemade toolbar for the text editor
// cf https://quilljs.com/docs/modules/toolbar/
toolbarOptions = [
['bold', 'italic', 'underline'], // toggled buttons
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent
[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
[{ 'font': [] }],
[{ 'align': [] }],
['image', 'link']
];
ngOnInit() {
// <!-- Initialize Quill editor -->
const quillEditor = new this.quill ('#quill-container', {
modules: {
toolbar: this.toolbarOptions,
},
theme: 'snow'
});
}
onClickSaveText() {
const quill = new this.quill ('#quill-container');
// jsonify and stringify the delta object from quilljs to allows it to be saved in the db
let jsonifyDeltaText = JSON.stringify(quill.getContents());
this.textSvc.postText(jsonifyDeltaText, this.passDataSvc.getCrId())
.subscribe(answer => console.log('From save text button', answer));
// update text in the service for later purposes
this.getContentInHTML(quill);
}
setContentIntoQuill(content) {
// turn back the registered text into Delta object in order to be well displayed by Quill
const quill = new this.quill('#quill-container');
const Delta = this.quill.import('delta');
if (content !== '') {
let reformatedContent = new Delta(JSON.parse(content));
quill.setContents(reformatedContent);
this.getContentInHTML(quill);
}
else {
let reformatedContent = new Delta(content);
quill.setContents(reformatedContent);
this.getContentInHTML(quill);
}
}
Text-editor.component.html：
<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.5/quill.snow.css" rel="stylesheet">
<!-- Create the editor container -->
<form (ngSubmit)="onClickSaveText()">
<div id="scrolling-container">
<div id="quill-container"></div>
</div>
<br>
<div class="col-sm-12">
<button class="btn btn-success float-right" type="submit">Sauvegarder le texte</button>
</div>
<br>
</form>
<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.5/quill.js"></script>
<!--Plus html to docx library-->
<script src="../../../../../compte-rendu-app/node_modules/html-docx-js/test/vendor/Blob.js"></script>
<script src="../../../../../compte-rendu-app/node_modules/html-docx-js/dist/html-docx.js"></script>
答案 0 :(得分：0)
所以我发现了这个问题。我想是在创造很多羽毛笔的例子。我不记得为什么我这样做了。
所以我在我的类（quillEditor）中创建一个新变量，用于创建一个带有OnInit lifehook的实例。然后我在我的函数中重用它，这实际上更合乎逻辑......
这是我的ts文件的代码：
export class TextEditorComponent implements OnInit {
quill: any = Quill;
quillEditor;
subscription: Subscription;
subjectResetFields: Subscription;
constructor(private textSvc: TextService, private passDataSvc: PassDataService) {
this.subscription = this.textSvc.getTextFromDb()
.subscribe(textToLoad => {
console.log('text to load', textToLoad);
this.setContentIntoQuill(textToLoad);
});
this.subjectResetFields = this.passDataSvc.resetTextFieldConfirmed()
.subscribe(f => {
this.setContentIntoQuill('');
});
}
// Homemade toolbar for the text editor
// cf https://quilljs.com/docs/modules/toolbar/
toolbarOptions = [
['bold', 'italic', 'underline'], // toggled buttons
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent
[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
[{ 'font': [] }],
[{ 'align': [] }],
['image', 'link']
];
ngOnInit() {
this.quillEditor = new this.quill ('#quill-container', {
modules: {
toolbar: this.toolbarOptions,
},
theme: 'snow'
});
}
// To do : Create a message which say to the user that the header form data needs to be set first
onClickSaveText() {
// jsonify and stringify the delta object from quilljs to allows it to be saved in the db
let jsonifyDeltaText = JSON.stringify(this.quillEditor.getContents());
this.textSvc.postText(jsonifyDeltaText, this.passDataSvc.getCrId())
.subscribe(answer => console.log('From save text button', answer));
// update text in the service for later purposes
this.getContentInHTML(this.quillEditor);
}
setContentIntoQuill(content) {
// turn back the registered text into Delta object in order to be well displayed by Quill
const Delta = this.quill.import('delta');
if (content !== '') {
let reformatedContent = new Delta(JSON.parse(content));
this.quillEditor.setContents(reformatedContent);
this.getContentInHTML(this.quillEditor);
}
else {
let reformatedContent = new Delta(content);
this.quillEditor.setContents(reformatedContent);
this.getContentInHTML(this.quillEditor);
}
}
getContentInHTML(quill) {
// get the text from editor in html version then format it in a complete html doc
let html = quill.container.firstChild.innerHTML;
let finalHtml = '<html><head><meta charset="UTF-8"></head><body>';
finalHtml += html;
finalHtml += '</body></html>';
console.log('HTML TEXT', finalHtml);
this.textSvc.sendTextInHtml(finalHtml);
}