富文本可以为用户提供更加多样化的文本展示形式，但由于其使用了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中的应用以及遇到的坑的更多相关文章

  1. Android中隐藏顶部状态栏的那些坑——Android开发之路3

    Android中隐藏顶部状态栏的那些坑 先看看常规的隐藏状态栏的方法: 方法一: @Override protected void onCreate(Bundle savedInstanceState ...

  2. iOS swift 富文本显示 富文本在iOS中使用场景和解决方案

    项目中很多地方都会用到富文本的内容:比如一般的商品详情,视频详情,资讯详情等,运营人员通过后台的富文本编辑器编辑的内容,前端拿到的就是一段富文本的字符串,这富文本大多都是图片和文字的组合.我们今天介绍 ...

  3. web开发实战--弹出式富文本编辑器的实现思路和踩过的坑

    前言: 和弟弟合作, 一起整了个智慧屋的小web站点, 里面包含了很多经典的智力和推理题. 其实该站点从技术层面来分析的话, 也算一个信息发布站点. 因此在该网站的后台运营中, 富文本的编辑器显得尤为 ...

  4. vue2.0项目中使用Ueditor富文本编辑器应用中出现的问题

    1.如何设置config中的内容 readonly:true,//只读模式wordCount:false,//是否开启字数统计enableAutoSave: false,//自动保存功能 重点:ena ...

  5. iOS开发小技巧--富文本字典集合中的Key都是OC中的常量字符串

  6. Java 实现HTML富文本导出至word完美解决方案

    一. 问题的提出 最近用java开发一个科技项目信息管理系统,里面有一个根据项目申请书的模板填写项目申报信息的功能,有一个科技项目申请书word导出功能. 已有的实现方式:采用标准的jsp模板输出实现 ...

  7. iOS开发小技巧--即时通讯项目:使用富文本在UILabel中显示图片和文字;使用富文本占位显示图片

    Label借助富文本显示图片 1.即时通讯项目中语音消息UI的实现,样式如图: 借助富文本在UILabel中显示图片和文字 // 1.创建一个可变的富文本 NSMutableAttributedStr ...

  8. 百度富文本编辑器UEditor安装配置全过程

    网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式     你可以去百度UEditor ...

  9. 字符串进行富文本操作后末尾emoji表情显示会乱码

    问题描述: 1.UIlabel展示的text中包含emoji表情 2.emoji表情作为最后一个字符 在满足以上条件的前提下末尾的emoji会乱码. 寻找问题过程: 因为是在单独的机型上出现的问题,所 ...

随机推荐

  1. AFNetWorking 对汉字部分UTF-8编码

    随笔记一下 好用的小技巧 1.将字典数据拼接成url的参数... AFQueryStringFromParameters NSString *query = AFQueryStringFromPara ...

  2. jQuery实现移动端评测问卷功能

    效果图: 需求: 1.有10道测试题目,单选,选中答案之后,500ms后自动跳转至下一题 2.如果当前题目没有选择答案,将弹窗提示"请选择答案!" 3.点击"上一题&qu ...

  3. C#WinCE程序（.NET Compact Framework 3.5）项目重构面向抽象设计

    重构关注点 遵循开闭原则 面向抽象设计 实现设备程序端可动态配置 重构的需求 领导想省事提出需求,将现有PDA程序修改为支持PC端由电器工程师根据实际的生产流程可配置,PDA程序在读取配置文件后动态生 ...

  4. C++ 脑筋急转弯

    最近重新温习一下C++的基础知识,这里给大家分享一下,独痛苦不如众痛苦. 先贴出一段示例代码如下: class CTest{ public: CTest(){ ); }; ~CTest(){ if ( ...

  5. Hive thrift服务（将Hive作为一个服务器，其他机器可以作为客户端进行访问）

    步骤一:启动为前台:bin/hiveserver2 步骤二:启动为后台:nohup bin/hiveserver2 1>/var/log/hiveserver.log 2>/var/log ...

  6. linux rsync服务

    1.rsync介绍rsync是一个开源的,快速的,多功能的,可实现全量及增量的本地或远程数据同步备份的优秀工具,rsync软件适用于nunix/linux/windows多操作系统上运行.官方网站:h ...

  7. rtx web 分级管理系统 二次开发

    fineui + ASP.NET+rtx server sdk 修正 rtx管理器 修改用户后分级目录出错问题. 加入 单用户多个部门 添加授权关闭部分采用 rsa加密.

  8. 【转载】Linux cgroup资源隔离各个击破之 - cpu隔离1

    Linux cgroup 有两个子系统支持CPU隔离.一个是cpu子系统,另一个是cpuset子系统. cpu子系统根据进程设置的调度属性,选择对应的CPU资源调度方法 .1. 完全公平调度 Comp ...

  9. 002_JS基础_JavaScript基础语法01

    2.1 注释 单行注释: 在某一行使用"//"(两条斜线)可以把斜线之后的内容进行注释:多行注释: 使用"/* 这是要注释的内容 */"可以进行多行注释: /* ...

  10. LVS集群之工作原理和调度算法（2）

      LVS的工作机制 LVS里Director本身不响应请求,只是接受转发请求到后方,Realservers才是后台真正响应请求. LVS 工作原理基本类似DNAT,又不完全相像,它是一种四层交换,默 ...