关于富文本在Android中的应用以及遇到的坑

Posted WidgetBox

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于富文本在Android中的应用以及遇到的坑相关的知识,希望对你有一定的参考价值。

富文本可以为用户提供更加多样化的文本展示形式,但由于其使用了H5标签的特殊性,一般都需要第三方框架的支持。这里推荐一款合适的第三方富文本框架,richeditor。

首先我们要使用该功能需要引入相关jar包,引入方法如下

compile ‘jp.wasabeef:richeditor-android:1.2.0‘

然后我们需要解决一个问题,那就是,在富文本编辑器的使用中,5.0以下的系统自带的webview无法实现删除图片的功能。这个漏洞在5.0以后被谷歌公司进行了修复。但是问题来了,公司的软件是要兼容到4.2系统的,总不能因为这个问题不让用户用4.x的手机吧,而且这批用户还不少,所以需要解决这个问题。我们的思路是替换掉系统的webview,更换第三方自定义webview。这里有一个好的框架推荐就是腾讯的X5内核,内含腾讯重写的Webview,版本到7.0。这里不重点讲述X5内核的好处,我们看一下如何替换。我们看到,RichEditor中最关键的一个自定义类是一个叫做RichEditor的类。这是我们布局上输入富文本区域的控件。我们看到它的继承类是WebView。这里咱们把代码拷贝出来并且重写该类,并将继承类换成X5内核中的WebView,如下样式:

public class XRichEditor extends com.tencent.smtt.sdk.WebView

这样我们就可以在这个类中进行其他的一些修改,比如新功能的添加之类的,下面举两个实用的小例子

例子1:

这个富文本没有添加分割线的方法,我们为它加一个。在重写的XRichEditor中,就是集成了X5内核的富文本中,我们写入如下代码

public void setSplitt() {
        exec("javascript:RE.inserthtml(‘<hr/>‘);");
}

  这样我们就添加了一个加入分割线的方法。其实细心的朋友已经发现insertHTML就是在光标处插入html代码的方法,方便我们在光标的停留位置插入代码。

例子2:

我们还可以让网页的内容响应我们的点击事件

public void insertImg(String url, String alt){
        String html = "<img src=\"" + url + "\" alt=\"" + alt + "\" onclick=\"window.yulinjs.openImage(\""+url+"\")\"  style=\"width:100%\"/><br>";
        exec("javascript:RE.insertHTML(‘"+html+"‘);");
        Log.i("img",html);
}

  这样,我们就可以让我们的图片响应通过WebView注入的接口,从而调用我们原生的方法。

  另外,我们讲一下富文本编辑器的原理。

      富文本编辑器其实就是一个加载在我们WebVIew上的一个网页,网页的源码是这样写的

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="normalize.css">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="editor" contenteditable="true"></div>
<script type="text/javascript" src="rich_editor.js"></script>
</body>
</html>

  可以看到,div被我们标记成了内容可以编辑的状态。

紧接着我们使用document.execCommand的相关方法在js文件中对HTML进行相关的操作。改套方法可以允许运行命令来操纵可编辑区域的内容。大多数命令影响文档的选择(粗体,斜体等),而其他命令插入新元素(添加链接)或影响整行(缩进)。当使用contentEditable时,调用 execCommand() 将影响当前活动的可编辑元素。

这样我们就可以愉快的使用富文本编辑器了。更多功能还要读者自己去探索。

By WaterWood

以上是关于关于富文本在Android中的应用以及遇到的坑的主要内容,如果未能解决你的问题,请参考以下文章

vue tinymce 控制图片大小上传,以及富文本编辑框在dialog的问题

原关于百度富文本编辑器的使用心得

适配splashscreen步骤以及遇到的坑

适配splashscreen步骤以及遇到的坑

[Android开发]富文本TextView修改部分字体颜色大小加粗斜体下划线删除线,以及添加点击事件,插入本地或网络图片

ATP应用测试平台——关于vue中Vue-Quill-EditorMavon-EditorTinymce等多种富文本编辑器的集成使用