uni-app富文本编辑器使用 uni-app如何集成rich-text-uni-app-PHP中文网

uni-app中rich-text仅支持富文本渲染，不可编辑；需用web-view内嵌quill等编辑器实现编辑功能，注意图片上传、光标定位及ios/android兼容性问题。

uni-app富文本编辑器使用 uni-app如何集成rich-text

rich-text是uni-app的只读组件，只渲染HTML字符串，不支持光标定位、内容编辑、格式实时响应。想实现“富文本编辑”，本质是找一个可编辑容器 + 自行处理格式逻辑，或接入第三方编辑器SDK。

常见错误现象：rich-text绑定了v-model没反应；点击后无法聚焦；粘贴带样式的文字样式丢失；回车键直接跳转页面（因为默认行为未阻止）。

真正能编辑的替代方案只有：textarea（纯文本）、web-view内嵌Web富文本编辑器（如Tiptap、Quill）、或原生插件（如iOS/Android平台调用系统级富文本控件）
如果只是展示后台返回的富文本内容，rich-text完全够用；但只要涉及用户输入、加粗/标题/图片插入等操作，就必须换方案
用web-view时注意：本地HTML需通过uni.postMessage与Vue页面通信；iOS下web-view对contenteditable支持更稳，Android部分机型可能光标偏移

Quill轻量、API清晰、社区维护活跃，比TinyMCE更适合uni-app这类跨端场景。关键是把编辑器实例和uni-app的数据流接通。

使用场景：需要支持加粗、斜体、标题、有序/无序列表、图片上传（base64或上传后替换src）的轻量编辑需求。

在static/editor.html中引入Quill CDN，并初始化new Quill('#editor', { theme: 'snow' })
监听text-change事件，每次变化后调用window.uni.postMessage({ type: 'content-change', html: editor.root.innerHTML })
uni-app页面里用<web-view :src="editorUrl"></web-view>加载，通过uni.$on('message')接收HTML内容并同步到data
注意Quill输出的HTML默认含内联样式，若需适配小程序端rich-text渲染，得用正则或DOMParser清洗掉style属性，否则小程序不识别

Quill的image模块默认调用insertEmbed插入base64，但大图会导致data URI超长、iOS WebView崩溃、小程序包体积激增。真实项目中必须拦截并替换为上传后URL。

常见错误现象：插入图片后页面卡顿；真机调试时图片显示空白；上传成功但编辑器里没更新src。

禁用默认图片模块：modules: { toolbar: { container: [['bold', 'italic'], [{ 'header': [1, 2, false] }], ['image']] }, image: false }
自定义toolbar按钮，点击后调用uni.chooseImage，上传成功后执行quill.insertEmbed(quill.getSelection().index, 'image', uploadedUrl)
务必检查uploadedUrl是否带协议（如https://），否则在web-view里相对路径会404
Android web-view对blob: URL支持差，别传blob，一律走HTTP(S)地址

不是bug，是底层WebView能力差异。绕不开，只能针对性处理。

iOS下contenteditable光标位置精准，Android部分机型（尤其旧版微信X5内核）光标常卡在段首；解决方案：每次focus后手动quill.setSelection(quill.getLength())
Android web-view对document.execCommand兼容性差，Quill底层部分格式操作会fallback失败；建议关闭formats中非必需项，比如去掉script、iframe等高危标签
键盘收起时，iOS会触发resize事件，Android不会；若编辑器高度随内容自适应，需监听uni.onKeyboardHeightChanged手动调整web-view高度