富文本编辑在Android移动采编中的研究与应用

富文本编辑在Android移动采编中的研究与应用

赵  韬  吴  桑  银  进

(四川封面传媒有限责任公司)

【摘  要】本文主要研究在Android系统中，通过原生输入控件EditText,实现富文本编辑，并修改Htmljava文件兼容css样式等实现HTML标签语言与原生富文本的相互转换，以实现新闻在移动端的采编。

【关键词】富文本HTML csS

1  背景

随着互联网的快速发展，移动端分享信息变得越来越便捷，分享的信息类型从文字发展到图片、音频、视频。而在新闻媒体行业，现有的简单记录新闻内容的方式已经有了不小的局限性，在调研了媒体从业者需求的基础上，发现他们对于信息内容的表达方式上不只局限一段文字，一张图或者一段视频，需要更复杂的文本混排方式，这样能更加丰富全面的记录新闻内容。在此基础上，我们研究开发了Android平台上的富文本编辑器，希望由此能提高新闻从业者的工作效率。

2  富文本在Android移动采编中的使用

2.1  富文本简介

富文本是在纯文本的基础上增加文字大小颜色样式、图片插入、连接插入等特殊的文本格式。具有图文混排，加粗样色变化等特效，更能吸引用户眼球，也能更突出的将重要的信息传达也用户。

在Android中，字符级别的样式有：文本大小、文本颜色、文本所在背景颜色、粗体、斜体、描边、下划线、删除线、上标、下标、外链、图片插入等；段落级别的样式有：对齐方式、文本缩进、文本间距、图片插入等。在本文中，图片插入仅支持段落样式。

在采编系统中，通常需要将文字和图片加上段落样式以及粗体斜体等标记，最后生成HTML代码，因为HTML中包含有文字、图片的css style,所以通过浏览器等媒介来展示HTML时，就可以显示为我们所需要的富文本。

2.2  富文本CharSequence的使用

在Android中，富文本也就是CharSequence,是由一串char构成的字符串结合，可以通过给特定位置的字符串设置Span,当绘制的时候调用Span的draw方法即可将span的样式显示出来，用户就可以看到加粗、斜体、图片等特殊样式了，再通过修改过的Htmljava中的方法将CharSequence转换为HTML,即可实现富文本的编辑与发布。

3  基于Android的富文本编辑器的研究

3.1  输入框EditText

EditText作为系统原生控件，能输入文字，修改字体和颜色，但这些修改都是全局的，即不能单独给某个字符添加特殊颜色样式等。要实现富文本，还要依托于EditText中记录文本的属性mText,该属性是一个CharSequence,通过这个属性即可将普通文本作为富文本展示。使用mText虽然能展示出富文本，但是不能实现编辑功能，此时需要监听EditText的输入变化，当字符输入的时候，需要给当前输入的字符依次应用各种样式。

3.2输入框编辑器工具栏

在富文本编辑过程中，需要一个工具栏，以便能快速设置字号、大小、颜色、对齐方式等。这个工具栏需要与输入框EditText关联，在需要编辑时，才出现工具栏。监听EditText的焦点变化，即可实现需要编辑时出现工具栏，不需要编辑的时候关闭工具栏。此外，当用户滑动内容的时候，将焦点取消，自然也关闭了工具栏。

应用内每一个样式都是一个Plugin插件，里面记录了当前该样式的状态，比如加粗与不加粗，文本大小是多少，文本颜色是什么，这些状态值与工具栏对应的UI绑定，当用户点击切换状态的时候，插件内的状态变更，同时根据选中的光标决定是否修改内容的样式。

当切换了光标位置，或者选择了一段文本，一次检索每个插件并将当前选中的样式状态给每个插件的状态赋值，然后同步更新到工具栏对应的UI上。

3.3  具体实现

静态准备：为每一个样式添加一个类用作管理，取名为PluginXXX,XXX为具体样式的名称；自定义View继承EditText,维护一个插件集合。

动态变更：用户输入字符后，依次遍历插件集合给新添加的字符添加各种样式；光标改变的时候，依次遍历插件集合将当前选中文本的样式更新到插件中，并通知工具栏UI做出更改；当用户交互工具栏UI时，找到指定插件修改状态并给文本设置新的样式。

历史记录：当输入内容变更的时候，需要记录历史数据，以便用户快速进行回退。

3.4操作流程图

3.5  框架图

4 CharSequence与HTML互相转换的研究

富文本CharSequence要转换为HTML,在系统提供的Html.java中的方法不能解析成符合需求的样式，同时也存在css样式不兼容的问题。

4.1  对图片、视频的处理

转换为HTML:在编辑插入图片视频的过程中，使用自定义的Span,保存图片的地址，视频的地址和视频封面的地址，当查询到对应的特殊自定义Span,填充对应的<img>或者<video>标签。

解析为原生：解析到<img>或者<video>标签，使用自定义的span填充，同时拉取网络图片并展示。

4.2对链接的处理

转换为HTML:链接也采用自定义Span进行编辑显示，查询到该span时，使用<a>标签进行填充；

解析为原生：和图片视频同理，解析到<a>标签，使用自定义的span填充。

4.3  兼容css样式

解析为原生：由于系统自带的解析，并不支持css样式，缓存css样式，在span标签中，如果存在class属性，即从缓存的css样式找到对应的属性进行span设置。

5  结束语

本文设计并实现了基于Android平台的富文本编辑器，有着操作便捷、扩展性强、兼容性强等优点，方便媒体从业者更加便捷的编辑发布新闻内容，提高工作效率。对富文本编辑器在动态显示GIF图片、流畅度等方面的提升和优化是下一步的研究方向。

参考文献：

[1]多格式文本编辑器：https://github.com/widemouth-dz/wmrichtexteditor

[2] RichEditor:https://github.com/yuruiyin/RichEditor