前端|使用 Tiptap 代替你的富文本编辑器

在日常开发中，富文本编辑器是一个非常重要的组件。笔者公司之前使用的编辑器了wangEditor、Keditor、quilljs等开源编辑器，但体验并不好，定制性比较差，想在这些编辑器上做二次开发改造用着非常不顺手，直到Tiptap的出现，完美满足了我们的所有需要。

介绍

Tiptap 是一个基于 ProseMirror 构建的富文本编辑器框架，具有高度的可定制性和扩展性。它的主要特点和功能如下：

主要特点

高度可定制：Tiptap 提供了丰富的默认扩展，同时允许开发者轻松地添加自定义节点、标记和插件，以满足特定需求。
模块化设计：Tiptap 的核心是一个轻量级的编辑器，所有功能都是通过扩展实现的，开发者可以根据需要选择和配置扩展。
Vue 和 React 支持：Tiptap 提供了 Vue 和 React 的集成包，方便在这些框架中使用。
协同编辑：Tiptap 支持与 Y.js 集成，实现实时协同编辑功能。
丰富的插件：Tiptap 提供了许多常用的插件，如表格、代码块、任务列表、历史记录等，满足各种复杂的文本编辑需求。

主要功能

文本格式化：支持加粗、斜体、下划线、删除线、标题、段落等基本文本格式化功能。
列表：支持有序列表、无序列表和任务列表。
表格：支持插入和编辑表格。
代码块：支持插入和编辑代码块。
图片和媒体：支持插入图片和其他媒体内容。
历史记录：支持撤销和重做操作。
协同编辑：支持多人实时协同编辑。

安装 Tiptap

首先，我们需要安装 Tiptap 和其依赖项：


text
 代码解读
复制代码
npm install @tiptap/core @tiptap/starter-kit @tiptap/vue-3

创建一个基本的 Tiptap 编辑器

下面是一个基本的 Tiptap 编辑器的实现：


javascript
 代码解读
复制代码


<script>
import { EditorContent, useEditor } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'

export default {
  components: {
    EditorContent,
  },
  setup() {
    const editor = useEditor({
      extensions: [
        StarterKit,
      ],
      content: 'Hello World!
',
    })

    return {
      editor,
    }
  },
  beforeUnmount() {
    if (this.editor) {
      this.editor.destroy()
    }
  },
}
script>

常用 API 介绍

设置内容

可以通过 setContent 方法设置编辑器的内容：


text
 代码解读
复制代码
editor.commands.setContent('新的内容
')

获取内容

可以通过 getHTML 方法获取编辑器的 HTML 内容：


text
 代码解读
复制代码
const html = editor.getHTML()

插入内容

可以通过 insertContent 方法插入内容：


text
 代码解读
复制代码
editor.commands.insertContent('插入的内容
')

插件介绍

Tiptap 提供了丰富的插件，可以满足各种复杂的需求。以下是一些常用插件的介绍和使用示例。

表格插件

表格插件允许在编辑器中插入和编辑表格：


text
 代码解读
复制代码
npm install @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-cell @tiptap/extension-table-header

在编辑器中使用表格插件：


javascript
 代码解读
复制代码

import Table from '@tiptap/extension-table'
import TableRow from '@tiptap/extension-table-row'
import TableCell from '@tiptap/extension-table-cell'
import TableHeader from '@tiptap/extension-table-header'
const editor = useEditor({
  extensions: [
    StarterKit,
    Table.configure({
      resizable: true,
    }),
    TableRow,
    TableCell,
    TableHeader,
  ],
})

代码块插件

代码块插件允许在编辑器中插入和编辑代码块：


text
 代码解读
复制代码
npm install @tiptap/extension-code-block

在编辑器中使用代码块插件：


javascript
 代码解读
复制代码
import CodeBlock from '@tiptap/extension-code-block'
const editor = useEditor({
  extensions: [
    StarterKit,
    CodeBlock,
  ],
})

任务列表插件

任务列表插件允许在编辑器中插入和编辑任务列表：


dart
 代码解读
复制代码
npm install @tiptap/extension-task-list @tiptap/extension-task-item

在编辑器中使用任务列表插件：


javascript
 代码解读
复制代码

import TaskList from '@tiptap/extension-task-list'
import TaskItem from '@tiptap/extension-task-item'
const editor = useEditor({
  extensions: [
    StarterKit,
    TaskList,
    TaskItem,
  ],
})

结论

Tiptap 作为一个强大的富文本编辑器，凭借其高度的可定制性和丰富的插件，成为了现代 Web 开发中的理想选择。通过本文的介绍，相信大家对 Tiptap 有了更深入的了解，并能够在项目中灵活应用这一工具。无论是简单的文本编辑需求，还是复杂的自定义功能，Tiptap 都能提供出色的支持。

介绍