Kaedah untuk menghantar data kepada sambungan Vue tersuai dalam TipTap

Question

Saya cuba menghantar data ke dalam atribut tiptap 编辑器 内呈现的自定义 vue 组件。我可以传递 default, tetapi memberikannya nilai reaktif nampaknya tidak berkesan.

Ini ialah tiptap-node-extension.js Fail:

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 Bahagian:

<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>

dan 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.

Ini berfungsi:

src: {
    default: '123'
}

Tetapi ini bukan:

...

src: {
    default: state.src
}

...

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

    ...

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

}

Bagaimana untuk menghantar data ke mounteditor后创建的vue组件?

Cuba:

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

Answer 1

Pertama sekali, saya akan mengesyorkan anda membuat sambungan yang dibina khas daripada menggunakan VueComponent generik seperti yang anda lakukan sekarang. Jika anda membina lebih banyak sambungan berdasarkan sambungan itu, anda akan mempunyai berbilang sambungan bersaing untuk label tersebut. Alihkan semua kod yang anda tetapkan dalam sambungan ke dalam sambungan sebenar dan anda boleh menetapkan sebarang nama teg yang anda mahu.

Sekarang saya rasa masalahnya ada di sini: insertContent Ia kelihatan seperti ini:

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

Kandungan diisytiharkan sebagai

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;
};

Dalam kes anda, anda perlu menambah atribut src pada rentetan html anda, tetapi saya mengesyorkan anda menggunakan JSONContent taip dalam kes anda:

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

Jenis di sini ialah nama komponen yang anda tetapkan.

Semoga ini masuk akal dan dokumentasi pada tiptap juga bagushttps:// /tiptap.dev/guide/custom-extensions/#attributes Jika anda mempunyai sebarang pertanyaan lanjut sila beritahu saya.