【Android】書客編輯器安卓Java版

做者：鄒峯立，微博：zrunker，郵箱：zrunker@yahoo.com，微信公衆號：書客創做，我的平臺：www.ibooker.cc。

本文選自書客創做平臺第130篇文章。閱讀原文 ， 書客編輯器安卓Java版 - 體驗版下載

書客編輯器是一款基於Markdown標記語言的開源的富文本編輯器，它以簡易的操做界面和強大的功能深受廣大開發者的喜好。正如官方所說：如今的版本不必定是最好的版本，倒是最好的開源版本。官方地址：editor.ibooker.cc。

下面針對書客編輯器安卓Java版，進行詳解說明。

效果圖

在進行講解以前，首先看一下書客編輯器安卓版的效果圖：

1、引入資源

引入書客編輯器安卓Java版的方式有不少，這裏主要提供兩種方式：

一、在build.gradle文件中添加如下代碼：

allprojects {
	repositories {
		maven { url 'https://jitpack.io' }
	}
}
複製代碼

dependencies {
	compile 'com.github.zrunker:IbookerEditorAndroid:v1.0.1'
}
複製代碼

二、在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>
複製代碼

2、使用

書客編輯器安卓版簡易所在就是隻須要簡單引入資源以後，能夠直接進行使用。由於書客編輯器安卓版不只僅提供了功能實現，還提供了界面。因此使用過程當中，連界面繪製都不用了。

界面分析

書客編輯器安卓版界面大體分爲三個部分，即編輯器頂部，內容區（編輯區+預覽區）和底部（工具欄）。

首先在佈局文件中引入書客編輯器安卓版控件，如佈局文件爲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的一切功能。

3、功能介紹

根據輪廓圖能夠看出，書客編輯器安卓版佈局只有三個部分，因此關於書客編輯器安卓版功能模塊也就分三個部分對外提供使用，即修改哪個佈局模塊就是對於哪個功能模塊。

頂部功能模塊

書客編輯器安卓版頂部其實是採用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_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地址 閱讀原文

---