作者:邹峰立,微博:zrunker,邮箱:zrunker@yahoo.com,微信大众号:书客创造,个人渠道:www.ibooker.cc。

本文选自书客创造渠道第130篇文章。阅览原文 , 书客修改器安卓Java版 – 体验版下载

【Android】书客编辑器安卓Java版

书客修改器是一款依据Markdown符号语言的开源的富文本修改器,它以简易的操作界面和强大的功用深受广大开发者的喜欢。正如官方所说:现在的版别不一定是最好的版别,却是最好的开源版别。官方地址:editor.ibooker.cc。

下面针对书客修改器安卓Java版,进行详解说明。

效果图

在进行讲解之前,首先看一下书客修改器安卓版的效果图:

【Android】书客编辑器安卓Java版

一、引进资源

引进书客修改器安卓Java版的方法有许多,这儿主要供给两种方法:

1、在build.gradle文件中增加以下代码:

allprojects {
	repositories {
		maven { url 'https://jitpack.io' }
	}
}
dependencies {
	compile 'com.github.zrunker:IbookerEditorAndroid:v1.0.1'
}

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.1</version>
</dependency>

二、运用

书客修改器安卓版简易所在便是只需要简略引进资源之后,能够直接进行运用。由于书客修改器安卓版不仅仅供给了功用完成,还供给了界面。所以运用过程中,连界面绘制都不用了。

界面分析

书客修改器安卓版界面大致分为三个部分,即修改器顶部,内容区(修改区+预览区)和底部(工具栏)。

【Android】书客编辑器安卓Java版

首先在布局文件中引进书客修改器安卓版控件,如布局文件为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控件进行出现,所以要完成顶部相关控件功用首先要获取该控件。

【Android】书客编辑器安卓Java版

书客修改器安卓版顶部界面图,从左到右分别对应回来(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_BACK、IBTN_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_BOLD、IBTN_ITALIC等变量是由IbookerEditorEnum枚举类供给。

Github地址 阅览原文


【Android】书客编辑器安卓Java版