富文本编辑器实战：contenteditable与Vue动态组件的深度整合

做前端开发七年，遇到过无数次这样的场景：产品经理指着设计稿说「这里要放一个可编辑区域，能插入图片、视频、标签」。第一反应是用textarea，结果发现连个加粗都做不到。然后改用input，问题依旧。最后只能引入一整个富文本编辑器包，体积膨胀200KB，用户加载要3秒。

直到发现了contenteditable，一切变得不同。

contenteditable的核心优势

传统input和textarea的本质缺陷在于：它们只能处理纯文本。浏览器将其内容视为字符串，不会解析任何HTML结构。这意味着想在编辑区放入一个可点击的标签、一张缩略图、一个交互按钮？门都没有。

contenteditable属性的出现彻底打破了这一限制。它将任意DOM元素转变为可编辑状态，开发者可以在其中插入任何HTML结构。div标签配合contenteditable="true"，就是最轻量的富文本编辑器起点。

<divcontenteditable="true"></div>

Vue环境下的动态组件挂载

个人项目中最常见的需求是：插入一个Vue组件到编辑器中。普通DOM操作无法处理Vue组件的生命周期、响应式数据、事件绑定。解决方案是使用Vue提供的createAppAPI。

核心思路分三步：首先创建占位元素；其次使用createApp挂载Vue组件到该占位元素；最后通过h函数创建虚拟节点控制组件渲染。

const app = createApp({
render:()=>h(Tag,{
text:featureData.title,
onClose:()=>handleClose()
})
});
app.mount(placeholder);

h函数的灵活运用

h函数是Vue虚拟DOM的核心。掌握其用法，动态渲染问题迎刃而解。参数结构为：h(type,props,children)。type可以是HTML标签名或组件；props控制属性、props、事件；children处理内容。

实战中最有用的模式是条件渲染和插槽传递。组件场景下，children需通过插槽函数形式书写。

选区操作实现文本格式化

富文本编辑器另一核心能力是对选中文字进行处理。通过window.getSelection获取选区对象，createRange创建范围对象，setStartAfter和setEndAfter精确定位。选中后可以获取内容、应用格式、替换选区。

这套API组合足以实现加粗、斜体、标题、链接等常见格式化功能。

方法提炼与应用指导

总结实战经验：contenteditable适合轻量级富文本场景，开发成本低、定制灵活；createApp解决Vue组件嵌入问题，是动态内容编辑的技术基础；选区API提供格式化能力。

技术选型时记住一点：能用原生实现的功能，不要引入第三方库。性能差距在复杂场景下会非常明显。