前期需要知道的知识储备

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);});

Android原生代码和js交互核心

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中的方法

注意点：

executeCallback方法上需要加@JavascriptInterfae//17之后的版本，必须加该注解，否则无法调用

3,webview需要先加载html文件，此处为本地文件

mWebView.loadDataWithBaseURL("file:///android_asset/",htmlEditor, "text/html","utf-8", "");

最后页面样式可以通过CSS样式控制，会写js语句就更快搞定了！

编码过程中遇到的坑

1，键盘换行符号失效

需要将编辑器设置为多行，监听enter键盘，执行document.execCommand("insertLineBreak");