--- title: "纯 JavaScript" description: "学习如何在文档中使用纯 JavaScript 设置 Tiptap 编辑器、安装依赖并初始化编辑器！" canonical_url: "https://tiptap.zhcndoc.com/editor/getting-started/install/vanilla-javascript" --- # 纯 JavaScript 学习如何在文档中使用纯 JavaScript 设置 Tiptap 编辑器、安装依赖并初始化编辑器！ 你是在没有使用 React 或 Vue 之类前端框架的情况下开发吗？没问题，你可以直接在原生 JavaScript 中使用 Tiptap。 > **提示:** > > 这里的“原生 JavaScript”指的是**不使用任何前端框架**，但你仍然在使用带有 **ES module 导入** 的**现代 JavaScript**（例如通过 Vite、Rollup 或 Webpack）。 > > 如果你想完全跳过构建工具，可以查看下面的 [CDN 部分](#without-a-build-tool-cdn)，了解一个可直接在浏览器中运行的配置。 > **提示:** > > 如果你没有使用像 Webpack 或 Rollup 这样的打包工具，请改为按照[CDN](https://tiptap.zhcndoc.com/editor/getting-started/install/cdn.md)指南操作。由于 Tiptap 采用模块化构建，你需要在 HTML 中使用 `
``` ### 带工具栏的完整 HTML 文件 下面是一个可直接复制粘贴的示例，其中包含带格式化按钮的工具栏： ```html Tiptap 编辑器
``` 将此文件保存为 `index.html`，然后在任何现代浏览器中打开它即可——无需服务器。 ### 在线演示 你可以在 CodeSandbox 上查看一个类似的可运行示例： [https://codesandbox.io/s/throbbing-smoke-now37q](https://codesandbox.io/s/throbbing-smoke-now37q?file=/index.html) --- ## 连接工具栏（原生 JS） Tiptap 是无头的，因此它不自带内置工具栏。你需要自己连接 UI 按钮。下面是原生 JavaScript 中的实现方式： ```js import { Editor } from '@tiptap/core' import StarterKit from '@tiptap/starter-kit' const editor = new Editor({ element: document.querySelector('#editor'), extensions: [StarterKit], content: '

Hello World!

', }) // 监听点击并调用 editor 命令 document.querySelector('#bold-button').addEventListener('click', () => { editor.chain().focus().toggleBold().run() }) // 检查某个 mark 或节点是否处于激活状态，以便为按钮设置样式 const isBold = editor.isActive('bold') const isHeading1 = editor.isActive('heading', { level: 1 }) const isBulletList = editor.isActive('bulletList') // 在选择变化时更新按钮的激活状态 editor.on('selectionUpdate', () => { document.querySelector('#bold-button').classList.toggle('is-active', editor.isActive('bold')) }) ``` ### 常用编辑器命令 | 命令 | 代码 | | ------ | ---------------------------------------------------------- | | 粗体 | `editor.chain().focus().toggleBold().run()` | | 斜体 | `editor.chain().focus().toggleItalic().run()` | | 删除线 | `editor.chain().focus().toggleStrike().run()` | | 代码（行内） | `editor.chain().focus().toggleCode().run()` | | 标题 1 | `editor.chain().focus().toggleHeading({ level: 1 }).run()` | | 标题 2 | `editor.chain().focus().toggleHeading({ level: 2 }).run()` | | 无序列表 | `editor.chain().focus().toggleBulletList().run()` | | 有序列表 | `editor.chain().focus().toggleOrderedList().run()` | | 引用块 | `editor.chain().focus().toggleBlockquote().run()` | | 代码块 | `editor.chain().focus().toggleCodeBlock().run()` | | 撤销 | `editor.chain().focus().undo().run()` | | 重做 | `editor.chain().focus().redo().run()` | 可用命令请参阅各个扩展的文档。 --- ## 样式 Tiptap 默认不包含视觉样式——它只输出语义化的 HTML。你可以使用自己的 CSS，或者使用 Tailwind 或 Bootstrap 之类的框架来按你喜欢的方式设置样式。 StarterKit 包含最小化的默认样式，可使文本呈现为一个基础文档的样子。 在 [样式指南](https://tiptap.zhcndoc.com/editor/getting-started/style-editor.md) 中了解更多。 ## 接下来的步骤 - [配置你的编辑器](https://tiptap.zhcndoc.com/editor/getting-started/configure.md) - [为编辑器添加样式](https://tiptap.zhcndoc.com/editor/getting-started/style-editor.md) - [了解更多关于 Tiptap 的概念](https://tiptap.zhcndoc.com/editor/core-concepts/introduction.md) - [学习如何持久化编辑器状态](https://tiptap.zhcndoc.com/editor/core-concepts/persistence.md) - [开始构建你自己的扩展](https://tiptap.zhcndoc.com/editor/extensions/custom-extensions.md)