纯 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 的效果吧。干得漂亮！

样式简述

Tiptap 默认不包含视觉样式。编辑器仅输出语义化的 HTML。你可以使用自己的 CSS 或诸如 Tailwind、Bootstrap 等框架来进行样式设计。

如果你使用了 StarterKit，它会包含最小的默认样式，使文本呈现得像一个基础文档。更多内容请见样式指南。

使用 CDN（无需构建步骤）

如果你想跳过构建工具，下面是一个使用 CDN 导入的可用示例：

<script type="module">
  import { Editor } from 'https://esm.sh/@tiptap/core'
  import StarterKit from 'https://esm.sh/@tiptap/starter-kit'

  new Editor({
    element: document.querySelector('.element'),
    extensions: [StarterKit],
    content: '<p>Hello from CDN!</p>',
  })
</script>

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

后续步骤

Previously安装

Next upReact