TipTap의 사용자 정의 Vue 확장에 데이터를 전달하는 방법

Question

tiptap 编辑器 内呈现的自定义 vue 组件。我可以传递 default 속성에 데이터를 전달하려고 하는데 반응 값을 할당하는 것이 작동하지 않는 것 같습니다.

이것은 tiptap-node-extension.js 파일:

으아악

editor 组件的 script setup 부분:

으아악

및 vue 组件:

으아악

src 的 default 可以通过，但是当我尝试分配一个响应对象（在安装 editor 组件后创建的）时，它最终会变成 undefined.

이것은 작동합니다:

으아악

하지만 그렇지 않습니다:

으아악

마운트editor后创建的vue组件에 데이터를 보내는 방법은 무엇입니까?

해 보세요:

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)
    },
})

Answer 1

먼저 지금처럼 일반적인 VueComponent 확장 기능을 사용하는 대신 특수 목적의 확장 기능을 만드는 것이 좋습니다. 해당 확장을 기반으로 더 많은 확장을 구축하면 해당 레이블을 놓고 경쟁하는 여러 확장이 있게 됩니다. 확장 프로그램에 설정한 코드를 모두 실제 확장 프로그램으로 옮기고 원하는 태그 이름을 설정할 수 있습니다.

제 생각에 문제는 다음과 같습니다. insertContent 다음과 같습니다.

으아아아

콘텐츠는

로 선언되었습니다. 으아아아

귀하의 경우에는 HTML 문자열에 src 속성을 추가해야 하지만, 귀하의 경우에는 JSONContent 유형을 사용하는 것이 좋습니다.

으아아아

여기서의 유형은 귀하가 설정한 구성 요소 이름입니다.

이것이 이해가 되기를 바라며, Tiptap의 문서도 훌륭하길 바랍니다https:// /tiptap.dev/guide/custom-extensions/#attributes 추가 질문이 있으면 알려주시기 바랍니다.