WordPress-Editor-Android介绍:Android WebView与JavaScript实现的富文本编辑器

Android WebView与JavaScript实现富文本编辑器

前言

项目需要实现一个移动端的富文本编辑器，调研后发现Android平台主要有三种实现方式：
1. 通过不同的布局实现图片、文字、列表等排版，并且分别对应不同的HTML样式，参考项目android-animate-RichEditor；
2. 使用Android原生提供的EditText和Spannable对象。关于Span的介绍，参考项目Knife；
3. 采用WebView与JS实现。Web端的富文本编辑相对成熟，这种方式具有较好的跨平台性，参考项目richeditor-android，ZSSRichTextEditor。

为了兼容Android、IOS以及PC端，决定采用第三种方式来实现，而开源项目richeditor-android存在WebView 的兼容性问题（android4.4以上版本WebView内核修改），与IOS开源项目ZSSRichTextEditor所使用JS文件不相同。无意中发现了开源项目wordpress,对ZSSRichTextEditor.js进行了封装，分别提供了WordPress-Editor-Android和WordPress-Editor-iOS两个富文本编辑器，提供了丰富的文本编辑功能，下面就wordpress-editor代码进行分析。

总体设计

1. EditorFragmentAbstract为编辑器的基类，定义编辑器需要实现的相关方法，媒体文件类型（IMAGE/VIDEO/…）,以及EditorFragment与Activity的通信接口EditorFragmentListener。
2. JsCallbackReceiver用于接收JavaScript返回数据，通过OnJsEditorStateChangedListener接口实现JS与Anroid原生的之间的通信。
3. EditorFragment继承编辑器基类，实现了OnJsEditorStateChangedListener接口，封装了原生调用JS的一些方法。
4. NoteEditorActivity作为EditorFragment的容器，实现了EditorFragmentListener接口。
5. ZSSRichTextEditor.js作为资源文件引入，为编辑器提供了丰富的文本操作方法。

类关系图

主要功能介绍

编辑功能及拓展

• EditorFragment的布局引入format_bar.xml，定义了编辑器的功能选择区域。
• 目前实现了图片视频上传，字体加粗、斜体，文本引用、设置标号，插入超链接等；
• ZSSRichTextEditor.js文件中还提供了文本格式、颜色等多种设置方式，可以根据自己的需要进行拓展。
  

参考文档：

• 如何实现一个 Android 端的富文本编辑器？
• WordPress-Editor-Android