使用 JavaScript 标记视图

如果你习惯不使用 Vue 或 React 这类框架，使用这两者可能会觉得太复杂。好消息是：你可以在标记视图中使用原生 JavaScript。你只需要了解一些小知识点，下面我们逐一讲解。

使用 JavaScript 渲染标记视图

要在编辑器内渲染标记视图，你需要完成以下步骤：

创建标记扩展
使用 addMarkView() 注册新的标记视图
编写你的渲染函数
配置 Tiptap 使用你的新标记扩展

下面是你的标记扩展可能的写法：

import { Mark } from '@tiptap/core'

export default Mark.create({
  // 其他选项...
  addMarkView() {
    return ({ mark, HTMLAttributes }) => {
      const dom = document.createElement('b')
      const contentDOM = document.createElement('span')

      dom.appendChild(contentDOM)

      return {
        dom,
        contentDOM,
      }
    }
  },
})

理解了吗？让我们看看实际效果。你可以自由复制以下示例开始尝试。

该标记视图甚至可以与编辑器交互。接下来看看这是如何实现的。

访问标记属性

编辑器会将一些有用的内容传入你的渲染函数，其中之一是 mark 属性。它让你可以在标记视图中访问标记的属性。假设你给标记扩展添加了一个名为 color 的属性，你可以这样访问它：

addMarkView() {
  return ({ mark }) => {
    console.log(mark.attrs.color)
  }
}

添加可编辑内容区域

标记包裹着编辑器中的部分文本。如果你想让标记内容可编辑，可以给 contentDOM 元素添加 contenteditable 属性。

addMarkView() {
  return ({ mark, HTMLAttributes }) => {
    const dom = document.createElement('b')
    const contentDOM = document.createElement('span')

    contentDOM.contentEditable = 'true'
    dom.appendChild(contentDOM)

    return {
      dom,
      contentDOM,
    }
  }
}

明白了吗？你可以随意操作，只要你返回一个标记视图的容器和一个用于内容的容器即可。

更新标记视图属性

如果您想更新标记视图的属性，可以在 MarkView 实例上调用 updateAttributes 方法。

markView.updateAttributes({
  id: 'new-id',
  color: 'blue',
})