Nia*_*aie 6 javascript vue.js vuejs2 tiptap
我正在使用 Tiptap 编辑器，但在访问编辑器的内容时遇到问题。
\n我需要将编辑器的内容发布到 API，因此我需要该内容。这是我的代码：
\nimport tippy from "tippy.js";\nimport { Editor, EditorContent, VueRenderer } from "@tiptap/vue-2";\nimport Document from "@tiptap/extension-document";\nimport Paragraph from "@tiptap/extension-paragraph";\nimport Text from "@tiptap/extension-text";\n\nexport default {\n components: {\n EditorContent\n },\n\n props: {\n comment_type: String,\n comment_text: String,\n comment_id: Number,\n edit_mode: Boolean\n },\n\n data() {\n return {\n editor: null,\n limit: 280,\n users: [],\n comment_da: {},\n edit_comment_da: {}\n };\n },\n \n watch: {\n comment_text(value) {\n console.log(value);\n this.editor.setContent(value);\n }\n },\n\n mounted() {\n const self = this;\n const CustomParagraph = Paragraph.extend({\n addKeyboardShortcuts() {\n return {\n // \xe2\x86\x93 your new keyboard shortcut\n "Shift-Enter": () => self.addComment()\n };\n }\n });\n this.editor = new Editor({\n extensions: [\n Document,\n CustomParagraph,\n Text,\n ],\n content: this.comment_text\n });\n },\n\n beforeDestroy() {\n this.editor.destroy();\n },\n }<template>\n <div>\n <editor-content :editor="editor" class="form-control"/>\n </div>\n</template>在父组件中，我需要将一些属性传递给 Tiptap 编辑器：
\nimport editor from "./components/editor";\n\nnew Vue({\n components: {\n editor\n },\n data() {\n comment_da: {},\n comment_text: "",\n }\n})<div class="m-messenger__form-controls">\n <editor \n v-model="comment_text"\n :comment_text="comment_text"\n :comment_type="\'comment\'"\n :comment_id="comment_da.id"\n />\n</div>我无法访问编辑器内容。我已经尝试过这个解决方案，但在输入时不断收到此错误：
\n\n\n错误：“getHTML 不是函数”
\n
Nia*_*aie 11
我在 Tiptap文档中找到了答案：
\nimport editor from "./components/editor";\n\nnew Vue({\n components: {\n editor\n },\n data() {\n comment_da: {},\n comment_text: "",\n }\n})<div class="m-messenger__form-controls">\n <editor \n v-model="comment_text"\n :comment_text="comment_text"\n :comment_type="\'comment\'"\n :comment_id="comment_da.id"\n />\n</div>import tippy from "tippy.js";\nimport { Editor, EditorContent, VueRenderer } from "@tiptap/vue-2";\nimport Document from "@tiptap/extension-document";\nimport Paragraph from "@tiptap/extension-paragraph";\nimport Text from "@tiptap/extension-text";\n\nexport default {\n components: {\n EditorContent\n },\n\n props: {\n comment_type: String,\n comment_text: String,\n comment_id: Number,\n edit_mode: Boolean\n },\n\n data() {\n return {\n editor: null,\n limit: 280,\n users: [],\n comment_da: {},\n edit_comment_da: {}\n };\n },\n \n watch: {\n comment_text(value) {\n console.log(value);\n this.editor.setContent(value);\n }\n },\n\n mounted() {\n const self = this;\n const CustomParagraph = Paragraph.extend({\n addKeyboardShortcuts() {\n return {\n // \xe2\x86\x93 your new keyboard shortcut\n "Shift-Enter": () => self.addComment()\n };\n }\n });\n this.editor = new Editor({\n extensions: [\n Document,\n CustomParagraph,\n Text,\n Mention.configure({\n HTMLAttributes: {\n class: "mention"\n },\n suggestion: {\n items: query => {\n var self = this;\n const search_user = new crud(\n "/chat/mention/" + query\n );\n search_user.get_all_data(true, false, data => {\n self.users = data.data;\n });\n return this.users.filter(item =>\n item.name\n .toLowerCase()\n .startsWith(query.toLowerCase())\n );\n },\n render: () => {\n let component;\n let popup;\n\n return {\n onStart: props => {\n component = new VueRenderer(MentionList, {\n parent: this,\n propsData: props\n });\n\n popup = tippy("body", {\n getReferenceClientRect:\n props.clientRect,\n appendTo: () => document.body,\n content: component.element,\n showOnCreate: true,\n interactive: true,\n trigger: "manual",\n placement: "bottom-start"\n });\n },\n onUpdate(props) {\n component.updateProps(props);\n\n popup[0].setProps({\n getReferenceClientRect: props.clientRect\n });\n },\n onKeyDown(props) {\n return component.ref?.onKeyDown(props);\n },\n onExit() {\n popup[0].destroy();\n component.destroy();\n }\n };\n }\n }\n })\n ],\n content: this.comment_text,\n onUpdate() {\n // You can access to both HTML and JSON type of your content\n const json = this.getJSON();\n const html = this.getHTML();\n // send the content to an API here\n this.comment_text = json.content[0].content[0].text\n ? json.content[0].content[0].text\n : "";\n }\n });\n },\n\n beforeDestroy() {\n this.editor.destroy();\n },\n }<template>\n <div>\n <editor-content :editor="editor" class="form-control"/>\n </div>\n</template>如果您好奇，可以查看onUpdate我的部分代码以获取更改。