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

2020-09-01 本文已影响0人 DaZenD

公司业务需要，趁此研究

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

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

方案选型

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

技术方案主要有两类：

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

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

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

android：

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

ios：

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开发中的问题