美文网首页iOS开发记录
ios 编辑器1-基于WKWebview的编辑器技术方案

ios 编辑器1-基于WKWebview的编辑器技术方案

作者: DaZenD | 来源:发表于2020-09-01 18:20 被阅读0次

公司业务需要,趁此研究

说实话,前端做编辑器不香吗?,客户端展示一下就完了

既然开始了,就停不下来,android,ios都搞完了,写点总结

方案选型

也没啥选型的,git搜一搜,看看效果,star,维护程度,对比一下就知道了。如果issues里没啥硬性问题,就它了

技术方案主要有两类:

一是纯原生开发,这种对原生友好,但是不好用啊,并且还要转html给web用。

二是web方案,html,js,css。android,ios,web互通。但是作为原生开发有点不太好整,并且原生上调试js之类的也不太方便

这都是屁话了,真好用哪个方案都行,git搜一搜:

android:

https://github.com/RexSuper/RichEditor

参考了wasabeef/richeditor-android。支撑了更多的功能类型,插入文件之类的。这比较适合需求出发点,心生好感

ios:

https://github.com/Vergil-wj/RichTextEditor

基于nnhubbard/ZSSRichTextEditor开发的


demo运行一下,感受一下就知道了,另外,android,ios这俩库的实现方案,思路是一样的,连js写法都差不多。所以,开发中,可以相互参考,技术统一

技术思路

方案.png

就是想提一句,android,ios都是这样的。技术实现不是重点,叙述一下上图:

1):原生端有个webview控件作为编辑器视图,加载web资源,用于编辑展示内容
2)编辑阶段,原生端调用js提供的function,执行js功能,编辑html内容
3)js掉native,用于内容回调,样式回显之类的。

整个编辑器也就这么多,拉个前端的同志,就能开始写了

组件化

文本,图,video,audio,file

组件.png

android,ios,web 统一化:

编辑器编辑,发布:本地文件处理,有两种思路,一是编辑中上传,二是最后统一上传。上传文件后,url替换文案中的path,最后发布整个文案。这里文案需要考虑,只发布html还是整个js,css都内联发布。因为有jQuery.js,内容还挺多。。

编辑器-加载-编辑-发布。整个循环过程成立

总结

本文技术不是重点,技术方案,技术实现参考一下开源库。。整体开发中android没啥问题,ios相对问题较多,后续会写ios开发中的问题

ios 编辑器2-基于wkwebview编辑器加载本地html资源
ios 编辑器3-基于wkwebview编辑器插入网络图片不显示问题
ios 编辑器4-基于wkwebview编辑器插入视频文件封面问题

相关文章

网友评论

    本文标题:ios 编辑器1-基于WKWebview的编辑器技术方案

    本文链接:https://www.haomeiwen.com/subject/njavsktx.html