【Android】 Book editor Android Kotlin version

Author: Zou Fengli, Weibo: Zrunker, email: [email protected], wechat official account: Shuke Creation, personal platform: www.ibooker.cc.

This article is selected from article 131 of shuke creation platform. Read the original text, bookworm editor Android Kotlin version – experience version download

Bookreader editor is an open source rich text editor based on Markdown markup language. It is popular among developers for its simple operation interface and powerful functions. As it’s official: the current version is not necessarily the best version, but the best open source version. Official address: editor.ibooker.cc

The following is a detailed explanation of the bookworm editor Android Kotlin version.

rendering

Before we go on, let’s take a look at the android version of bookreader:

First, introduce resources

There are many ways to introduce the Bookworm editor to Android Kotlin. Here are two ways:

Add the following code to the build.gradle file:

allprojects {
	repositories {
		maven { url 'https://jitpack.io'}}}Copy the code

dependencies {
	compile 'com. Making. Zrunker: IbookerEditorAndroidK: v1.0.1'
}
Copy the code

2. Add the following code to the Maven file:

<repositories>
	<repository>
		<id>jitpack.io</id>
		<url>https://jitpack.io</url>
	</repository>
</repositories>
Copy the code

<dependency> <groupId>com.github.zrunker</groupId> <artifactId>IbookerEditorAndroidK</artifactId> The < version > v1.0.1 < / version > < / dependency >Copy the code

Second, the use of

Bookguest editor Android version is simply to introduce resources, can be used directly. Because bookguest editor Android version not only provides a functional implementation, but also provides an interface. So in the process of using, even interface drawing is not needed.

Interface analysis

Bookreader Android interface is roughly divided into three parts, that is, the top of the editor, the content area (edit area + preview area) and the bottom (toolbar).

Add the bookshelf editor android control to the layout file. For example, if the layout file is activity_main.xml, add the following code to the file:

<? 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" />
Copy the code

Actually IbookerEditorView inherits the LinearLayout, so it has all the functionality of that LinearLayout.

Three, function introduction

As can be seen from the outline diagram, there are only three parts for the layout of android version of bookreader editor, so the function module of Android version of bookreader editor is divided into three parts for external use, that is, which layout module to modify is for which function module.

Top function module

Bookster editor Android version of the top is actually using IbookerEditorTopView control to present, so to achieve the top related control function first to obtain the control.

Top view of Bookshelf android edition, from left to right, corresponding to Back, Undo, Redo, Edit, Preview, Help, and About. You know what each button does, so you can modify or improve the implementation.

For example, to modify some properties of the back button, you can use the following code:

/ / set book guest editor at the top of the layout of the related properties ibookerEditorView. IbookerEditorTopView? .setBackImgVisibility(View.VISIBLE)? .setHelpIBtnVisibility(View.VISIBLE)Copy the code

You can also use IbookerEditorTopView to get related controls and then process them one by one:

ibookerEditorView.ibookerEditorTopView? .backImg? .visibility = View.VISIBLECopy the code

This is just using the back button as an example. Other buttons use the same rules as the back button.

Intermediate function module

Bookguest editor Android version of the middle area is divided into two parts, respectively, the edit part and the preview part, so to modify the relevant functions to obtain the relevant part of the control. The edit part is presented by IbookerEditorEditView control, and the preview part is presented by IbookerEditorPreView control.

For example, to modify the properties of the edit section, you can use the following code:

/ / set books among the guest editor layout related properties ibookerEditorView. IbookerEditorVpView? .editView? .setIbookerEdHint("Bookworm Editor")? .setIbookerBackgroundColor(Color.parseColor("#DDDDDD"))
Copy the code

The edit section does not have a single control, so you can also get related controls and then do things for specific controls:

ibookerEditorView.ibookerEditorVpView? .editView? .ibookerEd? .setText("Bookworm Editor")
Copy the code

/ / execution previews ibookerEditorView. IbookerEditorVpView? .preView? .ibookerHtmlCompile("Preview content")
Copy the code

Bottom function module

Bookreader Android edition, the bottom of the toolbar, presented by IbookerEditorToolView.

The toolbar provides more than 30 functions, one for each button. Each control is:

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;
Copy the code

So to modify the bottom properties, first get the IbookerEditorToolView control and then operate on it.

/ / set book guest editor department layout related properties ibookerEditorView. IbookerEditorToolView? .setEmojiIBtnVisibility(View.GONE)Copy the code

Of course, the bottom of a total of more than 30 controls, you can also directly obtain the relevant controls, and then the control for operation, such as:

ibookerEditorView.ibookerEditorToolView? .emojiIBtn? .visibility = View.GONECopy the code

Additional features: button click event monitoring

The button click event listening here is mainly for the top layout button and the bottom layout button.

