---
title: "使用 JavaScript 标记视图"
description: "使用原生 JavaScript 在 Tiptap 中构建自定义标记视图。"
canonical_url: "https://tiptap.zhcndoc.com/editor/extensions/custom-extensions/mark-views/javascript"
---

# 使用 JavaScript 标记视图

使用原生 JavaScript 在 Tiptap 中构建自定义标记视图。

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

## 使用 JavaScript 渲染标记视图

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

1. [创建标记扩展](https://tiptap.zhcndoc.com/editor/extensions/custom-extensions/create-new/mark.md)
2. 使用 `addMarkView()` 注册新的标记视图
3. 编写你的渲染函数
4. [配置 Tiptap 使用你的新标记扩展](https://tiptap.zhcndoc.com/editor/getting-started/configure.md)

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

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

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

> **Interactive demo:** [JavaScript](https://embed.tiptap.dev/preview/GuideMarkViews/JavaScript)

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

## 访问标记属性

编辑器会将一些有用的内容传入你的渲染函数，其中之一是 `mark` 属性。它让你可以在标记视图中访问标记的属性。假设你给标记扩展[添加了一个名为 `color` 的属性](https://tiptap.zhcndoc.com/editor/extensions/custom-extensions/extend-existing.md#attributes)，你可以这样访问它：

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

## 添加可编辑内容区域

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

```ts
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` 方法。

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