最近项目中有个富文本编辑的需求,需要能编辑文字字号、颜色,插入图片等,最后要转成html格式然后base64转码后上传服务端,这样看来还挺复杂的。
想想像富文本这样的功能应该有人实现过了,顺手Google了下,明确一下思路。
主要是两种方法
- EditText + Span 的实现方式
- WebView + JavaScript 的实现方式
这个Demo
里面点击图片默认插入的是一张默认图,看源码发现是调用TextViewButton
的command()
方法,然后再调用JS代码实现的。如果要自己实现点击图片的逻辑,比如图库选图和拍照等,就需要定义一个子类继承TextViewButton
,重写command()
方法实现自己的逻辑。
总体来说这个库用得还算顺畅,我的需求都实现了,可以插入图片,编辑字体,最后可以得到html格式的片段。
只有一个问题还待解决,就是和上一个库一样的窗口泄漏问题。
20161215更新
窗口泄漏已解决,调用Webview.destroy()
即可
以上都是用WebView实现的方法
接下来会尝试下用EditText + Span 实现
富文本的图片上传策略问题
原先需求的想法是先在编辑器里显示本地图片,等待用户编辑完成再上传全部图片,然后用上传返回的url替换之前html中显示本地图片的位置。
这样的问题是,如果图片很多,上传的数据量会很大,手机的网络状态经常不稳定,很容易上传失败。另外等待时间会很长,体验很差。
另一种策略是选图完成即上传,得到url之后直接插入,上传是耗时操作,再加上图片压缩的时间,这样编辑器显示图片会有可观的延迟时间,实际项目中可以加一个loading占位图,另外加一个标记提醒用户是否上传完成,避免没有上传成功用户即提交的问题。
感谢上述开源库作者mr5的指教