Android富文本开发
基础概念目录介绍
- 01.业务需求简单介绍
- 02.实现的方案介绍
- 03.异常状态下保存状态信息
- 04.处理软键盘回删按钮逻辑
- 05.在指定位置插入图片
- 06.在指定位置插入输入文字
- 07.如果对选中文字加粗
- 08.利用Span对文字属性处理
- 09.如何设置插入多张图片
- 10.如何设置插入网络图片
- 11.如何避免插入图片OOM
- 12.如何删除图片或者文字
- 13.删除和插入图片添加动画
- 14.点击图片可以查看大图
- 15.如何暴露设置文字属性方法
- 16.文字中间添加图片注意事项
- 17.键盘弹出和收缩优化
- 18.前后台切换编辑富文本优化
- 19.生成html片段上传服务器
- 20.生成json片段上传服务器
- 21.图片上传策略问题思考
00.该控件介绍
1.1 富文本介绍
- 自定义文本控件,支持富文本,包含两种状态:编辑状态和预览状态。编辑状态中,可以对插入本地或者网络图片,可以同时插入多张有序图片和删除图片,支持图文混排,并且可以对文字内容简单操作加粗字体,设置字体下划线,支持设置文字超链接(超链接支持跳转),还可以统计富文本中的字数,功能正在开发中和完善中……
1.2 富文本效果图
1.3 富文本开源库
01.业务需求简单介绍
- 富文本控件支持动态插入文字,图片等图文混排内容。图片可以支持本地图片,也支持插入网络链接图片;
- 富文本又两种状态:编辑状态 + 预览状态 。两种状态可以相互进行切换;
- 富文本在编辑状态,可以同时选择插入超过一张以上的多张图片,并且可以动态设置图片之间的top间距;
- 在编辑状态,支持利用光标删除文字内容,同时也支持用光标删除图片;
- 在编辑状态,插入图片后,图片的宽度填充满手机屏幕的宽度,然后高度可以动态设置,图片是剧中裁剪显示;
- 在编辑状态,插入图片后,如果本地图片过大,要求对图片进行质量压缩,大小压缩;
- 在编辑状态,插入多张图片时,添加插入过渡动画,避免显示图片生硬。结束后,光标移到插入图片中的最后一行显示;
- 编辑状态中,图片点击暴露点击事件接口,可以在4个边角位置动态设置一个删除图片的功能,点击删除按钮则删除图片;
- 连续插入多张图片时,比如顺序1,2,3,注意避免出现图片插入顺序混乱的问题(异步插入多张图片可能出现顺序错乱问题);
- 在编辑富文本状态的时候,连续多张图片之间插入输入框,方便在图片间输入文本内容;
- 在编辑状态中,可以设置文字大小和颜色,同时做好拓展需求,后期可能添加文本加粗,下划线,插入超链接,对齐方式等功能;
- 编辑状态,连续插入多张图片,如果想在图片中间插入文字内容,则需要靠谱在图片之间预留编辑文本控件,方便操作;
- 支持对文字选中的内容进行设置加粗,添加下划线,改变颜色,设置对齐方式等等;
- 关于富文本字数统计,由于富文本中包括文字和图片,因此图片和文字数量统计分开。参考易车是:共n个文字,共n个图片显示
02.实现的方案介绍
2.0 页面构成分析
- 整个界面的要求
- 整体界面可滚动,可以编辑,也可以预览
- 内容可编辑可以插入文字、图片等。图片提供按钮操作
- 软键盘删除键可删除图片,也可以删除文字内容
- 文字可以修改属性,比如加粗,对齐,下划线
- 根据富文本作出以下分析
- 使用原生控件,可插入图片、文字界面不能用一个EditText来做,需要使用LinearLayout添加不同的控件,图片部分用ImageView,界面可滑动最外层使用ScrollView。
- 使用WebView+js+css方式,富文本格式用html方式展现,比较复杂,对标签要非常熟悉才可以尝试使用
- 使用原生控件多焦点问题分析
- 界面是由多个输入区域拼接而成,暂且把输入区域称为EditText,图片区域称为ImageView,外层是LinearLayout。
- 如果一个富文本是:文字1+图片1+文字2+文字3+图片3+图片4;那么使用LinearLayout包含多个EditText实现的难点:
- 如何处理记录当前的焦点区域
- 如何处理在文字区域的中间位置插入ImageView样式的拆分和合并
- 如何处理输入区域的删除键处理
2.2 第一种方案
- 使用ScrollView作为最外层,布局包含LineaLayout,图文混排内容,则是用TextView/EditText和ImageView去填充。
- 富文本编辑状态:ScrollView + LineaLayout + n个EditText+Span + n个ImageView
- 富文本预览状态:ScrollView + LineaLayout + n个TextView+Span + n个ImageView
- 删除的时候,根据光标的位置,如果光标遇到是图片,则可以用光标删除图片;如果光标遇到是文字,则可以用光标删除文字
- 当插入或者删除图片的时候,可以添加一个过渡动画效果,避免直接生硬的显示。如何在ViewGroup中添加view,删除view时给相应view和受影响的其他view添加动画,不太容易做。如果只是对受到影响的view添加动画,可以通过设置view的高度使之显示和隐藏,还可以利用ScrollView通过滚动隐藏和显示动画,但其他受影响的view则比较难处理,最终选择布局动画LayoutTransition 就可以很好地完成这个功能。
2.3 第二种方法
- 使用WebView实现编辑器,支持n多格式,例如常见的html或者markdown格式。利用html标签对富文本处理,这种方式就需要专门处理标签的样式。
- 注意这种方法的实现,需要深入研究js,css等,必须非常熟悉才可以用到实际开发中,可以当作学习一下。这种方式对于图片的显示和上传,相比原生要麻烦一些。
2.4 富文本支持功能
- 支持加粗、斜体、删除线、下划线行内样式,一行代码即可设置文本span属性,十分方便
- 支持添加单张或者多张图片,并且插入过渡动画友好,同时可以保证插入图片顺序
- 支持富文本编辑状态和预览状态的切换,支持富文本内容转化为json内容输出,转化为html内容输出
- 支持设置富文本的文字大小,行间距,图片和文本间距,以及插入图片的宽和高的属性
- 图片支持点击预览,支持点击叉号控件去除图片,暴露给外部开发者调用。同时加载图片的逻辑也是暴露给外部开发者,充分解耦
- 关于富文本字数统计,由于富文本中包括文字和图片,因此图片和文字数量统计分开。参考易车是:共n个文字,共n个图片显示
03.异常状态下保存状态信息
- 对于自定义View,如果页面出现异常导致自定义View异常退出,则当然希望保存一些重要的信息。自定义保存状态类,继承BaseSavedState,代码如下所示
- 如何使用该保存状态栏,自定义View中,有两个特别的方法,分别是onSaveInstanceState和onRestoreInstanceState,具体逻辑如下所示
04.处理软键盘回删按钮逻辑
- 想了一下,当富文本处于编辑的状态,利用光标可以进行删除插入点之前的字符。删除的时候,根据光标的位置,如果光标遇到是图片,则可以用光标删除图片;如果光标遇到是文字,则可以用光标删除文字。
- 更详细的来说,监听删除键的点击的逻辑需要注意,当光标在EditText 输入中间,点击删除不进行处理正常删除;当光标在EditText首端,判断前一个控件,如果是图片控件,删除图片控件,如果是输入控件,删除当前控件并将输入区域合并成一个输入区域。
- 创建一个键盘退格监听事件,代码如下所示:
- 然后针对退格删除,分为两种情况,第一种是删除图片,第二种是删除文字内容。具体代码如下所示:
05.在指定位置插入图片
- 当点击插入图片的时候,需要思考两个问题。第一个是在那个位置插入图片,所以需要定位到这个位置;第二个是插入图片后,什么时候折行操作。
- 对于上面两个问题,这个位置可以取光标所在的位置,但是对于一个EditText输入文本,插入图片这个位置可以分多种情况:
- 如果光标已经顶在了editText的最前面,则直接插入图片,并且EditText下移即可
- 如果光标已经顶在了editText的最末端,则需要添加新的imageView
- 如果光标已经顶在了editText的最中间,则需要分割字符串,分割成两个EditText,并在两个EditText中间插入图片
- 如果当前获取焦点的EditText为空,直接在EditText下方插入图片,并且插入空的EditText
- 代码思路如下所示
06.在指定位置插入输入文字
- 前面已经提到了,如果一个富文本是:文字1+图片1+文字2+文字3+图片3+图片4,那么点击文字1控件则在此输入文字,点击文字3控件则在此输入文字。
- 所以,这样操作,确定处理记录当前的焦点区域位置十分重要。当前的编辑器已经添加了多个输入文本EditText,现在的问题在于需要记录当前编辑的EditText,在应用样式的时候定位到输入的控件,在编辑器中添加一个变量lastFocusEdit。具体可以看代码……
- 既然可以记录最后焦点输入文本,那么如何监听当前的输入控件呢,这就用到了OnFocusChangeListener,这个又是在哪里用到,具体如下面所示。要先setOnFocusChangeListener(focusListener) 再 requestFocus。
07.如果对选中文字加粗
- Span 的分类介绍
- 字符外观,这种类型修改字符的外形但是不影响字符的测量,会触发文本重新绘制但是不触发重新布局。
- ForegroundColorSpan,BackgroundColorSpan,UnderlineSpan,StrikethrougnSpan
- 字符大小布局,这种类型Span会更改文本的大小和布局,会触发文本的重新测量绘制
- StyleSpan,RelativeSizeSpan,AbsoluteSizeSpan
- 影响段落级别,这种类型Span 在段落级别起作用,更改文本块在段落级别的外观,修改对齐方式,边距等。
- AlignmentSpan,BulletSpan,QuoteSpan
- 字符外观,这种类型修改字符的外形但是不影响字符的测量,会触发文本重新绘制但是不触发重新布局。
- 实现基础样式 粗体、 斜体、 下划线 、中划线 的设置和取消。举个例子,对文本加粗,文字设置span样式注意要点,这里需要区分几种情况
- 当前选中区域不存在 bold 样式 这里我们选中BB。两种情况
- 当前区域紧靠左侧或者右侧不存在粗体样式: AABBCC 这时候直接设置 span即可
- 当前区域紧靠左侧或者右侧存在粗体样式如: AABBCC AABBCC AABBCC。这时候需要合并左右两侧的span,只剩下一个 span
- 当前选中区域存在了Bold 样式 选中 ABBC。四种情况:
- 选中样式两侧不存在连续的bold样式 AABBCC
- 选中内部两端存在连续的bold 样式 AABBCC
- 选中左侧存在连续的bold 样式 AABBCC
- 选中右侧存在连续的bold 样式 AABBCC
- 这时候需要合并左右两侧已经存在的span,只剩下一个 span
- 接下来逐步分解,然后处理span的逻辑顺序如下所示
- 首先对选中文字内容样式情况判断
- 边界判断与设置
- 取消Span(当我们选中的区域在一段连续的 Bold 样式里面的时候,再次选择Bold将会取消样式)
- 什么时候取消span呢,这个逻辑是比较复杂的,具体看看下面的举例。
- 当我们选中的区域在一段连续的 Bold 样式里面的时候,再次选择Bold将会取消样式
- 用户可以随意的删除文本,在删除过程中可能会出现如下的情况:
- 用户输入了 AABBCCDD
- 用户选择了粗体样式 AABBCCDD
- 用户删除了CC然后显示如下 : AABB DD
- 这个时候选中其中的BD 此时,在该区域中 存在两个span ,并且没有一个 span 完全包裹选中的 BD
- 在这种情况下 仍需要进行左右侧边界判断进行删除。这个具体可以看代码逻辑。
08.利用Span对文字属性处理
- 这里仅仅是对字体加粗进行介绍,其实设置span可以找到规律。多个span样式,考虑到后期的拓展性,肯定要进行封装和抽象,具体该如何处理呢?
- 设置文本选中内容加粗模式,代码如下所示,可以看到这里只需要传递一个lastFocusEdit对象即可,这个对象是最近被聚焦的EditText。
- 然后如何调用这个,在HyperTextEditor类中代码如下所示。为何要这样写,可以把HyperTextEditor富文本类中设置span的逻辑放到SpanTextHelper类中处理,该类专门处理各种span属性,这样代码结构更加清晰,也方便后期增加更多span属性,避免一个类代码太臃肿。
- 然后看一下new BoldStyle().applyStyle(editable, start, end)具体做了什么?下面这段代码逻辑,具体可以看07.如果对选中文字加粗的分析思路。
09.如何设置插入多张图片
- 富文本当然支持插入多张图片,那么插入多张图片是如何操作呢。插入1,2,3这三张图片,如何保证它们的插入顺序,从而避免插入错位,带着这几个问题看一下插入多张图片操作。
10.如何设置插入网络图片
- 插入图片有两种情况,一种是本地图片,一种是网络图片。由于富文本中对插入图片的宽高有限制,即可以动态设置图片的高度,这就要求请求网络图片后,需要对图片进行处理。
- 首先看一下插入图片的代码,在HyperTextEditor类中,由于封装lib,不建议在lib中使用某个图片加载库加载图片,而应该是暴露给外部开发者去加载图片。
- 那么具体在那个地方去loadImage设置加载图片呢?可以发现这样极大地提高了代码的拓展性,原因是你可能用glide,他可能用Picasso,还有的用ImageLoader,所以最好暴露给外部。
11.如何避免插入图片OOM
- 加载一个本地的大图片或者网络图片,从加载到设置到View上,如何减下内存,避免加载图片OOM。
- 在展示高分辨率图片的时候,最好先将图片进行压缩。压缩后的图片大小应该和用来展示它的控件大小相近,在一个很小的ImageView上显示一张超大的图片不会带来任何视觉上的好处,但却会占用相当多宝贵的内存,而且在性能上还可能会带来负面影响。
- 加载图片的内存都去哪里呢?
- 其实我们的内存就是去bitmap里了,BitmapFactory的每个decode函数都会生成一个bitmap对象,用于存放解码后的图像,然后返回该引用。如果图像数据较大就会造成bitmap对象申请的内存较多,如果图像过多就会造成内存不够用自然就会出现out of memory的现象。
- 为何容易OOM?
- 通过BitmapFactory的decode的这些方法会尝试为已经构建的bitmap分配内存,这时就会很容易导致OOM出现。为此每一种解析方法都提供了一个可选的BitmapFactory.Options参数,将这个参数的inJustDecodeBounds属性设置为true就可以让解析方法禁止为bitmap分配内存,返回值也不再是一个Bitmap对象,而是null。
- 如何对图片进行压缩?
- 1.解析图片,获取图片资源的属性
- 2.计算图片的缩放值
- 3.最后对图片进行质量压缩
- 具体设置图片压缩的代码如下所示
- 思考:inJustDecodeBounds这个参数是干什么的?
- 如果设置为true则表示decode函数不会生成bitmap对象,仅是将图像相关的参数填充到option对象里,这样我们就可以在不生成bitmap而获取到图像的相关参数了。
- 为何设置两次inJustDecodeBounds属性?
- 第一次:设置为true则表示decode函数不会生成bitmap对象,仅是将图像相关的参数填充到option对象里,这样我们就可以在不生成bitmap而获取到图像的相关参数。
- 第二次:将inJustDecodeBounds设置为false再次调用decode函数时就能生成bitmap了。而此时的bitmap已经压缩减小很多了,所以加载到内存中并不会导致OOM。
12.如何删除图片或者文字
- 当富文本处于编辑状态时,点击删除图片是可以删除图片的,对于删除的逻辑,封装的lib可以给开发者暴露一个删除的监听事件。注意删除图片有两种操作:第一种是利用光标删除,第二种是点击触发删除。删除图片后,不仅仅是要删除图片数据,而且还要删除图片ImageView控件。
13.删除和插入图片添加动画
- 为什么要添加插入图片的过渡动画
- 当向一个ViewGroup添加控件或者移除控件;这种场景虽然能够实现效果,并没有一点过度效果,直来直去的添加或者移除,显得有点生硬。有没有办法添加一定的过度效果,让实现的效果显得圆滑呢?
- LayoutTransition简单介绍
- LayoutTransition类实际上Android系统中的一个实用工具类。使用LayoutTransition类在一个ViewGroup中对布局更改进行动画处理。
- 如何运用到插入或者删除图片场景中
- 向一个ViewGroup添加控件或者移除控件,这两种效果的过程是应对应于控件的显示、控件添加时其他控件的位置移动、控件的消失、控件移除时其他控件的位置移动等四种动画效果。这些动画效果在LayoutTransition中,由以下四个关键字做出了相关声明:
- APPEARING:元素在容器中显现时需要动画显示。
- CHANGE_APPEARING:由于容器中要显现一个新的元素,其它元素的变化需要动画显示。
- DISAPPEARING:元素在容器中消失时需要动画显示。
- CHANGE_DISAPPEARING:由于容器中某个元素要消失,其它元素的变化需要动画显示。
- 也就是说,ViewGroup中有多个ImageView对象,如果需要删除其中一个ImageView对象的话,该ImageView对象可以设置动画(即DISAPPEARING 动画形式),ViewGroup中的其它ImageView对象此时移动到新的位置的过程中也可以设置相关的动画(即CHANGE_DISAPPEARING 动画形式);
- 若向ViewGroup中添加一个ImageView,ImageView对象可以设置动画(即APPEARING 动画形式),ViewGroup中的其它ImageView对象此时移动到新的位置的过程中也可以设置相关的动画(即CHANGE_APPEARING 动画形式)。
- 给ViewGroup设置动画很简单,只需要生成一个LayoutTransition实例,然后调用ViewGroup的setLayoutTransition(LayoutTransition)函数就可以了。当设置了布局动画的ViewGroup添加或者删除内部view时就会触发动画。
- 向一个ViewGroup添加控件或者移除控件,这两种效果的过程是应对应于控件的显示、控件添加时其他控件的位置移动、控件的消失、控件移除时其他控件的位置移动等四种动画效果。这些动画效果在LayoutTransition中,由以下四个关键字做出了相关声明:
- 具体初始化动画的代码如下所示:
- 有个问题需要注意一下,当控件销毁的时候,记得把监听给移除一下更好,代码如下所示
- 动画执行先后的顺序
- 分析源码可以知道,默认情况下DISAPPEARING和CHANGE_APPEARING类型动画会立即执行,其他类型动画则会有个延迟。也就是说如果删除view,被删除的view将先执行动画消失,经过一些延迟受影响的view会进行动画补上位置,如果添加view,受影响的view将会先给添加的view腾位置执行CHANGE_APPEARING动画,经过一些时间的延迟才会执行APPEARING动画。这里就不贴分析源码的思路呢!
14.点击图片可以查看大图
- 编辑状态时,由于图片有空能比较大,在显示在富文本的时候,会裁剪局中显示,也就是图片会显示不全。那么后期如果是想添加点击图片查看,则需要暴露给开发者监听事件,需要考虑到后期拓展性,代码如下所示:
- 这样做的目的是是暴露给外部开发者调用,点击图片的操作只需要传递view还有图片即可。
15.如何暴露设置文字属性方法
- 针对设置文字加粗,下划线,删除线等span属性。同时设置span,有许多类似的地方,考虑到后期的添加和移除,如何封装能够提高代码的扩展性。
- 上面实现了选中文本加粗的功能,斜体、 下划线 、中划线等样式的设置和取消与粗体样式一致,只是创建 span 的区别而已,可以将代码进行抽取。
- 其他的设置span的属性代码即是如下所示,可以看到添加一种类型很容易,也容易看懂,便于拓展:
16.文字中间添加图片注意事项
- 在文字中添加图片比较特殊,因此这里单独拿出来说一下。在文字内容中间插入图片,则需要分割字符串,分割成两个EditText,并在两个EditText中间插入图片,那么这个光标又定位在何处呢?
- 对于光标前面的字符串保留,设置给当前获得焦点的EditText(此为分割出来的第一个EditText)
- 把光标后面的字符串放在新创建的EditText中(此为分割出来的第二个EditText)
- 在第二个EditText的位置插入一个空的EditText,以便连续插入多张图片时,有空间写文字,第二个EditText下移
- 在空的EditText的位置插入图片布局,空的EditText下移。注意,这个过程添加动画过渡一下插入的效果比较好,不然会比较生硬
17.键盘弹出和收缩优化
- 软键盘弹出的时机
- 如果不做任何处理,系统默认的是,进入页面,第一个输入框自动获取焦点软键盘自动弹出,这种用户交互方式,往往不是产品想要的,往往会提出以下优化需求:
- 需求1:editText获取焦点,但是不弹出软键盘(也就是说光标显示第一个输入框,不主动弹软键盘)
- 在第一个输入框的最直接父布局加入:android:focusable="true";android:focusableInTouchMode="true"
- (效果:软键盘不弹出,光标不显示,其他输入框也不获取焦点,ps非直接父布局没有效果)
- android:windowSoftInputMode="stateAlwaysHidden"
- (效果:软键盘不弹出,光标显示在第一个输入框中)
- 在第一个输入框的最直接父布局加入:android:focusable="true";android:focusableInTouchMode="true"
- 需求2:editText不获取焦点,当然软键盘不会主动弹出(光标也不显示)
- 在第一个输入框的最直接父布局加入:android:focusable="true";android:focusableInTouchMode="true"
- (效果:软键盘不弹出,光标不显示,其他输入框也不获取焦点,ps非直接父布局没有效果)
- 在父布局最顶部添加一个高度为0的EditText,抢了焦点但不展示;
- 在第一个输入框的最直接父布局加入:android:focusable="true";android:focusableInTouchMode="true"
- 软键盘遮挡界面的问题
- 当界面中有输入框,需要弹起软键盘输入信息的时候,软键盘可能遮挡部分布局,更有甚者,当前输入框如果在屏幕下方,软键盘也会直接遮挡输入框,这种情况对用户体验是相当不友好的,所以要根据具体的情况作出相应的处理。
- android定义了一个属性,名字为windowSoftInputMode, 这个属性用于设置Activity主窗口与软键盘的交互模式,用于避免软键盘遮挡内容的问题。我们可以在AndroidManifet.xml中对Activity进行设置。
- 看了上面的属性,那么该如何设置呢?具体效果可以看demo案例。
- 软键盘及时退出的问题
- 当用户输入完成之后,必须手动点击软键盘的收回键,软键盘才收起。如果能通过代码主动将软键盘收起,这对于用户体验来说,是一个极大的提升,思前想后,参考网上的文档,个人比较喜欢的实现方式是通过事件分发机制来解决这个问题。
- 解决点击EditText弹出收起键盘时出现的黑屏闪现现象
18.前后台切换编辑富文本优化
- 由于富文本中,用户会输入很多的内容,当关闭页面时候,需要提醒用户是否保存输入内容。同时,切换到后台的时候,需要注意保存输入内容,避免长时间切换后台进程内存吃紧,在回到前台输入的内容没有呢,查阅了汽车之家,易车等app等手机上的富文本编辑器,都会有这个细节点的优化。
19.生成html片段上传服务器
19.1 提交富文本
- 客户端生成html片段到服务器
- 在客户端提交帖子,文章。富文本包括图片,文字内容,还有文字span样式,同时会选择一些文章,帖子的标签。还有设置文章的类型,封面图,作者等许多属性。
- 当点击提交的时候,客户端把这些数据,转化成html,还是转化成json对象提交给服务器呢?思考一下,会有哪些问题……
- 转化成html
- 对于将单个富文本转化成html相对来说是比较容易的,因为富文本中之存在文字,图片等。转化成html细心就可以。
- 但是对于设置富文本的标签,类型,作者,封面图,日期,其他关联属性怎么合并到html中呢,这个相对麻烦。
- 最后想说的是
- 对于富文本写帖子,文章,如果写完富文本提交,则可以使用转化成html数据提交给服务器;
- 对于富文本写完帖子,文章,还有下一步,设置标签,类型,封面图,作者,时间,还有其他属性,则可以使用转化成json数据提交给服务器;
19.2 编辑富文本
- 服务器返回html给客户端加载
- 涉及到富文本的加载,后台管理端编辑器生成的一段html 代码要渲染到移动端上面,一种方法是前端做成html页面,放到服务器上,移动端这边直接webView 加载url即可。
- 还有一种后台接口直接返回这段html富文本的,String类型的,移动端直接加载的;具体的需求按实际情况而定。
- 加载html文件流畅问题
- webView直接加载url体验上没那么流畅,相对的加载html文件会好点。但是对比原生,体验上稍微弱点。
- 如果不用WebView,使用TextView显示html富文本,则会出现图片不显示,以及格式问题。
- 如果不用WebView,使用自定义富文本RichText,则需要解析html显示,如果对html标签,js不熟悉,也不太好处理。
20.生成json片段上传服务器
- 参考了易车发布帖子,提交数据到服务器,针对富文本,是把它拼接成对象。将文字,图片按照富文本的顺序拼接成json片段,然后提交给服务器。
20.1 提交富文本
- 用原生ScrollView + LineaLayout + n个EditText+Span + n个ImageView来实现富文本。可以先创建一个对象用来存储数据,下面这个实体类比较简单,开发中字段稍微多些。如下所示
- 然后怎么去把富文本数据按照有序去放到集合中呢?如下所示,具体可以看demo中的代码……
- 最后将富文本数据转化为json提交到服务器,服务器拿到json后,结合富文本的后续信息,比如,作者,时间,类型,标签等创建可以用浏览器打开的h5页面,这个需要跟服务器端配合。如下所示
20.2 编辑富文本
- 当然,提交了文章肯定还有审核功能,这个时候想去修改富文本怎么办。ok,需要服务器把之前传递给它的json返回给客户端,然后解析填充到富文本中。这个就没什么好说的……
21.图片上传策略问题思考
- 大多数开发者会采用的方式:
- 先在编辑器里显示本地图片,等待用户编辑完成再上传全部图片,然后用上传返回的url替换之前html中显示本地图片的位置。
- 这样会遇到很多问题:
- 如果图片很多,上传的数据量会很大,手机的网络状态经常不稳定,很容易上传失败。另外等待时间会很长,体验很差。
- 解决办法探讨:
- 选图完成即上传,得到url之后直接插入,上传是耗时操作,再加上图片压缩的时间,这样编辑器显示图片会有可观的延迟时间,实际项目中可以加一个默认的占位图,另外加一个标记提醒用户是否上传完成,避免没有上传成功用户即提交的问题。
- 这种场景很容易想到:
- 比如,在简书,掘金上写博客。写文章时,插入本地图片,即使你没有提交文章,也会把图片上传到服务器,然后返回一个图片链接给你,最后当你发表文章时,图片只需要用链接替代即可。
- 参考博客
- Android富文本编辑器(四):HTML文本转换:https://www.jianshu.com/p/578085fb07d1
- Android 端 (图文混排)富文本编辑器的开发(一):https://www.jianshu.com/p/155aa1e9f9d3
- 图文混排富文本文章编辑器实现详解:https://blog.csdn.net/ljzdyh/article/details/82497625
富文本开源库:https://github.com/yangchong211/YCCustomText
你的star是我开源的动力,谢谢!
Android富文本开发的更多相关文章
- Android - 富文本编辑器
Android富文本编辑器(一):基础知识 目前主流的基于Android富文本开发方式思路如下: 基于TextView图文混排 使用方式: TextView textView = new TextVi ...
- Android 富文本框实现 RichEditText
Android系统自带控件没有富文本框控件,如果想写一封带格式的邮件基本上不可能,EdtiText只有默认一种格式,显示不能滿足要求,!!正好项目需要研究了一下,开发了此控件,现将一些源代码开放一下, ...
- 一个简单的Android富文本TextView实现
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 24.0px Helvetica; color: #555555 } p.p2 { margin: 0.0p ...
- Android 富文本编辑器实现方案
本人实现富文本编辑器的时候,总结了如下两种方案: 1. 纯 EditText 实现方案 2. 使用ScrollView作为最外层的父容器来控制展示效果 示例demo地址为:https://github ...
- React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例)
React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例) TextInput组件介绍 TextInput是一个允许用户在应用中通过键盘输入文本的基本组 ...
- android html 图片处理类--加载富文本工具类
在android开发中,一些资讯类页面,里面有html标签和图片,html 标签一般通过Html.fromHtml方法,即可以解决,但是如果html 有图片标签,那么,Html.fromHtml 好像 ...
- 【微信公众平台开发】公布动态新闻好帮手UEditor富文本
因为微信要做公布动态新闻.那就须要富文本. 上网搜索有非常多这样的插件,比方CKEditor.KindEditor等:最后看到百度一款开源的UEditor.官网打开,风格设计就吸引住了自己.所以就选U ...
- android 记一次富文本加载之路
文章链接:https://mp.weixin.qq.com/s/69TRkmFL1aNuSqfw4ULMJw 项目中经常涉及到富文本的加载,后台管理端编辑器生成的一段html 代码要渲染到移动端上面, ...
- OS开发小记:iOS富文本框架DTCoreText在UITableView上的使用
要在页面中显示自己的布局,比如文字的字体和颜色.图文并排的样式,我们要用iOS SDK的原生UI在app本地搭建,如果一个页面需要在服务器端获取数据的话,我们也要在本地搭建好固定的布局,解析服务器传回 ...
- Android 图片混排富文本编辑器控件
概述 一个Android 图片混排富文本编辑器控件(仿兴趣部落) 详细 代码下载:http://www.demodashi.com/demo/12032.html 一.一个Android 图片混排富文 ...
随机推荐
- .NET 云原生架构师训练营(模块二 基础巩固 REST && RESTful)--学习笔记
2.3.1 Web API -- REST && RESTful 什么是 REST,什么是 RESTful RESTful API 设计 RESTful 成熟度模型 什么是 REST, ...
- 从零开始的react入门教程(一),让我们从hello world开始
壹 ❀ 引 按照之前的计划,从这个月开始,我将由浅至深更新一些react相关的技术博文.由于我目前也是react新手一名,所以文章本质上也算自己学习历程的记录,倘若这些文章能帮助到一些人那就再好不过了 ...
- STC12硬件SPI驱动MAX7219点阵LED
max7219是一个用于驱动8位7段数字LED或者8x8点阵LED的驱动芯片, 以列扫描的方式, 用16个pin管理64个发光点, 显示8个数字时刷新率为500-1300Hz, 典型值为800Hz. ...
- 关于php redis的geocoding函数
在php的redis扩展官方github上,文档的最下面的确存在geocoding的函数说明.但是笔者尝试调用geoAdd函数时,返回值一直为false.就纳闷了,是使用的姿势不对,还是存在其它问题? ...
- Spring Boot学生信息管理系统项目实战-4.学生管理
1.获取源码 源码是捐赠方式获取,详细请QQ联系我 :) 2.实现效果 2.1 导出导入模板 2.2 导入学生数据 3.项目源码 只挑重点讲,详细请看源码. 学生管理包含了学生信息的增删改查,这里我只 ...
- Spring Boot图书管理系统项目实战-10.借还统计
导航: pre: 9.归还图书 next:11.检索图书 只挑重点的讲,具体的请看项目源码. 1.项目源码 需要源码的朋友,请捐赠任意金额后留下邮箱发送:) 2.页面设计 2.1 bookStat. ...
- Java Base64编码使用介绍
Base64编码介绍 BASE64 编码是一种常用的字符编码,Base64编码本质上是一种将二进制数据转成文本数据的方案. 但base64不是安全领域下的加密解密算法.能起到安全作用的效果很差 ...
- 【Android逆向】破解黑宝宝apk,绕过签名校验
这是52pojie的一道题,实现输入任何密码都可以登录成功 他知道你最近在学习Android逆向 他想在游戏上线前让你测试一下他新加的签名验证是否能防住别人的破解. 下面是李华编写的黑宝宝apk 链接 ...
- multiple definition of `MainWindow::MainWindow(QWidget*)
qt刚建好工程运行的时候没问题,后面写了一点东西之后,再运行就发现出现MainWindow重复,我不理解. 解决方法:删除重复的引用. 再重新构建一下就好了.
- 关于minio Monitoring Metrics面板响应慢的问题
问题: 服务器ip修改之后,打开minio发现面板数据现需要三十多秒才能加载,排除了服务器cpu,内存,磁盘等的问题 原因: 之前配置过amqp监听,因服务器ip变更导致minio连不上rabbitm ...