基于纯 JavaScript 的富文本编辑器 (tiptap)

注意
如果您不使用 Webpack 或 Rollup 等打包工具，请参阅 CDN 指南。由于 Tiptap 是模块化构建的，您需要在 HTML 中使用 <script type="module"> 来使我们的 CDN 导入工作。

引言

您正在使用纯 JavaScript 或未列出在这里的框架？别担心，我们提供了所需的一切。

1. 安装依赖

为了以下示例，您需要 @tiptap/core（实际的编辑器）、@tiptap/pm（ProseMirror 库）和 @tiptap/starter-kit 。StarterKit 并未包含所有扩展，但包含了最常见的功能。

npm install @tiptap/core @tiptap/pm @tiptap/starter-kit

2. 添加标记

在希望放置编辑器的位置添加以下 HTML：

<div class="element"></div>

3. 初始化编辑器

现在一切就绪，让我们设置实际的编辑器。在您的 JavaScript 中添加以下代码：

import { Editor } from "@tiptap/core";
import StarterKit from "@tiptap/starter-kit";

new Editor({
  element: document.querySelector(".element"),
  extensions: [StarterKit],
  content: "<p>Hello World!</p>",
});

在浏览器中打开您的项目，就可以看到 Tiptap 的运行效果了。干得好！