@looohz/rich-editor

@looohz/rich-editor

Vue 3 富文本编辑器组件 — 支持 WYSIWYG、Markdown、分屏预览三模式，支持 Word、URL 和本地视频导入。

安装

npm install @looohz/rich-editor

快速开始

<script setup lang="ts">
import { ref } from 'vue'
import { RichEditor } from '@looohz/rich-editor'
import '@looohz/rich-editor/style.css'

const content = ref('# Hello World')
</script>

<template>
  <RichEditor v-model="content" />
</template>

渲染已保存内容

编辑器的 v-model 保存为 Markdown 字符串，可用 ContentRenderer 在页面上渲染。

<script setup lang="ts">
import { ContentRenderer } from '@looohz/rich-editor'
import '@looohz/rich-editor/style.css'

const savedContent = '# Hello World'
</script>

<template>
  <ContentRenderer :model-value="savedContent" />
</template>

特性

• 三种编辑模式：WYSIWYG / Markdown / 分屏预览，一键切换
• 多源导入：从 .docx Word 文件或任意 URL 导入内容
• 媒体上传：在 WYSIWYG、Markdown 和分屏模式中导入图片与视频
• 多格式导出：Markdown、HTML、纯文本
• 主题定制：CSS 变量驱动，支持暗色模式
• TypeScript：完整类型定义
• 轻量：Vue 3 peerDependency，不重复打包

文档

更多用法见本仓库 docs/ 目录。

License

MIT