BizRichEditor 富文本编辑器

基于 Quill 2（活跃维护，MIT）封装：v-model HTML 双向绑定、工具栏预设（basic / full）与自定义配置、图片上传契约（不配置走 base64 内联）、只读态、字数统计。公告、商品详情、协议条款等内容编辑。

需额外安装第三方依赖

本组件依赖 quill（可选 peer，组件库不打包）：

npm i quill

并在入口或页面引入主题样式：

import 'quill/dist/quill.snow.css'

组件首次挂载时动态加载 quill 与样式；未安装时组件内显示安装指引。选型说明：原候选 wangEditor 已于 2023-08 停止维护，故采用 Quill。

安全提醒

富文本内容入库 / 回显（v-html）前，请业务侧使用 DOMPurify 等做 XSS 消毒，组件不代为信任内容。

基础用法

v-model 值：<p>请于 <strong>10 月 8 日</strong>前完成国庆值班表确认。</p>

v-model 双向绑定 HTML，basic 工具栏。

<script setup lang="ts">
/** 场景：公告发布——v-model 双向绑定 HTML，基础工具栏 */
import { ref } from 'vue'
import { BizRichEditor } from 'vue3-ep-biz-lib'

const content = ref('<p>请于 <strong>10 月 8 日</strong>前完成国庆值班表确认。</p>')
</script>

<template>
  <div style="max-width: 640px">
    <BizRichEditor v-model="content" placeholder="撰写公告内容..." :height="200" />
    <p style="margin-top: 8px; font-size: 12px; color: var(--el-text-color-secondary)">
      v-model 值：<code>{{ content.slice(0, 80) }}{{ content.length > 80 ? '...' : '' }}</code>
    </p>
  </div>
</template>

显示代码

full 工具栏

字体 / 颜色 / 对齐 / 引用 / 代码块全量排版。

<script setup lang="ts">
/** 场景：商品详情——full 工具栏（字体/颜色/对齐/引用/代码块） */
import { ref } from 'vue'
import { BizRichEditor } from 'vue3-ep-biz-lib'

const content = ref('<h2>机械键盘 87 键</h2><p><em>热插拔轴体</em>，PBT 键帽</p>')
</script>

<template>
  <div style="max-width: 680px">
    <BizRichEditor v-model="content" toolbar="full" :height="240" placeholder="编辑商品详情..." />
  </div>
</template>

显示代码

图片上传契约

image-upload 注入（返回 URL），图片走对象存储而非 base64 内联。

<script setup lang="ts">
/** 场景：图片上传契约——imageUpload 注入，图片走业务侧对象存储而非 base64 内联 */
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { BizRichEditor } from 'vue3-ep-biz-lib'
import type { BizRichEditorImageUpload } from 'vue3-ep-biz-lib'

const content = ref('<p>在下方插入商品实拍图：</p>')

// 模拟上传：返回对象存储 URL（业务侧替换为真实接口）
const upload: BizRichEditorImageUpload = async (file) => {
  await new Promise((r) => setTimeout(r, 800))
  ElMessage.success(`已上传 ${file.name}（${Math.round(file.size / 1024)}KB）`)
  return 'https://dummy.example.com/uploads/product-shot.png'
}
</script>

<template>
  <div style="max-width: 640px">
    <BizRichEditor v-model="content" :image-upload="upload" :height="200" placeholder="编辑内容，点击工具栏图片按钮上传" />
  </div>
</template>

显示代码

自定义工具栏

toolbar 传数组即 Quill 原生配置：法务场景收窄排版能力，保证条款版式统一。

协议条款场景收窄排版能力（Quill 原生配置数组）。

<script setup lang="ts">
/** 场景：自定义工具栏——协议条款只保留标题/加粗/列表（防排版失控） */
import { ref } from 'vue'
import { BizRichEditor } from 'vue3-ep-biz-lib'

const content = ref('<h3>服务协议</h3><ol><li>服务范围……</li><li>双方权利义务……</li></ol>')

