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

吾非言發表於2018-02-28

作者:鄒峰立,微博:zrunker,郵箱:zrunker@yahoo.com,微信公眾號:書客創作,個人平臺:www.ibooker.cc

本文選自書客創作平臺第131篇文章。閱讀原文書客編輯器安卓Kotlin版 - 體驗版下載

書客創作

書客編輯器是一款基於Markdown標記語言的開源的富文字編輯器,它以簡易的操作介面和強大的功能深受廣大開發者的喜愛。正如官方所說:現在的版本不一定是最好的版本,卻是最好的開源版本。官方地址: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地址 閱讀原文


微信公眾號:書客創作

相關文章