最近项目中有个富文本编辑的需求,需要能编辑文字字号、颜色,插入图片等,最后要转成html格式然后base64转码后上传服务端,这样看来还挺复杂的。
想想像富文本这样的功能应该有人实现过了,顺手Google了下,明确一下思路。
主要是两种方法
- EditText + Span 的实现方式
- WebView + JavaScript 的实现方式
去GitHub搜了下,貌似已经有人实现了这个功能
wasabeef/richeditor-android
这个库是用第二种方式实现的,通过insertImage(url)
可以直接插入图片,getHtml()
即可得到html的字符串,然后用base64转码即可。
试用了几天,bug还是有一些,最大的问题是显示图片没有适配屏幕宽度,显示图片的时候是按原图大小显示的,拖了几下我就晕头转向了,另外还有诸如离开界面键盘未收起,窗口泄漏等问题(leaked window)。总之用得不是很顺畅,只能寻找替代品了。
继续搜索
mr5/icarus-android
这个库也是用第二种方式实现的,看了一点源码被绕得晕头转向,不过总算有点收获。
icarus.insertHtml("<img src=\\"xxx\\" />");
插入图片标签,实际上可以插入任何标签。
icarus.getContent()
得到html格式的字符串。实际上得到的是一串Json字符串,解析一下即可。
这个Demo
里面点击图片默认插入的是一张默认图,看源码发现是调用TextViewButton
的command()
方法,然后再调用JS代码实现的。如果要自己实现点击图片的逻辑,比如图库选图和拍照等,就需要定义一个子类继承TextViewButton
,重写command()
方法实现自己的逻辑。
总体来说这个库用得还算顺畅,我的需求都实现了,可以插入图片,编辑字体,最后可以得到html格式的片段。
只有一个问题还待解决,就是和上一个库一样的窗口泄漏问题。
20161215更新
窗口泄漏已解决,调用Webview.destroy()
即可
以上都是用WebView实现的方法
接下来会尝试下用EditText + Span 实现
富文本的图片上传策略问题
原先需求的想法是先在编辑器里显示本地图片,等待用户编辑完成再上传全部图片,然后用上传返回的url替换之前html中显示本地图片的位置。
这样的问题是,如果图片很多,上传的数据量会很大,手机的网络状态经常不稳定,很容易上传失败。另外等待时间会很长,体验很差。
另一种策略是选图完成即上传,得到url之后直接插入,上传是耗时操作,再加上图片压缩的时间,这样编辑器显示图片会有可观的延迟时间,实际项目中可以加一个loading占位图,另外加一个标记提醒用户是否上传完成,避免没有上传成功用户即提交的问题。
感谢上述开源库作者mr5的指教