关于富文本在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中的应用以及遇到的坑的更多相关文章
- Android中隐藏顶部状态栏的那些坑——Android开发之路3
Android中隐藏顶部状态栏的那些坑 先看看常规的隐藏状态栏的方法: 方法一: @Override protected void onCreate(Bundle savedInstanceState ...
- iOS swift 富文本显示 富文本在iOS中使用场景和解决方案
项目中很多地方都会用到富文本的内容:比如一般的商品详情,视频详情,资讯详情等,运营人员通过后台的富文本编辑器编辑的内容,前端拿到的就是一段富文本的字符串,这富文本大多都是图片和文字的组合.我们今天介绍 ...
- web开发实战--弹出式富文本编辑器的实现思路和踩过的坑
前言: 和弟弟合作, 一起整了个智慧屋的小web站点, 里面包含了很多经典的智力和推理题. 其实该站点从技术层面来分析的话, 也算一个信息发布站点. 因此在该网站的后台运营中, 富文本的编辑器显得尤为 ...
- vue2.0项目中使用Ueditor富文本编辑器应用中出现的问题
1.如何设置config中的内容 readonly:true,//只读模式wordCount:false,//是否开启字数统计enableAutoSave: false,//自动保存功能 重点:ena ...
- iOS开发小技巧--富文本字典集合中的Key都是OC中的常量字符串
- Java 实现HTML富文本导出至word完美解决方案
一. 问题的提出 最近用java开发一个科技项目信息管理系统,里面有一个根据项目申请书的模板填写项目申报信息的功能,有一个科技项目申请书word导出功能. 已有的实现方式:采用标准的jsp模板输出实现 ...
- iOS开发小技巧--即时通讯项目:使用富文本在UILabel中显示图片和文字;使用富文本占位显示图片
Label借助富文本显示图片 1.即时通讯项目中语音消息UI的实现,样式如图: 借助富文本在UILabel中显示图片和文字 // 1.创建一个可变的富文本 NSMutableAttributedStr ...
- 百度富文本编辑器UEditor安装配置全过程
网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式 你可以去百度UEditor ...
- 字符串进行富文本操作后末尾emoji表情显示会乱码
问题描述: 1.UIlabel展示的text中包含emoji表情 2.emoji表情作为最后一个字符 在满足以上条件的前提下末尾的emoji会乱码. 寻找问题过程: 因为是在单独的机型上出现的问题,所 ...
随机推荐
- ubuntu16编译安装mysql5.7
安装环境: linux版本: ubuntu-16.04.3-desktop-amd64 mysql版本:mysql-boost-5.7.20.tar.gz 下载地址:https://dev.mysql ...
- cobbler安装配置.基本全了多看help和docs
env 系统环境配置,软件包安装 centos7 yum update -y sed -i s/SELINUX=enforcing/SELINUX=disabled/g /etc/sysconfig/ ...
- ionic2 App搭建(三)
cmd命令提示框中进入项目文件夹 运行命令 ionic serve --lab 结构如下图 这里数据是没有接受到的,是因为跨域的问题,解决方案是谷歌浏览器配置跨域指令如下: 配置chrome浏览器允 ...
- JavaScript(二)基本概念
JS区分大小写 html/css 中 标签选择器不区分大小写 id class 选择器区分大小写 其中属性名 属性名 属性值 不区分大小写 行间事件 onclick 等 不区分大小写 而 执 ...
- MongoDB批量导入及简单的性能优化
今天简单分享一下MongoDB使用过程中的一些性能优化,其实并不只适用MongoDB,其他数据库多少也可适用. 首先先随机导入一千万条数据.这里我分段导入的,因为mongo的BsonDocument一 ...
- MyBatis + MySQL返回插入的主键id
这是最近在实现perfect-ssm中的一个功能时碰到的一个小问题,觉得需要记录一下,向MySQL数据库中插入一条记录后,需要获取此条记录的id值,以生成对应的key值存入到redis中,id为自增i ...
- Python源码剖析之准备工作
一个Python程序开发者, 也是C语言爱好者, 为了加强自己对Python语言实现的理解, 最近选择阅读下陈儒老师的书, 对Python3.5.1源码进行阅读, 再次记录下读书笔记. 一.Pyth ...
- Oracle 11.2.0.1的又一个隐藏在ORA-03113后的bug: 通信通道的文件结尾
近期又一个项目反馈ORA-03113错误: 通信通道的文件结尾.(jdbc程序报出的错误是:无法从套接字读取更多的数据) 发送之前处理过类似问题的解决方法(http://www.cnblogs.com ...
- js各种继承方式汇总
js中的各种继承实现汇总 首先定义一个父类: function Animal(name) { this.name = name || '动物' this.sleep = function () { c ...
- CTF---编程入门第一题 循环
循环分值:10 来源: 北邮天枢战队 难度:易 参与人数:1478人 Get Flag:467人 答题人数:523人 解题通过率:89% 给出一个循环公式,对于一个整数n,当n为奇数时,n=3n+1, ...