放弃WebView,使用Crosswalk做富文本编辑器

1、放弃 WebView ，使用 Crosswalk 做富文本编辑器版权声明： 欢迎转载，但请保留文章原始出处 作者： GavinCT 出处： 为什么放弃 WebViewAndroid WebView 做普通浏览还好，做富文本编辑器(执行 js：)，常常会遇到各种奇 葩的 bug ，而且很难修复。尽管Google在版本迭代中不断修复bug,但依旧没法用它来做富文本编辑。Kitkat 的改变Google 为了加强 WebView 的功能，在 Kitkat 引入了 Chromium 内核。但还是存在着编辑的bug。我所知道的一个 bug 是：Kitkat 版 WebView 在删除 Html 标签时处

2、理不好， 例如标签， 就无法删除。点击删除时直接越过此元素，将光标定位在图 片前方，对图片不做处理。当然，这个 bug 在 Android 5.0 修复了。Lollipop 新策略Although WebView has been based on Chromium since Android 4.4, the Chromium layer is now updatable from Google Play.As new versions of Chromium become available, users can update from Google Play to ensure they

3、 get the latest enhancements and bug fixes for WebView, providing the latest web APIs and bug fixes for apps using WebView on Android 5.0 and higher.可见在 Lollipop 里，可以通过 GooglePlay 来更新 Chromium 内核。但是问题来了：国内容易更新么？ 如果不是自动更新， 用户会手动更新么？当然 GooglePlay 是 自动更新，那国内手机没有自己市场的厂商呢？Lollipop 以前的版本怎么办？ Lollipop 目前只有

4、很少用户可 以更新。探索新的富文本编辑方案显然，即便是有了 Lollipop 的解决方案，但问题依然很多。 我们还是需要一个替代方案，来保证我们在所有的 Android 手机上表现一致。这个方案就是在应用中集成 Chromium 。由于自己编译 Chromium 的难度较大，于是转而寻找编译好 的 Chromium 库来使用。需要声明的是： Chromium 内核只能在 Android 4.0 以上才能 使用，之后提到的所有 Chromium 库都只能在 4.0 以上平台 使用。过渡方案最初在寻找替代方案的时候，应该是 2013 年 10 月左右，找 到了两个 Chromium 库：chrom

5、eview这个库封装的较好，但是有一个致命的 bug 是不能滚动。README 中声明：Attempting to scroll the view (by swiping a finger across the screen) does not update the displayed image.However, internally, the view is scrolled.This can be seen by displaying a stack of buttons and trying to click on the topmost one.This issue makes Ch

6、romeView mostly unusable in production.注：这个库的README最新声明里面推荐了 Crosswalk，作 者还是很用心的。android-chromium这个库整体稳定，不存在上面的bug。用它作为编辑器差不多一年，没有出现什么问题。但在今年 6、7 月的时候，突然间发现在三星新出的几款平 板上（搭载了 Kitkat ）表现为花屏，屏幕上出现了各种颜色 的横条，无法进行编辑。其他搭载了 Kitkat 的手机当时没有 发现过什么问题。这里说一下这个库， 自从作者看到 Kitkat 使用 Chromium 后， 作者就声明不再更新了，其实差不多一年前就已经不

7、更新 了。这个库使用起来比较麻烦，需要自己再进行封装，甚至连 onPageFinished 都需要自己来做。可以看到，上面的替代方案，到今年 6、7 月，实际上已经 无法使用。而且非组织维护的代码，通常都有些不可靠的意味。于是不得不继续寻找替代方案。终于在 Google I/O 上看到了 希望 CrosswalkCrosswalk 入门CSDN 资讯： Crosswalk 的介绍 Crosswalk 官方地址 上面的链接可以看到 Crosswalk 的介绍， Crosswalk 种种吹牛 逼的描述我就不写了。写一下我的使用感受： 不用费力搞什么自己封装了，直接像用 WebView 一样使用。

