Vanilla JavaScript

你是否使用纯 JavaScript 或未列出的框架？不用担心，我们提供你所需的全部内容。

提示

如果你没有使用像 Webpack 或 Rollup 这样的打包工具，请改为按照CDN指南操作。由于 Tiptap 采用模块化构建，你需要在 HTML 中使用 <script type="module"> 来使我们的 CDN 导入生效。

安装依赖

对于以下示例，你需要安装 @tiptap/core（实际的编辑器核心）、@tiptap/pm（ProseMirror 库）和 @tiptap/starter-kit。 StarterKit 不包含所有扩展，仅包含最常用的扩展。

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

添加标记

在你希望挂载编辑器的位置添加以下 HTML：

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

初始化编辑器

一切准备就绪，现在开始设置编辑器。将以下代码添加到你的 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 的效果吧。干得漂亮！