傳遞資料給TipTap中的自訂Vue擴充的方法

Question

我正在嘗試將資料傳遞到在 tiptap 編輯器 內呈現的自訂 vue 元件。我可以傳遞 default 屬性，但為其指派反應值似乎不起作用。

這是 tiptap-node-extension.js 檔案：

import {Node, mergeAttributes} from '@tiptap/core'
import {VueNodeViewRenderer} from '@tiptap/vue-3'
import Component from '@/views/components/vue-component.vue'

export default Node.create({
    parseHTML() {
        return [{ tag: 'vue-component' }]
    },
    renderHTML({ HTMLAttributes }) {
        return ['vue-component', mergeAttributes(HTMLAttributes)]
    },
    addNodeView() {
        return VueNodeViewRenderer(Component)
    },
})

editor 元件的 script setup 部分：

<script setup>
import {useEditor, EditorContent, BubbleMenu} from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
import {Underline} from "@tiptap/extension-underline";
import {TextAlign} from "@tiptap/extension-text-align";
import {Link} from "@tiptap/extension-link";
import VueComponent from '@/js/tiptap-node-extension.js'


const editor = useEditor({
    extensions: [
        StarterKit,
        TextAlign.configure({ types: ['heading', 'paragraph'] }),
        Underline,
        Link,
        VueComponent.extend({
                name: 'vueComponent',
                group: 'block',
                draggable: true,
                addAttributes() {
                    return {
                        src: {
                            default: '123',
                        }
                    }
                },
            }
        ),
    ],
    content: props.modelValue,
    onUpdate: ({ editor }) => {
        emit('update:modelValue', editor.getHTML())
    },
    editable: props.locked ? false : store.admin
})

const sendDataToExtension = async (editor, event) => {
    // Triggered upon event

    ...

    state.src = '123'
    editor.chain().focus().insertContent('<vue-component/>').run()
}
</script>

和 vue 元件：

<script setup>
import {NodeViewWrapper} from '@tiptap/vue-3'

const props = defineProps({
    node: {
        type: Object,
        required: true
    },
    updateAttributes: {
        type: Function,
        required: true,
    }
})

</script>


<template>
  <node-view-wrapper class="vue-component" data-drag-handle="">
    <p>{{ node.attrs.src }}</p>
  </node-view-wrapper>
</template>

src 的default 可以通過，但是當我嘗試指派一個回應物件（在安裝editor 元件後建立的）時，它最終會變成undefined。

這有效：

src: {
    default: '123'
}

但這不是：

...

src: {
    default: state.src
}

...

const sendDataToExtension = async (editor, event) => {
    // triggered upon event

    ...

    state.src = '123'
    editor.chain().focus().insertContent('<vue-component/>').run()

}

如何傳送資料給掛載editor後所建立的vue元件？

嘗試：

editor.chain().focus().insertContent('<vue-component/>', {src: state.src}).run()

Answer 1

首先，我會建議建立一個專門建置的擴展，而不是像現在那樣使用通用的 VueComponent。如果您基於該擴展進行更多擴展，您將有多個擴展競爭該標籤。將您在擴充功能中設定的所有程式碼移至實際擴充功能中，您可以設定任何您想要的標記名稱。

現在我認為問題出在這裡：insertContent 看起來像這樣：

insertContent: (value: Content, options?: {
    parseOptions?: ParseOptions;
    updateSelection?: boolean;
})

內容宣告為

export declare type Content = HTMLContent | JSONContent | JSONContent[] | null;
export declare type HTMLContent = string;
export declare type JSONContent = {
    type?: string;
    attrs?: Record<string, any>;
    content?: JSONContent[];
    marks?: {
        type: string;
        attrs?: Record<string, any>;
        [key: string]: any;
    }[];
    text?: string;
    [key: string]: any;
};

在您的情況下，您必須將 src 屬性新增到您的 html 字串中，但是我建議您在您的情況下使用 JSONContent 類型：

editor.chain().focus().insertContent({type: "vueComponent", attrs:{src: state.src}}).run()

這裡的類型是您設定的元件名稱。

希望這是有道理的，tiptap 上的文件也很好https:// /tiptap.dev/guide/custom-extensions/#attributes# 如果您還有其他問題，請告訴我。