const toolbar = [
  [{ header: [2, 3, false] }],
  ['bold'],
  [{ list: 'ordered' }, { list: 'bullet' }],
]
</script>

<template>
  <div style="max-width: 640px">
    <BizRichEditor v-model="content" :toolbar="toolbar" :height="200" />
    <p style="margin-top: 8px; font-size: 13px; color: var(--el-text-color-secondary)">
      toolbar 传数组即 Quill 原生配置：法务场景收窄排版能力，保证条款版式统一。
    </p>
  </div>
</template>

显示代码

编辑回显与 XSS 提醒

安全提醒：富文本入库前 / 回显（v-html）前，请业务侧使用 DOMPurify 等做 XSS 消毒，组件不代为信任内容

编辑 / 预览切换，回显前消毒提醒。

<script setup lang="ts">
/** 场景：编辑 + 回显 + XSS 提醒——详情页回显富文本务必消毒 */
import { ref } from 'vue'
import { ElAlert, ElButton } from 'element-plus'
import { BizRichEditor } from 'vue3-ep-biz-lib'

const content = ref('<p>会议纪要：<b>周五 14:00</b> 评审排期。</p>')
const editing = ref(true)
</script>

<template>
  <div style="max-width: 640px">
    <BizRichEditor v-if="editing" v-model="content" :height="180" />
    <div
      v-else
      style="border: 1px solid var(--el-border-color); border-radius: 4px; padding: 14px; min-height: 120px"
      v-html="content"
    />

    <div style="margin-top: 10px; display: flex; gap: 10px; align-items: center">
      <ElButton size="small" type="primary" @click="editing = !editing">
        {{ editing ? '保存并预览' : '重新编辑' }}
      </ElButton>
    </div>

    <ElAlert
      style="margin-top: 10px"
      type="warning"
      :closable="false"
      show-icon
      title="安全提醒：富文本入库前 / 回显（v-html）前，请业务侧使用 DOMPurify 等做 XSS 消毒，组件不代为信任内容"
    />
  </div>
</template>

显示代码

外部控制（expose）

getText 字数统计 / focus / clear。

<script setup lang="ts">
/** 场景：外部控制——expose getText 字数统计 / focus / clear */
import { ref } from 'vue'
import { ElButton, ElTag } from 'element-plus'
import { BizRichEditor } from 'vue3-ep-biz-lib'
import type { BizRichEditorInstance } from 'vue3-ep-biz-lib'

const editorRef = ref<BizRichEditorInstance>()
const content = ref('<p>活动报名通知……</p>')
const wordCount = ref<number>()
</script>

<template>
  <div style="max-width: 640px">
    <BizRichEditor ref="editorRef" v-model="content" :height="180" />
    <div style="margin-top: 10px; display: flex; gap: 8px; align-items: center">
      <ElButton size="small" @click="editorRef?.focus()">focus()</ElButton>
      <ElButton size="small" @click="wordCount = (editorRef?.getText() ?? '').trim().length">统计字数</ElButton>
      <ElButton size="small" @click="editorRef?.clear(); wordCount = 0">clear()</ElButton>
      <ElTag v-if="wordCount !== undefined" size="small" type="info">{{ wordCount }} 字</ElTag>
    </div>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
model-value / v-model	string	''	HTML 内容
placeholder	string	'请输入内容...'	占位提示
height	number	280	编辑区高度（px）
toolbar	'basic' | 'full' | 配置数组	'basic'	工具栏预设或 Quill 原生配置
image-upload	(file: File) => Promise<string>	—	图片上传实现（返回 URL）；不配置走 base64 内联
disabled	boolean	false	只读
show-error	boolean	false	外部校验错误标红边框

Events

事件名	参数	说明
update:model-value	(value: string)	内容更新（空内容返回空串）
change	(payload: { html: string; text: string })	内容变化携带纯文本

Expose

名称	类型	说明
getQuill	() => Quill | null	获取 Quill 实例（高级定制）
getText	() => string	纯文本内容
focus	() => void	聚焦
clear	() => void	清空内容