Android端富文本編輯器（EditText+Span）開源+實例+詳解+細節

多格式文本編輯器html

WMRichTextEditorandroid

WMRichTextEditor是一款Android端文本編輯器，目前支持16種編排格式，適用於Android項目的筆記板塊的開發。git

開源地址github

https://github.com/widemouth-dz/wmrichtexteditormaven

添加依賴編輯器

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

ide

dependencies {
implementation 'com.github.widemouth-dz:wmrichtexteditor:2.0.4'
}

工具

Demo截圖url

支持文本格式spa

居左
居中
居右
引用
加粗
斜體
下劃線
刪除線
文字色
背景色
文字大小
圖文混排
數字序列
子彈頭序列
選中與未選中圖標
分割線（實、虛）

四大組件

文本顯示控件

Class：

WMEditText

實現方式：

繼承自AppCompatEditText

工具欄

Class：

WMToolContainer

實現方式：

基於HorizontalScrollView實現

工具類

Class：

WMToolAlignment
WMToolBackgroundColor
WMToolBold
WMToolCharacterStyle
WMToolImage
WMToolItalic
WMToolItem
WMToolListBullet
WMToolListClickToSwitch
WMToolListNumber
WMToolQuote
WMToolSplitLine
WMToolStrikethrough
WMToolTextColor
WMToolTextSize
WMToolUnderline

實現方式：

繼承實現WMToolItem抽象類

　　轉換類（儲存類）

Class：

WMHTML

實現方式：

基於原生HTML

開始使用

1.配置Activity

　　關閉Activity的硬件加速

<activity
            android:name=".MainActivity"
            android:hardwareAccelerated="false">
        </activity>

　　2.使用組件

　　　　方式一：使用封裝控件類WMTextEditor

類方法	說明
getEditText()	獲取編輯器的WMEditText
getToolContainer()	獲取編輯器的WMToolContainer
setMaxLines(int maxLines)	設置顯示最大行數
onActivityResult(Intent data)	處理圖庫選擇器的返回數據
setEditorType(int type)	設置WMTextEditor的類型 TYPE_NON_EDITABLE（不可編輯僅顯示）、TYPE_RICH（多格式編輯）
fromHtml(String html)	加載html文本
String getHtml()	獲取html文本

Demo

　　layout：

<?xml version="1.0" encoding="utf-8"?>
<com.widemouth.library.wmview.WMTextEditor xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/textEditor"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</com.widemouth.library.wmview.WMTextEditor>

　　Activity：

public class MainActivity extends AppCompatActivity {

    WMTextEditor textEditor;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_texteditor);

        textEditor = findViewById(R.id.textEditor);
    }

    @Override
    public void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if (requestCode == WMToolImage.ALBUM_CHOOSE && resultCode == RESULT_OK) {
            textEditor.onActivityResult(data);
        }
    }
}

方式二：自定義添加工具類

Demo

layout：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <com.widemouth.library.wmview.WMEditText
            android:id="@+id/WMEditText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </ScrollView>

    <com.widemouth.library.wmview.WMToolContainer
        android:id="@+id/WMToolContainer"
        android:layout_width="match_parent"
        android:layout_height="45dp" />
</LinearLayout>

Activity：

public class MainActivity extends AppCompatActivity {

    WMEditText editText;
    WMToolContainer toolContainer;

    private WMToolItem toolBold = new WMToolBold();
    private WMToolItem toolItalic = new WMToolItalic();
    private WMToolItem toolUnderline = new WMToolUnderline();
    private WMToolItem toolStrikethrough = new WMToolStrikethrough();
    private WMToolItem toolImage = new WMToolImage();
    private WMToolItem toolTextColor = new WMToolTextColor();
    private WMToolItem toolBackgroundColor = new WMToolBackgroundColor();
    private WMToolItem toolTextSize = new WMToolTextSize();
    private WMToolItem toolListNumber = new WMToolListNumber();
    private WMToolItem toolListBullet = new WMToolListBullet();
    private WMToolItem toolAlignment = new WMToolAlignment();
    private WMToolItem toolQuote = new WMToolQuote();
    private WMToolItem toolListClickToSwitch = new WMToolListClickToSwitch();
    private WMToolItem toolSplitLine = new WMToolSplitLine();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_texteditor);

        editText = findViewById(R.id.WMEditText);

        toolContainer = findViewById(R.id.WMToolContainer);

        toolContainer.addToolItem(toolImage);
        toolContainer.addToolItem(toolTextColor);
        toolContainer.addToolItem(toolBackgroundColor);
        toolContainer.addToolItem(toolTextSize);
        toolContainer.addToolItem(toolBold);
        toolContainer.addToolItem(toolItalic);
        toolContainer.addToolItem(toolUnderline);
        toolContainer.addToolItem(toolStrikethrough);
        toolContainer.addToolItem(toolListNumber);
        toolContainer.addToolItem(toolListBullet);
        toolContainer.addToolItem(toolAlignment);
        toolContainer.addToolItem(toolQuote);
        toolContainer.addToolItem(toolListClickToSwitch);
        toolContainer.addToolItem(toolSplitLine);

        editText.setupWithToolContainer(toolContainer);

    }

    @Override
    public void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if (requestCode == WMToolImage.ALBUM_CHOOSE && resultCode == RESULT_OK) {
            ((WMToolImage) toolImage).onActivityResult(data);
        }
    }
}