纯JavaScript环境下Tiptap模块脚本无响应问题求助

云上老周

2026-8-18

问题解决步骤

1. 修正依赖安装

你当前安装的是Vue 2适配版的Tiptap，但纯JavaScript环境不需要这个，应安装核心库和StarterKit：

npm uninstall @tiptap/vue-2
npm install @tiptap/core @tiptap/starter-kit

2. 修复导入路径问题

浏览器无法直接通过/nodemodules/根路径导入模块，推荐两种解决方案：

方案一：使用本地相对路径（需启动本地服务器）

修改JS文件中的导入路径为相对路径（注意是./node_modules而非根路径的/nodemodules）：

import { Editor } from './node_modules/@tiptap/core/dist/tiptap-core.esm.js'
import StarterKit from './node_modules/@tiptap/starter-kit/dist/tiptap-starter-kit.esm.js'

方案二：使用CDN导入（无需本地node_modules，更适合静态环境）

直接通过CDN引入模块，修改后的文件如下：

HTML文件：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="reviewpapers.css">
    <title></title>
  </head>
  <body>
    <div class="div-block-56" id="editor">
       <p>Hello World!</p>
    </div>
    <script type="module" src="reviewpapers.js"></script>
  </body>
</html>

JS文件：

import { Editor } from 'https://cdn.jsdelivr.net/npm/@tiptap/core@2.1.12/+esm'
import StarterKit from 'https://cdn.jsdelivr.net/npm/@tiptap/starter-kit@2.1.12/+esm'

// 创建编辑器实例
const editor = new Editor({
  extensions: [StarterKit], // StarterKit已包含Document、Paragraph、Text，无需重复导入
  content: 'Hello World!',
  editorProps: {
    attributes: {
      class: 'editor',
    },
  },
})

// 挂载到DOM元素
editor.mount('#editor')
// 输出内容到控制台
console.log(editor.getHTML())