我正在使用提示编辑器,但在访问编辑器的内容时遇到了一些问题。我需要将编辑器的内容发布到 API,所以我需要内容。这是我的代码:
import tippy from "tippy.js";
import { Editor, EditorContent, VueRenderer } from "@tiptap/vue-2";
import Document from "@tiptap/extension-document";
import Paragraph from "@tiptap/extension-paragraph";
import Text from "@tiptap/extension-text";
export default {
components: {
EditorContent
},
props: {
comment_type: String,
comment_text: String,
comment_id: Number,
edit_mode: Boolean
},
data() {
return {
editor: null,
limit: 280,
users: [],
comment_da: {},
edit_comment_da: {}
};
},
watch: {
comment_text(value) {
console.log(value);
this.editor.setContent(value);
}
},
mounted() {
const self = this;
const CustomParagraph = Paragraph.extend({
addKeyboardShortcuts() {
return {
// ↓ your new keyboard shortcut
"Shift-Enter": () => self.addComment()
};
}
});
this.editor = new Editor({
extensions: [
Document,
CustomParagraph,
Text,
],
content: this.comment_text
});
},
beforeDestroy() {
this.editor.destroy();
},
}
<template>
<div>
<editor-content :editor="editor" class="form-control"/>
</div>
</template>
在父组件中,我有一些属性需要传递给tiptap编辑器
import editor from "./components/editor";
new Vue({
components: {
editor
},
data() {
comment_da: {},
comment_text: "",
}
})
<div class="m-messenger__form-controls">
<editor
v-model="comment_text"
:comment_text="comment_text"
:comment_type="'comment'"
:comment_id="comment_da.id"
/>
</div>
我无法访问编辑器内容。我已经尝试过这个解决方案https://github.com/ueberdosis/tiptap/issues/133但我在输入时不断出错。
错误:“getHTML 不是函数”