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

作者：鄒峰立，微博：zrunker，郵箱：zrunker@yahoo.com，微信公眾號：書客創作，個人平台：[首頁 - 書客創作](首頁 - 書客創作)。本文選自[書客創作](首頁 - 書客創作)平台第131篇文章。[閱讀原文](【Android】書客編輯器安卓Kotlin版 - 書客創作) ， [書客編輯器安卓Kotlin版 - 體驗版下載](蒲公英)

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

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

效果圖

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

一、引入資源

引入書客編輯器安卓Kotlin版的方式有很多，這裡主要提供兩種方式：

1、在build.gradle文件中添加以下代碼：

allprojects { repositories { maven { url https://jitpack.io } }}dependencies { compile com.github.zrunker:IbookerEditorAndroidK: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>IbookerEditorAndroidK</artifactId> <version>v1.0.1</version></dependency>

二、使用

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

界面分析

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

首先在布局文件中引入書客編輯器安卓版控制項，如布局文件為activity_main.xml，只需要在該文件內添加以下代碼即可：

<?xml version="1.0" encoding="utf-8"?><cc.ibooker.ibookereditorklib.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.ibookerEditorTopView?.setBackImgVisibility(View.VISIBLE)?.setHelpIBtnVisibility(View.VISIBLE)

當然也可以通過IbookerEditorTopView獲取相關控制項，然後針對該控制項進行逐一處理：

ibookerEditorView.ibookerEditorTopView?.backImg?.visibility = View.VISIBLE

這裡只是使用返回按鈕進行舉例說，其他按鈕使用規則更返回按鈕一樣。

中間功能模塊

書客編輯器安卓版中間區域又分為兩個部分，分別是編輯部分和預覽部分，所以要修改相關功能就要獲取到相關部分的控制項。其中編輯部分由IbookerEditorEditView控制項進行呈現，預覽部分由IbookerEditorPreView控制項進行呈現。

例如修改編輯部分相關屬性，可以使用如下代碼：

// 設置書客編輯器中間布局相關屬性ibookerEditorView.ibookerEditorVpView?.editView?.setIbookerEdHint("書客編輯器")?.setIbookerBackgroundColor(Color.parseColor("#DDDDDD"))

編輯部分並不是只有一個控制項，所以也可以獲取相關控制項，然後針對特定控制項進行逐一操作：

ibookerEditorView.ibookerEditorVpView?.editView?.ibookerEd?.setText("書客編輯器")// 執行預覽功能ibookerEditorView.ibookerEditorVpView?.preView?.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.ibookerEditorToolView?.setEmojiIBtnVisibility(View.GONE)

當然底部一共有30多個控制項，也可以直接獲取到相關控制項，然後該控制項進行操作，如：

ibookerEditorView.ibookerEditorToolView?.emojiIBtn?.visibility = View.GONE

補充功能：按鈕點擊事件監聽

這裡的按鈕點擊事件監聽主要是針對頂部布局按鈕和底部布局按鈕。

頂部部分按鈕點擊事件監聽，需要實現IbookerEditorTopView.OnTopClickListener介面，而每個按鈕點擊通過對應Tag來判斷，具體代碼如下：

// 頂部按鈕點擊事件監聽override fun onTopClick(tag: Any) { if (tag == IbookerEditorEnum.TOOLVIEW_TAG.IMG_BACK) {// 返回 } else if (tag == IbookerEditorEnum.TOOLVIEW_TAG.IBTN_UNDO) {// 撤銷 } else if (tag == IbookerEditorEnum.TOOLVIEW_TAG.IBTN_REDO) {// 重做 } else if (tag == IbookerEditorEnum.TOOLVIEW_TAG.IBTN_EDIT) {// 編輯 } else if (tag == IbookerEditorEnum.TOOLVIEW_TAG.IBTN_PREVIEW) {// 預覽 } else if (tag == IbookerEditorEnum.TOOLVIEW_TAG.IBTN_HELP) {// 幫助 } else if (tag == IbookerEditorEnum.TOOLVIEW_TAG.IBTN_ABOUT) {// 關於 }}

其中IMG_BACK、IBTN_UNDO等變數是由IbookerEditorEnum枚舉類提供。

底部部分按鈕點擊事件監聽，需要實現IbookerEditorToolView.OnToolClickListener介面，而每個按鈕點擊通過對應Tag來判斷，具體代碼如下：

// 工具欄按鈕點擊事件監聽override fun onToolClick(tag: Any) { if (tag == IbookerEditorEnum.TOOLVIEW_TAG.IBTN_BOLD) {// 加粗 } else if (tag == IbookerEditorEnum.TOOLVIEW_TAG.IBTN_ITALIC) {// 斜體 } else if (tag == IbookerEditorEnum.TOOLVIEW_TAG.IBTN_STRIKEOUT) {// 刪除線 } else if (tag == IbookerEditorEnum.TOOLVIEW_TAG.IBTN_UNDERLINE) {// 下劃線 } else if (tag == IbookerEditorEnum.TOOLVIEW_TAG.IBTN_CAPITALS) {// 單詞首字母大寫 } else if (tag == IbookerEditorEnum.TOOLVIEW_TAG.IBTN_UPPERCASE) {// 字母轉大寫 } else if (tag == IbookerEditorEnum.TOOLVIEW_TAG.IBTN_LOWERCASE) {// 字母轉小寫 } else if (tag == IbookerEditorEnum.TOOLVIEW_TAG.IBTN_H1) {// 一級標題 } else if (tag == IbookerEditorEnum.TOOLVIEW_TAG.IBTN_H2) {// 二級標題 } else if (tag == IbookerEditorEnum.TOOLVIEW_TAG.IBTN_H3) {// 三級標題 } else if (tag == IbookerEditorEnum.TOOLVIEW_TAG.IBTN_H4) {// 四級標題 } else if (tag == IbookerEditorEnum.TOOLVIEW_TAG.IBTN_H5) {// 五級標題 } else if (tag == IbookerEditorEnum.TOOLVIEW_TAG.IBTN_H6) {// 六級標題 } else if (tag == IbookerEditorEnum.TOOLVIEW_TAG.IBTN_LINK) {// 超鏈接 } else if (tag == IbookerEditorEnum.TOOLVIEW_TAG.IBTN_QUOTE) {// 引用 } else if (tag == IbookerEditorEnum.TOOLVIEW_TAG.IBTN_CODE) {// 代碼 } else if (tag == IbookerEditorEnum.TOOLVIEW_TAG.IBTN_IMG_U) {// 圖片 } else if (tag == IbookerEditorEnum.TOOLVIEW_TAG.IBTN_OL) {// 數字列表 } else if (tag == IbookerEditorEnum.TOOLVIEW_TAG.IBTN_UL) {// 普通列表 } else if (tag == IbookerEditorEnum.TOOLVIEW_TAG.IBTN_UNSELECTED) {// 複選框未選中 } else if (tag == IbookerEditorEnum.TOOLVIEW_TAG.IBTN_SELECTED) {// 複選框選中 } else if (tag == IbookerEditorEnum.TOOLVIEW_TAG.IBTN_TABLE) {// 表格 } else if (tag == IbookerEditorEnum.TOOLVIEW_TAG.IBTN_HTML) {// HTML } else if (tag == IbookerEditorEnum.TOOLVIEW_TAG.IBTN_HR) {// 分割線 } else if (tag == IbookerEditorEnum.TOOLVIEW_TAG.IBTN_EMOJI) {// emoji表情 }}

其中IBTN_BOLD、IBTN_ITALIC等變數是由IbookerEditorEnum枚舉類提供。

Github地址

閱讀原文

http://weixin.qq.com/r/vC5pcbnEK_RUrf0S93uu (二維碼自動識別)