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

多   格   式   文   本   編   輯   器

 

---

 

 

WMRichTextEditor

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

 

---

 

開源地址

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

 

---

 

添加依賴

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

 

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

 

---

 

Demo截圖

             

 

---

支持文本格式

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

 

---

 

四大組件

文本顯示控件

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);
        }
    }
}