Javascript 图像和可编辑字幕的Tiptap扩展

我想用tiptap扩展实现图像和可编辑标题

ProseMirror就是一个很好的例子，但是tiptap很难实现吗？
如果可能的话，请告诉我你应该写什么代码

我附上我在下面写的代码。
图像和标题已成功添加，但标题尚无法编辑

// ./CustomImage.ts
// @ts-ignore
import { Node, Plugin } from 'tiptap'
// @ts-ignore
import { nodeInputRule } from 'tiptap-commands'

const IMAGE_INPUT_REGEX = /!\[(.+|:?)\]\((\S+)(?:(?:\s+)["'](\S+)["'])?\)/

export default class CustomImage extends Node {
  get name () {
    return 'customImage'
  }

  get schema () {
    return {
      attrs: {
        src: {
          default: null
        },
        alt: {
          default: null
        },
        title: {
          default: null
        },
        caption: {
          default: null
        }
      },
      group: 'block',
      selectable: false,
      draggable: true,
      parseDOM: [
        {
          tag: 'figure'
        },
        [
          {
            tag: 'img[src]',
            getAttrs: (dom: any) => ({
              src: dom.getAttribute('src'),
              title: dom.getAttribute('title'),
              alt: dom.getAttribute('alt')
            })
          },
          {
            tag: 'figcaption'
          }
        ]
      ],
      toDOM: (node: any) => [
        'figure',
        [
          'img',
          {
            src: node.attrs.src,
            title: node.attrs.title,
            alt: node.attrs.alt
          }
        ],
        [
          'figcaption',
          {
            contenteditable: 'true'
          },
          node.attrs.caption
        ]
      ]
    }
  }

  commands ({ type }: any) {
    return (attrs: any) => (state: any, dispatch: any) => {
      const { selection } = state
      const position = selection.$cursor ? selection.$cursor.pos : selection.$to.pos
      const node = type.create(attrs)
      const transaction = state.tr.insert(position, node)
      dispatch(transaction)
    }
  }

  inputRules ({ type }: any) {
    return [
      nodeInputRule(IMAGE_INPUT_REGEX, type, (match: any) => {
        const [, alt, src, title] = match
        return {
          src,
          alt,
          title
        }
      })
    ]
  }

  get plugins () {
    return [
      new Plugin({
        props: {
          handleDOMEvents: {
            drop (view: any, event: any) {
              const hasFiles = event.dataTransfer &&
              event.dataTransfer.files &&
              event.dataTransfer.files.length

              if (!hasFiles) {
                return
              }

              const images = Array
                .from(event.dataTransfer.files)
                .filter((file: any) => (/image/i).test(file.type))

              if (images.length === 0) {
                return
              }

              event.preventDefault()

              const { schema } = view.state
              const coordinates = view.posAtCoords({ left: event.clientX, top: event.clientY })

              images.forEach((image: any) => {
                const reader = new FileReader()

                reader.onload = (readerEvent: any) => {
                  const node = schema.nodes.image.create({
                    src: readerEvent.target.result
                  })
                  const transaction = view.state.tr.insert(coordinates.pos, node)
                  view.dispatch(transaction)
                }
                reader.readAsDataURL(image)
              })
            }
          }
        }
      })
    ]
  }
}

您在地物标题中缺少一个“洞”，使其可编辑。看见我实现了ProseMirror线程中提到的一个解决方案；但是，光标仍可以在图像和figurecaption之间输入文本。我建议将最后一个示例与3个模式一起使用

get schema（）{
返回{
内容：“内联*”，
属性：{src:{default:}，标题：{default:}，
组：'块'，
真的，
是的，
解析域：[{
标签：“数字”，
contentElement:“figcaption”，
getAttrs（dom）{
让img=dom.querySelector（“img”）
log（img、img.getAttribute（'src'）、img.getAttribute（'alt'）；
返回{src:img.getAttribute（'src'），title:img.getAttribute（'alt'）}
}
}],
toDOM:node=>[“figure”，[“img”，node.attrs]，“FigureOption”，0]，
}
}

你能用glitch或其他编辑器制作一个最简单的工作示例吗？这方面有什么进展吗？@kyw请参见下文。kyw，有意识的抱歉回复太晚！如果你能帮助我，我很高兴。很抱歉回复晚了！这个例子与我想做的非常接近。非常感谢你！现在标题中没有值，但是您知道如何将预先指定的值放在这里吗？我想继续编辑。我在上面问题的顶部添加了一个简单的演示GIF动画作为链接。@Mmz您所说的预先指定的值是什么意思？是否要将figcaption中的文本初始化为某个值？因为每个图像的标题值都预先存储在数据库中，所以我想将该值设置为每个图像的初始标题值。每个图像的初始标题值是一个字符串，我在粘贴在问题顶部的GIF动画中适当地输入了“captioncaption11111”。这将作为每个图像的初始标题存储在数据库中。这个描述告诉你我想做什么吗？是的。我认为上面的模式已经做到了这一点。您只需将文档另存为html或json，并使用来自html或json方法的prosemirror加载。将其转换为prosemirror可以使用的html或json格式2。使用NodeType

create

方法从此处创建一个方法，将地物节点初始化到文档中：。查看它如何将属性和内容作为参数。在上面的示例中，您将（src，title）作为attrs传递，而（caption）作为content传递。