基于纯 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 的运行效果了。干得好!