Android端富文本编辑器

最近产品提出在移动端实现富文本编辑器功能，需要能编辑文字加粗、颜色、插入图片、下划线等一系列功能等，最后要生成一个html格式然后base64转码后上传服务端，最后在前端网页和移动端显示。
Android富文本编辑器的 GitHub 主页点击这里：Android富文本编辑器

先看效果

富文本编辑器主要实现方式

1、EditText + Span 的实现方式
2、WebView + JavaScript 的实现方式

第一种比较简单，这里不在赘述，这里主要给大家讲解一下第二种实现方式，也是我项目中用到的方式（当然选择第二种方式也有另一个原因，就是我熟悉前端开发，熟悉JavaScript）

一、WebView + JavaScript 与android原生的交互原理：

1,原生代码：

if(Build.VERSION.SDK_INT < 17) {
     mWebView.setJsCallbackReceiver(newJsCallbackReceiver(this));
} else {
        mWebView.addJavascriptInterface(newJsCallbackReceiver(this), JS_CALLBACK_HANDLER);
}
在WebViewClient的shouldOverrideUrlLoading方法中执行mJsCallbackReceiver.executeCallback(callbackId, params)方法。
注意callbackId是js回调过来的key和JsCallbackReceiver中定义的key是一样的，用于区分不同js执行事件
在JsCallbackReceiver中的js回传中做自己处理

2,js中代码：

window.nativeCallbackHandler.executeCallback("callback_image_click",imageNode.src);（就是动态语言，参数动态化）
executeCallback为原生JsCallbackReceiver中的方法

二、前期需要知识的一些j s技术

1，document.execCommand(sCommand[,交互方式,动态参数])

   其中：sCommand为指令参数（如”2D-Position”），交互方式参数如果是true的话将显示对话框，如果为false的话，则不显示对话框（下例中的”false”即表示不显示对话框），动态参数一般为一可用值或属性值（如下例中的”true”）。

2，bold,italic,subscript,underline等等

3，html语句，例如：

html = "<img src="/i/eg_tulip.jpg"alt="上海鲜花港-郁金香"/>"
document.execCommand('insertHTML',false, html);

4, webView中交互监听（js代码中）

   this.wrappedObject.bind('tap', function(e) {thisObj.handleTapEvent(e); });
   this.wrappedObject.bind('focus', function(e) {thisObj.handleFocusEvent(e); });
   this.wrappedObject.bind('blur', function(e) {thisObj.handleBlurEvent(e); });
   this.wrappedObject.bind('keydown', function(e){thisObj.handleKeyDownEvent(e); });
   this.wrappedObject.bind('input', function(e) { thisObj.handleInputEvent(e);});

注意点：
1、executeCallback方法上需要加@JavascriptInterfae//17之后的版本，必须加该注解，否则无法调用
2、 webview需要先加载html文件，此处为本地文件
mWebView.loadDataWithBaseURL("file:///android_asset/",htmlEditor, "text/html","utf-8", "");最后页面样式可以通过CSS样式控制，会写js语句就更快搞定了！
3、需要将编辑器设置为多行，监听enter键盘，执行document.execCommand("insertLineBreak");

三、这里在额外讲解一下图片上传策略问题

大多数开发者会采用的方式：先在编辑器里显示本地图片，等待用户编辑完成再上传全部图片，然后用上传返回的url替换之前html中显示本地图片的位置。

这样的问题是：如果图片很多，上传的数据量会很大，手机的网络状态经常不稳定，很容易上传失败。另外等待时间会很长，体验很差。

解决办法：选图完成即上传，得到url之后直接插入，上传是耗时操作，再加上图片压缩的时间，这样编辑器显示图片会有可观的延迟时间，实际项目中可以加一个loading占位图，另外加一个标记提醒用户是否上传完成，避免没有上传成功用户即提交的问题。

最后编辑于：2018.03.22 16:53:07