如何绑定Tiptap编辑器内容并解决getHTML调用报错问题？

问题根因 #

• 你的子编辑器组件没有实现v-model对应的双向绑定逻辑，父组件传入的v-model无法同步编辑器实时内容
• getHTML is not a function报错是因为调用该方法时，editor实例还未完成初始化，或者调用对象不是正确的editor实例

修复步骤 #

1. 修改子编辑器组件代码，实现双向绑定和安全获取内容 #

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

<script>
import { Editor, EditorContent } 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: {
        value: String, // 适配v-model的默认prop
        comment_type: String,
        comment_id: Number,
        edit_mode: Boolean
    },
    data() {
        return {
            editor: null,
            limit: 280,
            users: [],
            comment_da: {},
            edit_comment_da: {}
        };
    },
    watch: {
        // 监听父组件传入的value变化，更新编辑器内容
        value(newVal) {
            // 避免和编辑器update事件触发循环
            if (this.editor && this.editor.getHTML() !== newVal) {
                this.editor.setContent(newVal || '');
            }
        }
    },
    mounted() {
        const self = this;
        const CustomParagraph = Paragraph.extend({
            addKeyboardShortcuts() {
                return {
                    "Shift-Enter": () => self.addComment()
                };
            }
        });
        this.editor = new Editor({
            extensions: [
                Document,
                CustomParagraph,
                Text,
            ],
            content: this.value || '',
            // 监听编辑器内容更新，同步给父组件v-model
            on: {
                update() {
                    self.$emit('input', this.getHTML());
                }
            }
        });
    },
    beforeDestroy() {
        this.editor.destroy();
    },
    methods: {
        addComment() {
            // 需要提交内容时，安全调用getHTML
            if (!this.editor) return;
            const htmlContent = this.editor.getHTML();
            const textContent = this.editor.getText();
            // 后续提交API的逻辑写在这里即可
        }
    }
}
</script>

2. 修改父组件调用逻辑 #

父组件不需要额外传comment_text属性，直接用v-model即可自动同步内容：

<template>
<div class="m-messenger__form-controls">
    <editor 
        v-model="comment_text"
        :comment_type="'comment'"
        :comment_id="comment_da.id"
    />
    <!-- 测试查看同步的内容 -->
    <div>同步的编辑器HTML内容：{{ comment_text }}</div>
</div>
</template>
<script>
import editor from "./components/editor";
export default {
    components: {
        editor
    },
    data() {
        return {
            comment_da: {},
            comment_text: "",
        }
    },
    methods: {
        // 提交到API时直接取this.comment_text即可
        submitComment() {
            console.log('要提交的编辑器内容：', this.comment_text)
            // 调用你的API接口即可
        }
    }
}
</script>

注意事项 #

• 所有调用editor实例方法（比如getHTML、setContent）的地方，都要先判断this.editor是否存在，避免实例未初始化时报错
• 如果需要纯文本内容，替换getHTML()为getText()即可

内容的提问来源于stack exchange，提问作者Niaz Estefaie