如何绑定提示编辑器的内容？

Question

我使用的是提示编辑器，我在访问编辑器的内容时遇到了问题。

我需要将编辑器的内容发布到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>

​

我无法访问编辑器内容。我尝试过这个解决方案，但是在输入时经常会遇到这个错误：

错误："getHTML不是函数“

Answer 1

我在提示文档中找到了答案

​

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>

​

​

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,
                Mention.configure({
                    HTMLAttributes: {
                        class: "mention"
                    },
                    suggestion: {
                        items: query => {
                            var self = this;
                            const search_user = new crud(
                                "/chat/mention/" + query
                            );
                            search_user.get_all_data(true, false, data => {
                                self.users = data.data;
                            });
                            return this.users.filter(item =>
                                item.name
                                    .toLowerCase()
                                    .startsWith(query.toLowerCase())
                            );
                        },
                        render: () => {
                            let component;
                            let popup;

                            return {
                                onStart: props => {
                                    component = new VueRenderer(MentionList, {
                                        parent: this,
                                        propsData: props
                                    });

                                    popup = tippy("body", {
                                        getReferenceClientRect:
                                            props.clientRect,
                                        appendTo: () => document.body,
                                        content: component.element,
                                        showOnCreate: true,
                                        interactive: true,
                                        trigger: "manual",
                                        placement: "bottom-start"
                                    });
                                },
                                onUpdate(props) {
                                    component.updateProps(props);

                                    popup[0].setProps({
                                        getReferenceClientRect: props.clientRect
                                    });
                                },
                                onKeyDown(props) {
                                    return component.ref?.onKeyDown(props);
                                },
                                onExit() {
                                    popup[0].destroy();
                                    component.destroy();
                                }
                            };
                        }
                    }
                })
            ],
            content: this.comment_text,
            onUpdate() {
                // You can access to both HTML and JSON type of your content
                const json = this.getJSON();
                const html = this.getHTML();
                // send the content to an API here
                this.comment_text = json.content[0].content[0].text
                    ? json.content[0].content[0].text
                    : "";
            }
        });
    },

    beforeDestroy() {
        this.editor.destroy();
    },
  }

<template>
  <div>
    <editor-content :editor="editor" class="form-control"/>
  </div>
</template>

​

如果您有兴趣，可以查看我的代码中的onUpdate部分，以获得更改。