zoukankan      html  css  js  c++  java
  • 关于富文本在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="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

  • 相关阅读:
    UVA 10600 ACM Contest and Blackout(次小生成树)
    UVA 10369
    UVA Live 6437 Power Plant 最小生成树
    UVA 1151 Buy or Build MST(最小生成树)
    UVA 1395 Slim Span 最小生成树
    POJ 1679 The Unique MST 次小生成树
    POJ 1789 Truck History 最小生成树
    POJ 1258 Agri-Net 最小生成树
    ubuntu 用法
    ubuntu 搭建ftp服务器,可以通过浏览器访问,filezilla上传文件等功能
  • 原文地址:https://www.cnblogs.com/widgetbox/p/8376546.html
Copyright © 2011-2022 走看看