RichEditor 富文本编辑器

基于 WangEditor v5 封装的富文本编辑器组件，支持图文混排、图片/视频上传（可配 MinIO 或任意 HTTP 接口）、只读预览等场景。

基础用法

基础富文本编辑器

基础富文本编辑器

加载中...

HTML 内容长度: 63 字符

<template>
  <div class="demo-wrapper">
    <div class="demo-item">
      <p class="demo-label">基础富文本编辑器</p>
      <HxRichEditor v-model="content1" />
      <p class="demo-value">HTML 内容长度: {{ content1.length }} 字符</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { HxRichEditor } from "@whhx/ui"

const content1 = ref("<p>欢迎使用富文本编辑器，支持<strong>加粗</strong>、<em>斜体</em>、链接、图片上传等功能。</p>")
</script>

只读预览

通过 read-only 属性切换为只读模式，适合文章预览、公告展示等只读场景。

只读预览模式

只读模式（用于预览）

加载中...

HTML 内容长度: 57 字符

<template>
  <div class="demo-wrapper">
    <div class="demo-item">
      <p class="demo-label">只读模式（用于预览）</p>
      <HxRichEditor v-model="content2" read-only />
      <p class="demo-value">HTML 内容长度: {{ content2.length }} 字符</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { HxRichEditor } from "@whhx/ui"

const content2 = ref("<p>这是一段<strong>只读</strong>内容，用户无法编辑，适合用于文章预览、公告展示等场景。</p>")
</script>

上传配置

通过 upload-url 或 upload-image / upload-video 分别配置图片和视频的上传接口。所有文件都会通过统一封装的 request 方法上传到后端接口，不再进行客户端 Base64 转换。

支持两种上传方式：

• HTTP 接口：传入上传地址，组件使用 request.post 自动 POST FormData，并通过 responseAdapter 从响应体解析资源 URL
• MinIO 直传：传入 MinIO 配置，组件直接在浏览器端签名上传到 MinIO，无需后端介入

上传图片 / 视频

配置上传地址（图片 / 视频）

加载中...

HTML 内容长度: 121 字符

所有图片和视频都会通过统一的 request 方法上传到后端接口， 不再进行客户端 Base64 转换。默认上传接口为 /api/upload。

<template>
  <div class="demo-wrapper">
    <div class="demo-item">
      <p class="demo-label">配置上传地址（图片 / 视频）</p>
      <HxRichEditor
        v-model="content3"
        :upload-url="uploadUrl"
        :upload-image="{ url: uploadUrl,extraData:{ type:'image' } }"
        :upload-video="{ url: uploadUrl,extraData:{ type:'video' }  }"
        :response-adapter="(res)=>res.data.url"
      />
      <p class="demo-value">HTML 内容长度: {{ content3.length }} 字符</p>
      <p class="demo-hint">
        所有图片和视频都会通过统一的 <code>request</code> 方法上传到后端接口，
        不再进行客户端 Base64 转换。默认上传接口为 <code>/api/upload</code>。
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { HxRichEditor } from "@whhx/ui"

const content3 = ref("<p>支持<em>图片</em>和<em>视频</em>上传，可通过 <code>uploadUrl</code> 或 <code>uploadImage</code> / <code>uploadVideo</code> 分别配置。</p>")

/** 上传接口地址 */
const uploadUrl = "/api/upload"
</script>

<style scoped>
.demo-hint {
	margin-top: 6px;
	font-size: 12px;
	color: var(--el-text-color-placeholder);
	line-height: 1.5;
}
.demo-hint code {
	padding: 0 4px;
	background: var(--el-fill-color-light);
	border-radius: 3px;
	font-size: 12px;
}
</style>

API

Props

参数	说明	类型	默认值
v-model	绑定值（HTML 字符串）	string	''
read-only	是否只读	boolean	false
upload-url	图片/视频统一上传接口地址	string	''
upload-image	图片上传配置（优先级高于 upload-url）	UploadOptions	{}
upload-video	视频上传配置	UploadOptions	{}
response-adapter	从上传响应体解析资源 URL	(res: any) => string	取 res.url / res.data / res.data.url / res.path

UploadOptions

参数	说明	类型	默认值
url	上传接口地址	string	-
headers	请求头	Record<string, string>	-
field-name	FormData 字段名	string	'file'
extra-data	额外表单字段	Record<string, string | Blob>	-
minio	MinIO 直传配置	MinioConfig	-

MinioConfig

参数	说明	类型
endpoint	MinIO 服务地址	string
bucket	存储桶名称	string
access-key	Access Key	string
secret-key	Secret Key	string

Emits

事件名	说明	参数
update:modelValue	内容变化时触发	(html: string)
upload-success	文件上传成功后触发	(url: string)