移动编辑器开发心得及初始化方案设计

[iscarecrow]

demo动图

1.不同平台问题小记

• iOS光标键盘弹起自动丢失 Vs 安卓不丢失
• iOS光标定位后浏览器滑动和安卓不一致
• iOS光标丢失后，双击自动滑动
• iOS键盘候选字点击，时间无法监听
• 安卓键盘删除键，某些机型下无法监听
• iOS最后一行换行，不会自动上移
• iOS写作过程中，到达尾行不能自动上移

总结：大部分问题及优化点会集中在1.键盘弹起 2.光标位置 3.滑动定位 4.键盘事件监听

2.技术方案设计

• 获取远程编辑器js,解决动态更新
• 将js挂载到webview，iOS和安卓挂在js存在差异性。可以参考相关jsbridge设计。安卓可以直接挂载，iOS借助于iframe
• 调用js初始化方法，编辑器初始化完成
• 客户端调用js方法，操作dom。js通过bridge call Native。两者处理所有逻辑

3.功能点

• 草稿箱，要点 草稿箱存储的内容到底是什么？是否存本地图片？是否存编辑状态？是否存发布失败图片？

• 存草稿逻辑，建议前端处理，客户端暴露存草稿方法，前端根据自己的需求调用存草稿方法。文字输入存储可以使用throttle。（此处需要考虑本地草稿和远程草稿的区别）

• 图片采用本地图片策略。优化图片上传显示速度。可以使用本地图片。引出的问题包括上传状态，上传成功，本地图片引用，失败重传等问题（客户端上传）。

  • 上传状态，上传开始，进度，成功，失败
  • 图片地址引用， 客户提供的本地链接或者base64
  • 失败重传，此处相对复杂。客户端需要维护图片状态池，编辑中失败重传和从草稿箱进入失败重传，都会告诉客户端唯一的id，客户端需要借助图片状态池，重传图片。

• 客户端编辑器与PC功能兼容问题，如果只是做通用化编辑器方法，需要考虑的是两边编辑器一致性问题（没做这个）。定制化的页面编辑，在复杂的pc端需要输出任意形式的功能模块到移动端，两者需要统一一套规范，以便维护。主要在于pc端产生的功能模块，移动端如何操作的问题

• pc和移动接口兼容问题，pc生产定制化的页面，需要到客户端编辑。需要接口层面提供css，js。这样移动端编辑器就可以不关心pc产生的展示样式。