Как исправить ошибку инициализации смещения в vue Quill ⇐ Javascript

[Anonymous]

У меня есть проблема, инициализируя vue Quill, чтобы применить в проекте VUE3 о функции примечания, я могу легко заметить, но при его изменении, он возвращает ошибку смещения каждый раз, когда я нажимаю или ввожу в редакторе Quill. Вот моя ошибка < /p>
quill.js?v=870ff25b:12570 Uncaught TypeError: Cannot read properties of null (reading 'offset')
at quill.js?v=870ff25b26
at Array.map ()
at Selection.normalizedToRange (quill.js?v=870ff25b31)
at Selection.getRange (quill.js?v=870ff25b25)
at Selection.update (quill.js?v=870ff25b43)
at quill.js?v=870ff25b12
at quill.js?v=870ff25b9
at Array.forEach ()
at Emitter.handleDOM (quill.js?v=870ff25b43)
at quill.js?v=870ff25b23
< /code>
И вот мой код: < /p>




Title:


Save Changes








import { nextTick } from "vue";
import Quill from "quill";
import "quill/dist/quill.snow.css";
import { toast } from "vue3-toastify";
import "vue3-toastify/dist/index.css";
import { noteService } from "@/services/note.service";

export default {
name: "ViewNotePage",
props: {
noteId: {
type: [String, Number],
required: true,
},
},
data() {
return {
noteData: {
title: "",
content: "",
},
quillEditor: null,
};
},
methods: {
async fetchNote() {
try {
const note = await noteService.fetchNoteFromId(this.noteId);
this.noteData = note;
await this.updateQuillContent(note.content);
} catch (error) {
console.error("Failed to fetch the note:", error);
toast.error("Failed to fetch the note.", { autoClose: 2000 });
}
},
async initializeQuill() {
try {
await nextTick();
const editorElement = document.getElementById("quill-editor");

if (editorElement) {
this.quillEditor = new Quill(editorElement, {
theme: "snow",
modules: {
toolbar: [
["bold", "italic", "underline"],
[{list: "ordered"}, {list: "bullet"}],
[{header: [1, 2, 3, false]}],
["link"],
["clean"],
],
},
});

this.quillEditor.on("text-change", () => {
this.noteData.content = JSON.stringify(this.quillEditor.getContents());
});
}
} catch (error) {
console.error("Failed to initialize Quill editor:", error);
}
},
async updateQuillContent(content) {
try {
if (this.quillEditor) {
const delta = content ? JSON.parse(content) : {ops: []};
this.quillEditor.setContents(delta);
}
} catch (error) {
console.error("Failed to update Quill content:", error);
}
},
async saveNote() {
try {
if (!this.noteData.title || !this.noteData.content) {
toast.error("Please provide a title and content for the note.", {autoClose: 2000});
return;
}

await noteService.updateNote(this.noteId, this.noteData);
toast.success("Note updated successfully!", {autoClose: 2000});
this.$emit("update", this.noteData);
} catch (error) {
console.error("Failed to save the note:", error);
toast.error("Failed to update the note.", {autoClose: 2000});
}
},
},
async mounted() {
try {
await this.initializeQuill();
await this.fetchNote();
} catch (error) {
console.error("Error during component setup:", error);
}
},
watch: {
noteId: {
immediate: true,
handler(newNoteId) {
this.fetchNote();
},
},
},
};

< /code>
Я попытался использовать что -то похожее на это, которое я нашел на Github, но это не работает < /p>
// works with quill2
let quill: Quill | null = null

onMounted(() => {
quill = new Quill(...)
})


Подробнее здесь: https://stackoverflow.com/questions/794 ... -vue-quill