8、在使用 android-chromium 这个库时， 不仅要自己封装 API 来 方便使用，还要操心 Chromium 的初始化，甚至还需要在清 单文件里写一堆关于 Chromium 的东西，用来帮助 Chromium 建立单独的进程 ( Crosswalk 只会创建 Chromium 的线程， 不 需要独立进程) 。Crosswalk 由组织维护，比个人维护强多了。跟随最新的 Chromium 不断更新， js 等不用担心有函数没法 使用。 而且不断更新过程中， 肯定也会修复以前存在的 bug， 稳定性也是不用担心的。最新稳定版 Crosswalk 基于 Chromium38 编译。注：此库

9、也可以配合 Cordova(PhoneGap) 使用。OK ，感受说完，上教程。集成到应用中 下载 zip 包，解压后导入。关联此 Library在清单文件中写入下列权限/ / /注：使用过程中，观察 Logcat 可以看到报需要蓝牙权限，可 以不用管它，不添加蓝牙权限可以正常使用。此外，使用 XWalkView 必须开启硬件加速XWalkView needs hardware acceleration to render web pages. As a result, the AndroidManifest.xml of the callers app must be appended wi

10、th the attribute android:hardwareAccelerated and its value must be set as true. android:hardwareAccelerated : The default value is true if youve set either minSdkVersion or targetSdkVersion to 14 or higher; otherwise, its false.在清单文件 Application 中声明即可。 android:hardwareAccelerated=true基本使用Crosswalk 中

11、用来替代 WebView 的控件叫 XWalkView 。 layout 文件写法 和其他自定义控件一样。android:id=+id/activity_main xmlns:android= android:layout_width=fill_parentandroid:layout_height=fill_parent代码中使用 重中之重：防止内存泄漏 和其他 Android 的控件不同，这个类需要监听系统事件。例 如：生命周期、 intent 、 Activity result 。控件内置的 Web 引擎需要获取并处理这些信息。并且当 XWalkView 不再需要使用的时候，在 onDe

12、stroy 方法中 XWalkView 必须显式的调用 destroy 方法，否则容易造成 Web 引擎的内存泄漏。原文如下：Unlike other Android views, this class has to listen to system events like application life cycle, intents, and activity result. The web engine inside this view need to get and handle them. And the onDestroy() method of XWalkView MUST be

13、 called explicitly when an XWalkView wont be used anymore, otherwise it will cause the memory leak from the native side of the web engine. Its similar to the destroy() method of Android WebView.这段文字来自 XWalkView 官方 API 文档。奇怪的是官方的 范例中并没有在意这些事情， 直接像 WebView 一样使用， 更 没有使用 destroy 方法。考虑到之前使用 android-chrom

14、ium 库也是需要显式调用。这 里还是加上，避免内存泄漏。public class MyActivity extends Activity private XWalkView mXWalkView;Overrideprotected void onCreate(Bundle savedInstanceState) mXWalkView = mXWalkView.load(/, null);Overrideprotected void onPause() super.onPause(); if (mXWalkView != null) mXW

15、alkView.pauseTimers(); mXWalkView.onHide();Overrideprotected void onResume() super.onResume(); if (mXWalkView != null) mXWalkView.resumeTimers();mXWalkView.onShow();Override protected void onDestroy() super.onDestroy();if (mXWalkView != null) mXWalkView.onDestroy();Override protected void onActivity

16、Result(int requestCode, int resultCode, Intent data) if (mXWalkView != null) mXWalkView.onActivityResult(requestCode, resultCode, data);Overrideprotected void onNewIntent(Intent intent) if (mXWalkView != null) mXWalkView.onNewIntent(intent);loadUrl 去哪了？ 上面的代码中其实已经剧透了，使用 load 方法即可 / url mXWalkView.lo

17、ad(/, null);/ this loads a file from the assets/ directory mXWalkView.load(file:/android_asset/index.html, null);public void load (String url, String content)Load a web page/app from a given base URL or a content. If url is null or empty and content is null or empty, then

18、this function will do nothing. If content is not null, load the web page/app from the content. If content is not null and the url is not set, return about:blank ifi calling getUrl(). If content is null, try to load the content from the url. It supports URL schemes like http:, https: and file:. It ca

