[已删除]
[已删除]
  • 发布:2024-05-09 17:12
  • 更新:2024-07-10 17:36
  • 阅读:146

只考虑 uniapp 打包到 安卓&苹果 APP的情况下,有什么好的方案解决 富文本编辑问题

分类:uni-app

我司准备做一款社交类APP产品,其中包含聊天和发帖能力,我们期望可以实现与正常web应用一样,实现可以在输入框内@其它人并且高亮的能力;如下图(下图是普通H5页面,div + contenteditable 实现)

我尝试过如下方案:

  1. textarea
  2. editor
  3. webview+html
  4. view

发现都无法满足需求,具体原因如下:

textarea 本身就不满足需求

文档:https://uniapp.dcloud.net.cn/component/textarea.html

editor 无法满足需求

比如正文内容是:我爱你,@亲爱的妈妈,这个@亲爱的妈妈 场景式 @人

1、我没有发现可以监听editor的点击事件,实际需求可能有点击这个艾特可以跳转到亲爱啊的妈妈的用户主页;
2、我无法通过给子节点(如:a元素)设置 contenteditable="false" 来实现快捷删除 艾特 或者 话题 的能力

webview + 内嵌html 无法实现

webview 的层级过高,且在安卓APP端调试阶段,webview层级过高,且设置 webview-styles 无效(试过对象和字符串形式,都无效),导致2个问题;

1、webview铺满全屏
2、层级过高页面本身的弹层无法覆盖上去

使用 view + contenteditable 属性

最后,我想到,因为我们的产品只考虑APP,所以我想尝试使用官方文档没有提及的 view+contenteditable 方式去实现一个效果,虽然看上去可以用,但是实际上我发现,这一套机制玩不转,因为在APP端,我暂时没有找到类似于web端的 document 的能力,我无法去监听这个 contenteditable 下的事件,如果是我才疏学浅,还请官方指导!

补充:2024年5月9日17:21:57

经过查阅资料,我发现 contenteditable 可以通过 input 触发事件,我想到可以直接用 @input 去进一步处理,但是我发现,在APP端,uniapp 的 input 参数是被包装过的对象,我无法获取正确的 value 值,也就是说我无法比对输入前和输入后的内容,完全没思路了

2024-05-09 17:12 负责人:无 分享
已邀请:
s***@126.com

s***@126.com

同问,博主大大有解决办法了吗

要回复问题请先登录注册