Android富文本编辑器(一):基础知识

目前主流的基于Android富文本开发方式思路如下:

  • 基于TextView图文混排

使用方式:

TextView textView = new TextView(context);

textView.setText(Html.fromHtml(“xxxxxx”));

优点:简单、易用、学习成本低,直接输入html即可

缺点:支持的样式不够灵活,有些效果实现不了。例如图片的环绕效果

  • 基于布局的实现方式:

通过实现多种布局或者模板的方式实现。

优点:简单直接

缺点:复杂样式或者多种样式的情况开发效率低下,系统资源占用较多、卡顿,并且不够灵活。

我们平常使用TextView的setText()方法传递String参数的时候,其实是调用的public final void setText (CharSequence text)方法:

/**
* Sets the string value of the TextView. TextView <em>does not</em> accept
* HTML-like formatting, which you can do with text strings in XML resource files.
* To style your strings, attach android.text.style.* objects to a
* {@link android.text.SpannableString SpannableString}, or see the
* <a href="{@docRoot}guide/topics/resources/available-resources.html#stringresources">
* Available Resource Types</a> documentation for an example of setting
* formatted text in the XML resource file.
*
* @attr ref android.R.styleable#TextView_text
*/
@android.view.RemotableViewMethod
public final void setText(CharSequence text) {
setText(text, mBufferType);
}

而String类是CharSequence的子类,在CharSequence子类中有一个接口Spanned,即类似html的带标记的文本,我们可以用它来在TextView中显示html。但在上面Android源码注释中有提及TextView does not accept HTML-like formatting。

android.text.Html类共提供了三个方法,可以到Android帮助文档查看。

public static Spanned fromHtml (String source)  

public static Spanned fromHtml (String source, Html.ImageGetter imageGetter, Html.TagHandler tagHandler)  

public static String toHtml (Spanned text) 

其中Html.ImageGetter是一个接口,我们要实现此接口,在它的getDrawable(String source)方法中返回图片的Drawable对象

参数说明:source=需要展示的html文本内容,imageGetter=需要继承Html.ImageGetter接口实现逻辑,tagHandler=这个参数表示,当textView解析遇到无法识别的html标签是否发送通知或者消息,如果遇到无法解析的标签,该方法将会被调用。这个没有具体测试过,一般赋值null。

fromHTML的源码

Android Html解析

Android控件TextView的实现原理分析

span

Spans,一个强大的概念

在TextView和EditText中,显示的是文本,而span是“附着”在相应文本上的对象。在绘制时,展示的是这些“附着”的对象而不是文本本身。这可以类比成一个cosplay,其实还是一段段的文本,但是不同文本戴上了不同的面具,化了不同的装扮,展示出了不同的效果。
Span元素的继承结构是:SpannableString -> Spannable -> Spanned -> CharSequence。后面三个都是接口,SpannableString是最终的实现类。
对应上述代码,我们先构造的SpannableString是挂载了富文本对象的字符串,在TextView上显示的是挂在的对象,而不是文本本身。

下面分析一下setSpan这个方法:

public void setSpan(Object what, int start, int end, int flags);

最后一个参数flags的含义是这种富文本在其之前或之后添加文本时是否需要将同样的样式应用于其上。
经常使用的flag有:

  • Spanned.SPAN_EXCLUSIVE_EXCLUSIVE(前后都不包括)
  • Spanned.SPAN_INCLUSIVE_EXCLUSIVE(前面包括,后面不包括)
  • Spanned.SPAN_EXCLUSIVE_INCLUSIVE(前面不包括,后面包括)
  • Spanned.SPAN_INCLUSIVE_INCLUSIVE(前后都包括)

一般来说,ImageSpan都采取的是SPAN_EXCLUSIVE_EXCLUSIVE,而url会采用Spanned.SPAN_EXCLUSIVE_INCLUSIVE。

Spannable、Spanned、Editable用法及差别

基于Android的富文本展现开发实践--AndroidCoreText

简单富文本编辑器MRichEditor,图文混排算个啥

如何实现一个 Android 端的富文本编辑器? - 知乎

【译】Spans,一个强大的概念

为什么不用webview

webviews can be problematic if they are used in listviews

同步方案的问题:OOM

异步方案的一个问题:

关于textview显示HTML中异步下载图片的问题

Android ImageGetter images overlapping text

图片和文字会重叠

如果是异步下载的话,一开始这里因为没有得到图片,所以这个图片区域就没有,当异步下载到图片后,不会再调用ImageGetter 的 public Drawable getDrawable(String source) 方法,下载下来图片如果比较大,会覆盖住之前的文字

解决方法:

https://www.cnblogs.com/haobo/p/3158449.html

android textView 加载HTML 异步加载网络图片

点击放大

TextView + Spanned实现图文混排以及图片点击交互