The top part of the button click event listeners, and need to implement IbookerEditorTopView. OnTopClickListener interface, click on the button and each judged by corresponding to the Tag, specific code is as follows:

Override fun onTopClick(tag: Any) {override fun onTopClick(tag: Any) {if(tag = = IbookerEditorEnum. TOOLVIEW_TAG. IMG_BACK) {/ / return}else if(tag = = IbookerEditorEnum. TOOLVIEW_TAG. IBTN_UNDO) {/ / cancellation}else if(tag = = IbookerEditorEnum. TOOLVIEW_TAG. IBTN_REDO) {/ / redo}else if(tag = = IbookerEditorEnum. TOOLVIEW_TAG. IBTN_EDIT) {/ / edit}else if(tag = = IbookerEditorEnum. TOOLVIEW_TAG. IBTN_PREVIEW)} {/ / previewelse if(tag = = IbookerEditorEnum. TOOLVIEW_TAG. IBTN_HELP) {/ / help}else if(tag = = IbookerEditorEnum. TOOLVIEW_TAG. IBTN_ABOUT) {/ / about}}Copy the code

Variables such as IMG_BACK and IBTN_UNDO are provided by the IbookerEditorEnum enumeration class.

, click on the button at the bottom part event listeners need to implement IbookerEditorToolView. OnToolClickListener interface, click on the button and each judged by corresponding to the Tag, specific code is as follows:

Override fun onToolClick(tag: Any) {override fun onToolClick(tag: Any) {if(tag = = IbookerEditorEnum. TOOLVIEW_TAG. IBTN_BOLD) {/ / bold}else if(tag = = IbookerEditorEnum. TOOLVIEW_TAG. IBTN_ITALIC) {/ / italics}else if(tag = = IbookerEditorEnum. TOOLVIEW_TAG. IBTN_STRIKEOUT) {/ / delete line}else if(tag = = IbookerEditorEnum. TOOLVIEW_TAG. IBTN_UNDERLINE) {/ / underline}else if(tag = = IbookerEditorEnum. TOOLVIEW_TAG. IBTN_CAPITALS) capitalize the first letter} {/ / wordelse if(tag = = IbookerEditorEnum. TOOLVIEW_TAG. IBTN_UPPERCASE) {/ / letters capitalized}else if(tag = = IbookerEditorEnum. TOOLVIEW_TAG. IBTN_LOWERCASE) {/ / letters lowercase}else if(tag = = IbookerEditorEnum. TOOLVIEW_TAG. IBTN_H1) {/ / primary title}else if(tag = = IbookerEditorEnum. TOOLVIEW_TAG. IBTN_H2) {/ / secondary title}else if(tag = = IbookerEditorEnum. TOOLVIEW_TAG. IBTN_H3) {/ / level 3 title}else if(tag = = IbookerEditorEnum. TOOLVIEW_TAG. IBTN_H4) {/ / 4 title}else if(tag = = IbookerEditorEnum. TOOLVIEW_TAG. IBTN_H5) {/ / 5 title}else if(tag = = IbookerEditorEnum. TOOLVIEW_TAG. IBTN_H6) {/ / 6 title}else if(tag = = IbookerEditorEnum. TOOLVIEW_TAG. IBTN_LINK) {/ / hyperlinks}else if(tag = = IbookerEditorEnum. TOOLVIEW_TAG. IBTN_QUOTE)} {/ / referenceelse if(tag = = IbookerEditorEnum. TOOLVIEW_TAG. IBTN_CODE)} {/ / codeelse if(tag = = IbookerEditorEnum. TOOLVIEW_TAG. IBTN_IMG_U) {/ / picture}else if(tag = = IbookerEditorEnum. TOOLVIEW_TAG. IBTN_OL) {/ / number list}else if(tag = = IbookerEditorEnum. TOOLVIEW_TAG. IBTN_UL) {/ / ordinary list}else if(tag = = IbookerEditorEnum. TOOLVIEW_TAG. IBTN_UNSELECTED) {/ / check box is not selected}else if(tag = = IbookerEditorEnum. TOOLVIEW_TAG. IBTN_SELECTED) {/ / check box selected}else if(tag = = IbookerEditorEnum. TOOLVIEW_TAG. IBTN_TABLE)} {/ / formelse if (tag == IbookerEditorEnum.TOOLVIEW_TAG.IBTN_HTML) {// HTML
    } else if(tag = = IbookerEditorEnum. TOOLVIEW_TAG. IBTN_HR) {/ / line}else if(tag = = IbookerEditorEnum. TOOLVIEW_TAG. IBTN_EMOJI) {/ / emoji expression}}Copy the code

Variables such as IBTN_BOLD and IBTN_ITALIC are provided by the IbookerEditorEnum enumeration class.

Github address read the original article

---