XEditor — 富文本编辑器

基于 Tiptap（ProseMirror） 的富文本编辑器，内置工具栏，支持加粗、斜体、删除线、标题、列表、引用、代码块与图片插入，通过 v-model 双向绑定 HTML 内容。

实时演示

<XEditor v-model="content" />

Props / Events

属性	类型	默认值	说明
modelValue（v-model）	string	''	编辑器 HTML 内容

依赖安装

npm install @tiptap/vue-3 @tiptap/starter-kit @tiptap/extension-image @tiptap/extension-code-block-lowlight lowlight

注意事项

• 图片插入（工具栏按钮 / 粘贴 / 拖拽）在演示环境使用本地 Object URL 预览，无需后端上传接口。
• 代码块使用 lowlight 语法高亮，配合 highlight.js 主题样式。
• 单张图片大小限制 5MB。