点击浏览图片

安卓TextView完美展示html格式代码

https://www.jianshu.com/p/36a9c573e416

Android - 富文本编辑器的更多相关文章

  1. Android 富文本编辑器实现方案

    本人实现富文本编辑器的时候,总结了如下两种方案: 1. 纯 EditText 实现方案 2. 使用ScrollView作为最外层的父容器来控制展示效果 示例demo地址为:https://github ...

  2. Android 图片混排富文本编辑器控件

    概述 一个Android 图片混排富文本编辑器控件(仿兴趣部落) 详细 代码下载:http://www.demodashi.com/demo/12032.html 一.一个Android 图片混排富文 ...

  3. 百度富文本编辑器ueditor在jsp中的使用(ssm框架中的应用)

    折腾了一下午终于把百度富文本编辑器ueditor搞定了!   项目地址:https://github.com/724888/lightnote_new     首先我参考了一个ueditor的demo ...

  4. 放弃WebView,使用Crosswalk做富文本编辑器

    版权声明: 欢迎转载,但请保留文章原始出处 作者:GavinCT 出处:http://www.cnblogs.com/ct2011/p/4100132.html 为什么放弃WebView Androi ...

  5. 移动端强大的富文本编辑器richeditor-android

    代码地址如下:http://www.demodashi.com/demo/14883.html 一.运行效果图 二.代码具体实现 1.引入richeditor-android richeditor-a ...

  6. 富文本编辑器Simditor的简易使用

    最近打算自己做一个博客系统,并不打算使用帝国cms或者wordpress之类的做后台管理!自己处于学习阶段也就想把从前台到后台一起谢了.好了,废话不多说了,先来看看富文本编辑器SimDitor,这里是 ...

  7. 个人网站对xss跨站脚本攻击(重点是富文本编辑器情况)和sql注入攻击的防范

    昨天本博客受到了xss跨站脚本注入攻击,3分钟攻陷--其实攻击者进攻的手法很简单,没啥技术含量.只能感叹自己之前竟然完全没防范. 这是数据库里留下的一些记录.最后那人弄了一个无限循环弹出框的脚本,估计 ...

  8. UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案

    UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效 ...

  9. PHP Ueditor 富文本编辑器

    2016年12月11日 08:46:59 星期日 百度的简版富文本编辑器umeditor很久没更新了 全功能版本的配置项跟umeditor还是有区别的, 这里说下ueditor怎么对接到项目中去, 主 ...

随机推荐

  1. 【转】C# 之泛型详解

    原文地址:https://www.cnblogs.com/yueyue184/p/5032156.html 什么是泛型 我们在编写程序时,经常遇到两个模块的功能非常相似,只是一个是处理int数据,另一 ...

  2. ArrayBlockingQueue源码解析(1)

    此文已由作者赵计刚授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 注意:在阅读本文之前或在阅读的过程中,需要用到ReentrantLock,内容见<第五章 Reentr ...

  3. [Ynoi2018]未来日记(分块)

    分块神题. 看了一会儿题解,看懂了思路,然后写了两个小时,调了一个多小时,好多地方写错了. 我们考虑对序列和值域都分块.\(sum1[i][j]\) 表示前 \(i\) 个块,第 \(j\) 块值域有 ...

  4. 《UNIX环境网络编程》第十四章第14.9小结(bug)

    1.源代码中的<sys/devpoll.h>头文件在我的CentOS7系统下的urs/include/sys/目录下没有找到. 而且我的CentOS7也不存在这个/dev/poll文件. ...

  5. 1-1 Vue的介绍

    简单介绍Vue Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易 ...

  6. html头部标签大全

    http://www.css88.com/archives/8052#table-index

  7. redis常用命令(二)

    一.集合(set) 单值多value,vaue不能重复 sadd/smembers/sismember 添加数据/获取set所有数据/判断是否存在某个值 scard 获取集合里面的元素个数 srem ...

  8. How To Scan QRCode For UWP (1)

    本文将介绍实现一个类似于微信扫一扫功能的UI界面,后续会再实现具体的识别二维码的功能. 实例使用的Win10 SDK Version是Windows 10 Anniversary Edition(10 ...

  9. MATLAB下数组随机打乱顺序的方法

    一:问题 有两个规模相同的数组,两个数组相同位置的元素一一对应,现在要将两数组的元素同时打乱顺序,并且乱序后的两数组对应位置元素要保持乱序前的对应关系. 二:方法  采用randperm()函数,产生 ...

  10. MySQL笔记(2)---InnoDB存储引擎

    1.前言 本节记录InnoDB的相关知识点. 2.InnoDB存储引擎简介 2.1版本 MySQL5.1开始,允许用动态方式加载引擎,这样存储引擎的更新可以不受MySQL数据库版本的限制.下面是各个I ...