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

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

  1. 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，如下样式：

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

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

例子1：

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

  1. public void setSplitt() {
  2.         exec("javascript:RE.insertHTML('<hr/>');");
  3. }

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

例子2：

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

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

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

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

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta name="viewport" content="user-scalable=no">
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.     <link rel="stylesheet" type="text/css" href="normalize.css">
  7.     <link rel="stylesheet" type="text/css" href="style.css">
  8. </head>
  9. <body>
  10. <div id="editor" contenteditable="true"></div>
  11. <script type="text/javascript" src="rich_editor.js"></script>
  12. </body>
  13. </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. TurnipBit：和孩子一起动手DIY“滚动”的生日礼物

    当孩子的生日来临之时,做父母的总是会为该为孩子准备什么礼物而烦恼.下面就教家长朋友们利用TurnipBit开发板DIY一份"特殊"的生日礼物,不仅能增加与孩子的互动性还能提升孩子在 ...

  2. 简单认识python cmd模块

    0X00 前言 在早前用别人的工具时,发现有些大佬会用到交互式shell,那时候就挺好奇的,但是一直都没有看一下怎么做到的. 今天在翻p牛的博客的时候,看到他早之前写的一个工具就有用到交互式shell ...

  3. 前端js之JavaScript

    知识预览 一小知识 二 JavaScript的基础 BOM对象 DOM对象 实例练习 js拓展 小知识 核心(ECMAScript) 文档对象模型(DOM) Document object model ...

  4. MySQL5.7新特性：lossless replication 无损复制

    MySQL的三种复制方式 asynchronous 异步复制 fully synchronous 全同步复制 Semisynchronous 半同步复制 asynchronous replicatio ...

  5. 【转载】SSD 下的 MySQL IO 优化

    一 目录 一 目录 二 背景 三 SSD 特性 四 基于 SSD 的数据库优化 五 A 项目 MySQL 主从关系图 六 程序切换之前调优 6.1 修改系统 IO 调度算法 6.2 修改 innodb ...

  6. Android系统上如何实现easyconfig(airkiss)

    刚买回来一个智能音箱和博联,需要给音箱和博联配置联网,音箱需要先打开蓝牙,然后在手机app中填写wifi的ssid和密码,通过蓝牙发送到音箱,音箱收到后连接到wifi. 博联就比较奇怪,进入联网模式以 ...

  7. macOS 中 apache vhosts 配置备忘

    1. 修改 apache 服务器指向的根目录 macOS 默置了 apache,有以下几个常用命令: sudo apachectl -v // 查看 apache 版本 httpd -v // 同上 ...

  8. DAY2-java对你有点好感2018-1-10

    第二天,对你有好感,还是不想复习,继续学习!! 第一天:归在日记分类,不能改为随笔,无奈/ 链接http://www.cnblogs.com/archer-lcy/diary/2018/01/09/8 ...

  9. C#学习笔记-适配器模式

    什么是适配器模式? 适配器模式(Adapter):将一个类的接口转换成客户希望的另外一个接口. Adapter模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作. 什么时候运用适配器模式? ...

  10. Django 1.10中文文档-第一个应用Part1-请求与响应

    在本教程中,我们将引导您完成一个投票应用程序的创建,它包含下面两部分: 一个可以进行投票和查看结果的公开站点: 一个可以进行增删改查的后台admin管理界面: 我们假设你已经安装了Django.您可以 ...