19、n also load files from Android assets, e.g. file:/android_asset/.Parameters url the url for web page/app.content the content for the web page/app. Could be empty.WebViewClient ？对应 WebView 的 WebViewClient ， XWalkView 中有 XWalkResourceClient 。mXWalkView.setResourceClient(new XWalkResourceClient(mXWalkV

20、iew)Overridepublic void onLoadFinished(XWalkView view, String url)super.onLoadFinished(view, url);Overridepublic void onLoadStarted(XWalkView view, String url) super.onLoadStarted(view, url););调用 JavaScript不像 WebView 一样获取 setting 设置 setJavaScriptEnabled 为 true 才能执行。Crosswalk 可以直接执行 js。 当然，按照 Kitkat

21、引入的方式，使用 evaluateJavascript 方法 也是可以的。 (大神们推荐)JavaScript 回调 Java定义 js 回调接口public class JsInterface public JsInterface() JavascriptInterface public String sayHello() return Hello World!;Caution: If youve set your targetSdkVersion to 17 or higher, you must add the JavascriptInterface annotation to any

22、method that you want available to your JavaScript (the method must also be public). If you do not provide the annotation, the method is not accessible by your web page when running on Android 4.2or higher.备注：这里的 JavaScriptInterface 所在的包是 XWalkView 设置 JavaScript 可用且绑定对象 /绑定mXWalkView.addJavascriptInt

23、erface(new JsInterface(), NativeInterface);调用 html 执行 JavaScript 或直接执行 Javascript 调用 Java mXWalkView.load(file:/android_asset/index.html, null); index.html 源码：href=# onclick=clicked()Say Hellofunction clicked() alert(NativeInterface.sayHello();/script高级使用调试Kitkat 开始， Android 提供了和 Chrome 联调功能。可以很方 便的

24、在 Chrome 中调试 WebView 中的代码。Crosswalk 使用 Chromium 内核当然也具备这个功能。 开启调试的语句如下：/ turn on debuggingXWalkPreferences.setValue(XWalkPreferences.REMOTE_DEB UGGING , true);对于 Crosswalk 来说，这个设置是全局的。 使用动画或者设置隐藏可见注意 默认 XWalkView 不能使用动画，甚至 setVisibility 也不行。开启动画模式：Overrideprotected void onCreate(Bundle savedInstance

25、State) super.onCreate(savedInstanceState);/ ANIMATABLE_XWALK_VIEW preference key MUST be set before XWalkView creation.XWalkPreferences.setValue(XWalkPreferences.ANIMATABLE _XWALK_VIEW, true);Overridepublic void onDestroy() super.onDestroy();/ Reset the preference for animatable XWalkView.XWalkPrefe

26、rences.setValue(XWalkPreferences.ANIMATABLE _XWALK_VIEW, false);由于设置也像调试一样是全局的， 在 onDestroy 时记得关闭 暂停 JS timerhtml 代码htmlA script on this page starts this clock: id=demovar myVar = setInterval(function() myTimer(); , 1000);function myTimer()var d = new Date();var t = d.toLocaleTimeString();document.g

27、etElementById(demo).innerHTML = t;/script /htmlXWalkView 对应方法：mButton.setOnClickListener(new OnClickListener() Overridepublic void onClick(View v) if (mXWalkView != null) if (!isPaused) / Pause JS timer mXWalkView.pauseTimers(); isPaused = true; else / Resume JS timer mXWalkView.resumeTimers(); isPa

28、used = false;);这也在防止内存泄漏，监听系统事件示例代码中提到过： Overrideprotected void onPause() super.onPause();if (mXWalkView != null) mXWalkView.pauseTimers(); mXWalkView.onHide();Override protected void onResume() super.onResume();if (mXWalkView != null) mXWalkView.resumeTimers(); mXWalkView.onShow();历史记录mPrevButton.s

29、etOnClickListener(new OnClickListener() Overridepublic void onClick(View v) / Go backwardif (mXWalkView != null &mXWalkView.getNavigationHistory().canGoBack() mXWalkView.getNavigationHistory().navigate(1);XWalkNavigationItem navigationItem =mXWalkView.getNavigationHistory().getCurrentItem(); showNavigationItemInfo(navigationItem););mNextButton.setOnClickListener(new OnClickListener() Overridepublic void onClick(View v) / Go forward if (mXWalkView != null &mXWalkView.getNavigationHistory().canGoForward() mXWalkView.getNavigation