Vue3 Script Setup中Tiptap2浮动菜单无法渲染求助

问题诊断 #

查看你的示例代码后，浮动菜单无法渲染主要源于以下几个核心问题：

• 未正确导入Tiptap官方提供的FloatingMenu Vue组件
• 缺失浮动菜单依赖的基础样式文件
• 模板中使用组件时未正确绑定编辑器实例并配置菜单操作项

修复步骤 #

1. 补充必要的导入与样式 #

在App.vue的<script setup>中添加FloatingMenu组件导入，同时在样式部分引入Tiptap基础样式和浮动菜单专属样式：

<script setup>
import { ref } from 'vue'
import { Editor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
// 新增：导入FloatingMenu组件
import { FloatingMenu } from '@tiptap/vue-3'
import { Bold, Italic, Underline } from '@tiptap/extension-bold'

const editor = ref(null)

const editorOptions = {
  extensions: [
    StarterKit,
    Bold,
    Italic,
    Underline,
  ],
  content: `
    <p>选中这段测试文本，即可触发浮动菜单显示</p>
  `,
}
</script>

<style>
/* 新增：导入Tiptap基础样式与浮动菜单样式 */
@import '@tiptap/core/dist/style.css';
@import '@tiptap/extension-floating-menu/dist/style.css';

/* 可选：自定义菜单外观 */
.tiptap-floating-menu {
  border: 1px solid #eee;
  padding: 8px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
</style>

2. 修正模板中的组件使用逻辑 #

在模板内正确绑定编辑器实例到FloatingMenu组件，并添加对应的格式操作按钮：

<template>
  <div>
    <EditorContent :editor="editor" />
    <!-- 修正：绑定editor实例，添加菜单操作按钮 -->
    <FloatingMenu v-if="editor" :editor="editor">
      <button 
        @click="editor.chain().focus().toggleBold().run()" 
        :class="{ 'is-active': editor.isActive('bold') }"
      >
        加粗
      </button>
      <button 
        @click="editor.chain().focus().toggleItalic().run()" 
        :class="{ 'is-active': editor.isActive('italic') }"
      >
        斜体
      </button>
      <button 
        @click="editor.chain().focus().toggleUnderline().run()" 
        :class="{ 'is-active': editor.isActive('underline') }"
      >
        下划线
      </button>
    </FloatingMenu>
  </div>
</template>

3. 验证修复效果 #

完成修改后，选中编辑器内的文本，浮动菜单会自动跟随选区显示，点击按钮可直接触发对应的文本格式操作。

关键注意事项 #

• Vue3 Script Setup中无需手动注册组件，直接导入即可使用
• 必须导入浮动菜单的样式文件，否则菜单会因无样式而不可见
• 通过v-if="editor"判断编辑器实例是否初始化完成，避免组件渲染时的报错

内容的提问来源于stack exchange，提问作者Samuel M. Bednarz