81 lines
2.2 KiB
JavaScript
81 lines
2.2 KiB
JavaScript
export class QuillEditor {
|
|
constructor(editorId = 'quillEditor', previewId = 'contentPreview') {
|
|
this.quill = null;
|
|
this.editorId = editorId;
|
|
this.previewId = previewId;
|
|
this.initialize();
|
|
}
|
|
|
|
initialize() {
|
|
console.log('Initializing Quill editor...'); // Debug log
|
|
|
|
const editorContainer = document.getElementById(this.editorId);
|
|
if (!editorContainer) {
|
|
console.error(`Editor container #${this.editorId} not found`);
|
|
return;
|
|
}
|
|
|
|
this.quill = new Quill(`#${this.editorId}`, {
|
|
theme: 'snow',
|
|
modules: {
|
|
toolbar: [
|
|
[{ 'header': [1, 2, false] }],
|
|
['bold', 'italic', 'underline'],
|
|
['blockquote', 'code-block'],
|
|
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
|
|
[{ 'script': 'sub'}, { 'script': 'super' }],
|
|
['link', 'image', 'formula'],
|
|
['clean']
|
|
]
|
|
},
|
|
placeholder: 'Fügen Sie hier Ihren Inhalt ein...'
|
|
});
|
|
|
|
this.quill.on('text-change', () => this.updatePreview());
|
|
console.log('Quill editor initialized');
|
|
}
|
|
|
|
updatePreview() {
|
|
const content = this.quill.root.innerHTML;
|
|
const preview = document.getElementById(this.previewId);
|
|
|
|
if (preview) {
|
|
preview.innerHTML = content;
|
|
|
|
// Re-render math if present
|
|
if (window.MathJax) {
|
|
MathJax.typeset([preview]);
|
|
}
|
|
|
|
// Highlight code blocks if any
|
|
if (window.Prism) {
|
|
Prism.highlightAllUnder(preview);
|
|
}
|
|
}
|
|
}
|
|
|
|
getContent() {
|
|
return this.quill.root.innerHTML;
|
|
}
|
|
|
|
setContent(content) {
|
|
if (this.quill) {
|
|
this.quill.root.innerHTML = content;
|
|
this.updatePreview();
|
|
}
|
|
}
|
|
|
|
undo() {
|
|
this.quill?.history.undo();
|
|
}
|
|
|
|
redo() {
|
|
this.quill?.history.redo();
|
|
}
|
|
|
|
clear() {
|
|
this.quill?.setContents([]);
|
|
this.updatePreview();
|
|
}
|
|
}
|