你是否在使用原生 JavaScript，或者某个未列出的框架？不用担心，我们提供了你需要的一切。

提示

如果你没有使用 Webpack 或 Rollup 等打包工具，请参考 CDN 指南。由于 Tiptap 是模块化构建的，因此你需要在 HTML 中使用 <script type="module"> 以正确导入我们的 CDN 资源。

安装依赖

在以下示例中，你需要安装 @tiptap/core（核心编辑器）、@tiptap/pm（ProseMirror 库）以及 @tiptap/starter-kit。StarterKit 仅包含最常见的扩展，而不是所有扩展。 

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

添加标记

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

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

初始化编辑器

一切就绪，现在让我们设置编辑器。将以下代码添加到你的 JavaScript 文件中： 

  1. import { Editor } from '@tiptap/core'
  2. import StarterKit from '@tiptap/starter-kit'
  4. new Editor({
  5.   element: document.querySelector('.element'),
  6.   extensions: [StarterKit],
  7.   content: '<p>Hello World!</p>',
  8. })

打开你的项目，在浏览器中查看 Tiptap 的实际运行效果。干得好！