本文选自书客创作平台第 130 篇文章阅读原文 , 书客编辑器安卓 Java 版 - 体验版下载
书客创作
书客编辑器是一款基于 Markdown 标记语言的开源的富文本编辑器, 它以简易的操作界面和强大的功能深受广大开发者的喜爱正如官方所说: 现在的版本不一定是最好的版本, 却是最好的开源版本官方地址: editor.ibooker.cc
下面针对书客编辑器安卓 Java 版, 进行详解说明
效果图
在进行讲解之前, 首先看一下书客编辑器安卓版的效果图:
书客编辑器安卓版效果图
一引入资源
引入书客编辑器安卓 Java 版的方式有很多, 这里主要提供两种方式:
1 在 build.gradle 文件中添加以下代码:
- allprojects {
- repositories {
- maven { url 'https://jitpack.io' }
- }
- }
- dependencies {
- compile 'com.github.zrunker:IbookerEditorAndroid:v1.0'
- }
2 在 maven 文件中添加以下代码:
- <repositories>
- <repository>
- <id>jitpack.io</id>
- <url>https://jitpack.io</url>
- </repository>
- </repositories>
- <dependency>
- <groupId>com.github.zrunker</groupId>
- <artifactId>IbookerEditorAndroid</artifactId>
- <version>v1.0</version>
- </dependency>
二使用
书客编辑器安卓版简易所在就是只需要简单引入资源之后, 可以直接进行使用因为书客编辑器安卓版不仅仅提供了功能实现, 还提供了界面所以使用过程中, 连界面绘制都不用了
界面分析
书客编辑器安卓版界面大致分为三个部分, 即编辑器顶部, 内容区 (编辑区 + 预览区) 和底部(工具栏)
书客编辑器安卓 - 布局轮廓图
首先在布局文件中引入书客编辑器安卓版控件, 如布局文件为 activity_main.xml, 只需要在该文件内添加以下代码即可:
- <?xml version="1.0" encoding="utf-8"?>
- <cc.ibooker.ibookereditorlib.IbookerEditorView
- xmlns:android="http://schemas.android.com/apk/res/android"
- android:id="@+id/ibookereditorview"
- android:layout_width="match_parent"
- android:layout_height="match_parent" />
实际上 IbookerEditorView 继承 LinearLayout, 所以它具备 LinearLayout 的一切功能
三功能介绍
根据轮廓图可以看出, 书客编辑器安卓版布局只有三个部分, 所以关于书客编辑器安卓版功能模块也就分三个部分对外提供使用, 即修改哪一个布局模块就是对于哪一个功能模块
顶部功能模块
书客编辑器安卓版顶部实际上是采用 IbookerEditorTopView 控件进行呈现, 所以要实现顶部相关控件功能首先要获取该控件
书客编辑器安卓版顶部
书客编辑器安卓版顶部界面图, 从左到右分别对应返回 (back), 撤销(undo), 重做(redo), 编辑模式(edit), 预览模式(preview), 帮助(help), 关于(about) 知道每个按钮对应的功能, 所以就可以去修改或完善相关实现过程
例如修改返回按钮一些属性, 可以使用一下代码:
- // 设置书客编辑器顶部布局相关属性
- ibookerEditorView.getIbookerEditorTopView()
- .setBackImgVisibility(View.VISIBLE)
- .setBackImageResource(R.mipmap.ic_launcher);
当然也可以通过 IbookerEditorTopView 获取相关控件, 然后针对该控件进行逐一处理:
- ibookerEditorView.getIbookerEditorTopView()
- .getBackImg()
- .setVisibility(View.VISIBLE);
这里只是使用返回按钮进行举例说, 其他按钮使用规则更返回按钮一样
中间功能模块
书客编辑器安卓版中间区域又分为两个部分, 分别是编辑部分和预览部分, 所以要修改相关功能就要获取到相关部分的控件其中编辑部分由 IbookerEditorEditView 控件进行呈现, 预览部分由 IbookerEditorPreView 控件进行呈现
例如修改编辑部分相关属性, 可以使用如下代码:
- // 设置书客编辑器中间布局相关属性
- ibookerEditorView.getIbookerEditorVpView().getEditView()
- .setIbookerEdHint("书客编辑器")
- .setIbookerBackgroundColor(Color.parseColor("#DDDDDD"));
编辑部分并不是只有一个控件, 所以也可以获取相关控件, 然后针对特定控件进行逐一操作:
- ibookerEditorView.getIbookerEditorVpView()
- .getEditView()
- .getIbookerEd()
- .setText("书客编辑器");
- // 执行预览功能
- ibookerEditorView.getIbookerEditorVpView()
- .getPreView()
- .ibookerhtmlCompile("预览内容");
底部功能模块
书客编辑器安卓版, 底部为工具栏, 由 IbookerEditorToolView 进行呈现
工具栏一共提供了 30 多种功能, 每一个按钮对应一个功能各个控件分别为:
- boldIBtn, italicIBtn, strikeoutIBtn, underlineIBtn, capitalsIBtn,
- uppercaseIBtn, lowercaseIBtn, h1IBtn, h2IBtn,
- h3IBtn, h4IBtn, h5IBtn, h6IBtn, linkIBtn, quoteIBtn,
- codeIBtn, imguIBtn, olIBtn, ulIBtn, unselectedIBtn,
- selectedIBtn, tableIBtn, htmlIBtn, hrIBtn, emojiIBtn;
所以要修改底部相关属性, 首先要获取到 IbookerEditorToolView 控件, 然后对该控件进行操作
- // 设置书客编辑器底部布局相关属性
- ibookerEditorView.getIbookerEditorToolView()
- .setEmojiIBtnVisibility(View.GONE);
当然底部一共有 30 多个控件, 也可以直接获取到相关控件, 然后该控件进行操作, 如:
ibookerEditorView.getIbookerEditorToolView().getEmojiIBtn().setVisibility(View.GONE);
补充功能: 按钮点击事件监听
这里的按钮点击事件监听主要是针对顶部布局按钮和底部布局按钮
顶部部分按钮点击事件监听, 需要实现 IbookerEditorTopView.OnTopClickListener 接口, 而每个按钮点击通过对应 Tag 来判断, 具体代码如下:
- // 顶部按钮点击事件监听
- @Override
- public void onTopClick(Object tag) {
- if (tag.equals(IMG_BACK)) {// 返回
- } else if (tag.equals(IBTN_UNDO)) {// 撤销
- } else if (tag.equals(IBTN_REDO)) {// 重做
- } else if (tag.equals(IBTN_EDIT)) {// 编辑
- } else if (tag.equals(IBTN_PREVIEW)) {// 预览
- } else if (tag.equals(IBTN_HELP)) {// 帮助
- } else if (tag.equals(IBTN_ABOUT)) {// 关于
- }
- }
其中 IMG_BACKIBTN_UNDO 等变量是由 IbookerEditorEnum 枚举类提供
底部部分按钮点击事件监听, 需要实现 IbookerEditorToolView.OnToolClickListener 接口, 而每个按钮点击通过对应 Tag 来判断, 具体代码如下:
- // 工具栏按钮点击事件监听
- @Override
- public void onToolClick(Object tag) {
- if (tag.equals(IBTN_BOLD)) {// 加粗
- } else if (tag.equals(IBTN_ITALIC)) {// 斜体
- } else if (tag.equals(IBTN_STRIKEOUT)) {// 删除线
- } else if (tag.equals(IBTN_UNDERLINE)) {// 下划线
- } else if (tag.equals(IBTN_CAPITALS)) {// 单词首字母大写
- } else if (tag.equals(IBTN_UPPERCASE)) {// 字母转大写
- } else if (tag.equals(IBTN_LOWERCASE)) {// 字母转小写
- } else if (tag.equals(IBTN_H1)) {// 一级标题
- } else if (tag.equals(IBTN_H2)) {// 二级标题
- } else if (tag.equals(IBTN_H3)) {// 三级标题
- } else if (tag.equals(IBTN_H4)) {// 四级标题
- } else if (tag.equals(IBTN_H5)) {// 五级标题
- } else if (tag.equals(IBTN_H6)) {// 六级标题
- } else if (tag.equals(IBTN_LINK)) {// 超链接
- } else if (tag.equals(IBTN_QUOTE)) {// 引用
- } else if (tag.equals(IBTN_CODE)) {// 代码
- } else if (tag.equals(IBTN_IMG_U)) {// 图片
- } else if (tag.equals(IBTN_OL)) {// 数字列表
- } else if (tag.equals(IBTN_UL)) {// 普通列表
- } else if (tag.equals(IBTN_UNSELECTED)) {// 复选框未选中
- } else if (tag.equals(IBTN_SELECTED)) {// 复选框选中
- } else if (tag.equals(IBTN_TABLE)) {// 表格
- } else if (tag.equals(IBTN_HTML)) {// HTML
- } else if (tag.equals(IBTN_HR)) {// 分割线
- }
- }
其中 IBTN_BOLDIBTN_ITALIC 等变量是由 IbookerEditorEnum 枚举类提供
来源: http://www.jianshu.com/p/2f8766a51679