XEditor — Rich Text Editor

A rich-text editor based on Tiptap (ProseMirror), with a built-in toolbar supporting bold, italic, strikethrough, headings, lists, blockquotes, code blocks, and image insertion. It binds HTML content bidirectionally via v-model.

Live Demo

<XEditor v-model="content" />

Props / Events

Prop	Type	Default	Description
modelValue (v-model)	string	''	Editor HTML content

Dependency Installation

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

Usage Notes

• Image insertion (toolbar button / paste / drag-drop) uses a local Object URL preview in the demo environment — no backend upload endpoint required.
• Code blocks use lowlight for syntax highlighting, together with a highlight.js theme stylesheet.
• Single image size is limited to 5MB.