核心是实现v-model双向绑定、可控生命周期、可透传配置和可收敛样式：接收modelValue prop并触发update:modelValue事件；onMounted初始化、onBeforeUnmount销毁实例；通过props暴露height、toolbarKeys、uploadImg等定制项；用scoped CSS变量统一主题风格。
在 Vue 3 中把富文本编辑器封装成自定义表单组件，核心是让它像原生 <input> 或 <el-input> 那样支持 v-model、禁用状态、校验联动和统一主题风格。不靠“贴代码”，而是抓住四个关键点：双向绑定对齐、生命周期可控、配置可透传、样式可收敛。
一、v-model 双向绑定必须严格对齐表单语义
富文本组件不是普通输入框，但作为表单控件，它必须遵循 Vue 的表单规范：
- 接收
modelValueprop（不能只叫value），触发update:modelValue事件回传 HTML 字符串； - 内部用
ref或shallowRef管理编辑器实例，避免响应式开销； - 内容变更时建议加防抖（如 300ms），防止高频触发影响性能或校验逻辑；
- 禁用状态（
disabledprop）不仅要灰掉 UI，还要调用编辑器的disable()/enable()方法，确保无法聚焦和输入。
二、编辑器实例生命周期必须由组件自主管理
富文本编辑器容易引发内存泄漏或销毁报错，封装时必须收口实例创建与释放：
- 在
onMounted中初始化编辑器，用@onCreated钩子拿到实例并存入shallowRef； - 在
onBeforeUnmount中显式调用editor.destroy()，清空定时器、事件监听和 DOM 引用； - 如果父组件会动态显示/隐藏（比如
v-if切换），建议加v-show+ 手动focus()/blur()控制焦点，避免重复创建。
三、高频定制需求通过 props 暴露，不写死逻辑
业务中图片上传、工具栏精简、默认高度、占位文字等几乎每个页面都不同，应设计为可配置项：
立即学习“前端免费学习笔记（深入）”；
-
height：支持数字（px）或字符串（如"400px"、"100%"）； -
toolbarKeys：数组形式传入菜单项，例如["bold", "link", "image"]，内部自动过滤无效项； -
uploadImg：接收一个返回 Promise 的函数，参数为文件列表，resolve 图片 URL 数组，便于对接不同上传服务； -
placeholder：透传给编辑器配置，保持与表单其他控件一致的提示体验。
四、样式与主题必须隔离且可继承
中后台系统常换主题色或全局字体，富文本组件不能破坏整体一致性：
- 用
scoped+ CSS 变量承接主题，例如--rich-text-border-color: var(--el-border-color)； - 工具栏按钮图标、hover 色、选中态全部用变量控制，不写死
#409eff这类值； - 编辑区内容默认继承父级字号、行高、字体栈，避免出现“一段文字两种字体”的割裂感；
- 若需 Shadow DOM 隔离（如跨框架复用），可用
defineCustomElement封装，但普通中后台项目用 scoped CSS 更轻量。
