如何在react-native-web中创建可正常运行的富文本编辑器？

目前确实不存在开箱即用、能同时兼容RN原生端和react-native-web端、无明显bug的富文本编辑器第三方依赖，不用反复检索浪费时间，生产环境落地就两种经过验证的路径：

方案1：跨端统一WebView/iframe桥接方案（兼容性最好，适合需要复杂富文本能力的场景） #

• 核心逻辑：利用react-native-web的WebView组件在Web端会被渲染为iframe的特性，用同一套编辑器内核同时适配原生端和Web端，通过消息通信做能力调用
• 实操步骤：
  • 先做独立的编辑器内核页：不用引大型第三方编辑器，自己基于contenteditable+document.execCommand写基础编辑能力，或者裁剪打包成熟轻量编辑器的核心逻辑，只保留你业务需要的功能（加粗、斜体、标题、列表、图片/链接插入、内容读写、变更监听），最终打包成单页静态资源，体积控制在100KB以内避免加载白屏
  • 封装跨端通用组件：环境判断逻辑写在组件内部，原生RN端加载本地打包的编辑器静态资源到WebView，Web端用iframe加载同一份静态资源；对外统一封装setContent、getContent、insertNode、onContentChange等方法，内部全部通过postMessage做双向通信，上层业务调用不需要区分环境
  • 布局样式对齐：给iframe/WebView设置100%宽高、无边距无边框，和普通View组件布局表现一致；编辑器内部的字体、行高、间距和项目全局设计规范对齐，避免端上表现差异
• 避坑：不要试图把依赖浏览器DOM的Web编辑器包直接打进RN Web的业务bundle里跑，react-native-web的运行环境对DOM全局属性做了大量mock裁剪，大概率会报各种undefined错误，调试成本远高于自己桥接。

方案2：端侧分别渲染轻量封装方案（适合仅需基础富文本能力的场景） #

• 核心逻辑：用Platform.OS做环境拆分，原生端直接用成熟的RN原生富文本组件，Web端自己重写渲染逻辑输出可编辑富文本容器，对齐两端对外的方法和回调参数，上层业务无感知
• 实操步骤：
  • 原生端直接选维护状态正常的RN富文本依赖（比如react-native-pell-rich-editor），按官方文档接入即可
  • Web端自定义组件，渲染时输出带contentEditable="true"属性的div，绑定原生事件实现基础编辑能力：用document.execCommand触发格式修改，监听input事件实时同步内容，处理光标定位、粘贴内容过滤（只保留白名单内的标签，过滤恶意脚本、异常行内样式）
  • 对齐两端API：Web端组件对外暴露的方法名、参数格式、回调返回值和原生端组件完全一致，比如原生端onChange返回html字符串，Web端也返回一模一样结构的html字符串，业务层不需要写任何环境判断逻辑
• 优劣势：开发速度快，不需要额外加载静态资源，编辑流畅度更高；但如果要做复杂的表格、拖拽调整图片大小这类能力，自己实现的成本会比方案1高。

实测踩坑提醒：不用浪费时间测试各类标注支持react-native-web的富文本第三方包，这类包90%以上停更超过2年，Web端普遍存在中文输入法丢字、光标错位、滚动穿透、格式错乱等问题，改源码修bug的时间比自己从零写轻量编辑器还久。

内容的提问来源于stack exchange，提问作者JAVEDPATHAN