RichEditor

基于原生EditText+span實現的Android富文本編輯器

github地址：https://github.com/yuruiyin/RichEditor

組件描述

該組件是基于原生EditText+span的方式實現的，旨在提供一個功能齊全且使用方便的Android富文本編輯器。主要支持了加粗斜體等行內樣式、標題引用等段內樣式以及插入圖片視頻甚至自定義View等。

功能演示

Video_20190521_122847_513.gif

功能列表

支持加粗、斜體、刪除線、下劃線行內樣式

支持插入標題、引用段內樣式

支持插入段落圖片、視頻

支持插入段落自定義布局

支持視頻、gif和長圖標記

支持圖片圓角

undo redo

[TODO] 支持行內ImageSpan，如類似微博@xxx，#話題名#

[TODO] 支持清除樣式

[TODO] 編輯器內部復制粘貼ImageSpan(任意以ImageSpan方式插入的的類型，如圖片、視頻、自定義view等)

如何使用

gradle

Step 1. Add the JitPack repository in your root build.gradle at the end of repositories:

allprojects {

repositories {

...

maven { url 'https://jitpack.io' }

}

}

Step 2. Add the dependency in your app build.gradle:

dependencies {

implementation 'com.github.yuruiyin:RichEditor:0.1.0'

}

參數定義

自定義屬性名字

參數定義

editor_show_video_mark

是否顯示視頻標識圖標

editor_video_mark_resource_id

視頻圖標資源id

editor_show_gif_mark

是否顯示gif標識圖標

editor_show_long_image_mark

是否顯示長圖標識

editor_image_radius

圖片和視頻圓角大小

editor_headline_text_size

標題字體大小

代碼演示

說明：各個樣式按鈕的layout由調用方自行完成

1) 首先在xml中引用RichEditText：

android:id="@+id/richEditText"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginTop="20dp"

android:background="#ffffff"

android:gravity="top|left"

android:hint="請輸入..."

android:inputType="textMultiLine"

android:lineSpacingExtra="5dp"

android:maxLength="20000"

android:minHeight="350dp"

android:paddingBottom="70dp"

android:paddingLeft="15dp"

android:paddingRight="15dp"

android:paddingTop="23dp"

android:textColor="#171717"

android:textColorHint="#aaaaaa"

android:textCursorDrawable="@null"

android:textSize="16dp"

app:editor_video_mark_resource_id="@mipmap/editor_video_mark_icon"

app:editor_image_radius="3dp"

app:editor_show_gif_mark="true"

app:editor_show_video_mark="true"

app:editor_show_long_image_mark="true"

/>

2) 針對加粗、斜體、標題等需要修改圖標樣式的按鈕(不包括插入圖片按鈕)，如加粗，處理如下：

// 加粗

richEditText.initStyleButton(

StyleBtnVm(

RichTypeEnum.BOLD,

ivBold,

R.mipmap.icon_bold_normal,

R.mipmap.icon_bold_light

)

)

說明：其中ivBold為加粗ImageView，由調用方在layout中定義；R.mipmap.icon_bold_normal和R.mipmap.icon_bold_light是加粗按鈕正常狀態和點亮狀態圖片的資源id。

3)插入圖片或視頻

/**

* 處理插入圖片

*/

private fun handleAddImage() {

val intent = Intent(Intent.ACTION_PICK, android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI)

startActivityForResult(intent, GET_PHOTO_REQUEST_CODE)

}

private fun doAddBlockImageSpan(

realImagePath: String, blockImageSpanObtainObject: IBlockImageSpanObtainObject, isFromDraft: Boolean = false

) {

// val blockImageSpanVm = BlockImageSpanVm(this, imageVm) // 不指定寬高，使用組件默認寬高

val blockImageSpanVm =

BlockImageSpanVm(blockImageSpanObtainObject, imageWidth, imageMaxHeight) // 指定寬高

blockImageSpanVm.isFromDraft = isFromDraft

richEditText.insertBlockImage(realImagePath, blockImageSpanVm) { blockImageSpan ->

val spanObtainObject = blockImageSpan.blockImageSpanVm.spanObject

when (spanObtainObject) {

is ImageVm -> {

Toast.makeText(this, "短按了圖片-當前圖片路徑：${spanObtainObject.path}", Toast.LENGTH_SHORT).show()

}

is VideoVm -> {

Toast.makeText(this, "短按了視頻-當前視頻路徑：${spanObtainObject.path}", Toast.LENGTH_SHORT).show()

}

}

}

}

override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {

super.onActivityResult(requestCode, resultCode, data)

if (requestCode == GET_PHOTO_REQUEST_CODE && resultCode == RESULT_OK && data != null) {

// 相冊圖片返回

val selectedImageUri = data.data ?: return

val realImagePath = FileUtil.getFileRealPath(this, selectedImageUri) ?: return

val fileType = FileUtil.getFileType(realImagePath) ?: return

when (fileType) {

FileTypeEnum.STATIC_IMAGE, FileTypeEnum.GIF -> {

val imageVm = ImageVm(realImagePath, "2")

doAddBlockImageSpan(realImagePath, imageVm)

}

FileTypeEnum.VIDEO -> {

// 插入視頻封面

val videoVm = VideoVm(realImagePath, "3")

doAddBlockImageSpan(realImagePath, videoVm)

}

}

}

}

4) 插入自定義布局

/**

* 插入游戲

*/

private fun handleAddGame() {

val gameVm = GameVm(1, "一起來捉妖")

doAddGame(gameVm)

}

private fun doAddGame(gameVm: GameVm, isFromDraft: Boolean = false) {

val gameItemView = layoutInflater.inflate(R.layout.editor_game_item, null)

val ivGameIcon = gameItemView.findViewById(R.id.ivGameIcon)

val tvGameName = gameItemView.findViewById(R.id.tvGameName)

ivGameIcon.setImageResource(R.mipmap.icon_game_zhuoyao)

tvGameName.text = gameVm.name

ivGameIcon.layoutParams.width = gameIconSize

ivGameIcon.layoutParams.height = gameIconSize

val gameItemWidth = getEditTextWidthWithoutPadding()

ViewUtil.layoutView(gameItemView, gameItemWidth, gameItemHeight)

val blockImageSpanVm = BlockImageSpanVm(gameVm, gameItemWidth, imageMaxHeight)

blockImageSpanVm.isFromDraft = isFromDraft

richEditText.insertBlockImage(ViewUtil.getBitmap(gameItemView), blockImageSpanVm) { blockImageSpan ->

val retGameVm = blockImageSpan.blockImageSpanVm.spanObject as GameVm

// 點擊游戲item

Toast.makeText(this, "短按了游戲：${retGameVm.name}", Toast.LENGTH_SHORT).show()

}

}

說明：插入自定義布局最終也是通過bitmap以ImageSpan的形式插入到編輯器中的。

5)獲取數據

// 返回的編輯器實體是一個list，list中每個元素代表一個段落block，具體block參數可以參考RichEditorBlock,

// 但是若需要保存草稿功能，則需要對該list進行轉換成自己的實體，否則List序列化后反序列化會丟失數據,可以參考demo

val conntent: List = richEditText.content

具體使用請參考demo

相關引用

最后

總結

以上是生活随笔為你收集整理的安卓文本编辑器php cpp,开源的Android富文本编辑器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。