由于公司產(chǎn)品需求原因，需要一個(gè)高度自定義的富文本編輯器。
原本想本著不重復(fù)造輪子的想法去網(wǎng)上找，但找到的要么就是功能強(qiáng)大的自由度卻太低，要么自由度很高的代碼穩(wěn)定性卻又很差，代碼穩(wěn)定的功能上又差了一點(diǎn)……最終沒(méi)辦法了，只能自己寫一個(gè)。
我們需要的富文本編輯器可能會(huì)存在插入圖片/視頻/音頻，甚至后期還有可能在文章中插入廣告模塊。所以用WebView調(diào)用js的方案就直接pass掉——雖然實(shí)現(xiàn)簡(jiǎn)單很多，但是呈現(xiàn)效果差，又沒(méi)辦法支持自定義View(主要用于支持廣告模塊)，所以后來(lái)就選擇了用布局容器+View組合的思路來(lái)實(shí)現(xiàn)。
廢話不多說(shuō)，先上GitHub主頁(yè) RichEditor
build.gradle
dependencies {
implementation'com.github.dydytd3400:RichEditor:1.0.1'
}
下面是簡(jiǎn)單的使用示例
Simple example:
main_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.constraint.ConstraintLayout
android:id="@+id/relativeLayout"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="@+id/guideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_weight="1">
<LinearLayout
android:id="@+id/button_bar"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center_vertical"
android:orientation="horizontal"
app:layout_constraintBottom_toTopOf="@+id/editor"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0">
<TextView
android:id="@+id/bold_btn"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_margin="4dp"
android:background="#a6f6a6"
android:gravity="center"
android:text="B" />
<TextView
android:id="@+id/italic_btn"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_margin="4dp"
android:background="#a6f6a6"
android:gravity="center"
android:text="i" />
<TextView
android:id="@+id/underline_btn"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_margin="4dp"
android:background="#a6f6a6"
android:gravity="center"
android:text="U" />
<TextView
android:id="@+id/strike_btn"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_margin="4dp"
android:background="#a6f6a6"
android:gravity="center"
android:text="S" />
<TextView
android:id="@+id/img_btn"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_margin="4dp"
android:background="#a6f6a6"
android:gravity="center"
android:text="img" />
<TextView
android:id="@+id/video_btn"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_margin="4dp"
android:background="#a6f6a6"
android:gravity="center"
android:text="video" />
<TextView
android:id="@+id/audio_btn"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_margin="4dp"
android:background="#a6f6a6"
android:gravity="center"
android:text="audio" />
</LinearLayout>
<android.support.constraint.Guideline
android:id="@+id/line"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.2" />
<com.echoleaf.richeditor.RichEditor
android:id="@+id/editor"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/line" />
</android.support.constraint.ConstraintLayout>
<TextView
android:id="@+id/html_text"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#eeeeee"
android:text="dfsdfsdfsdfsdf"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/guideline"
app:layout_constraintVertical_bias="1.0"
app:layout_constraintVertical_weight="1" />
<android.support.constraint.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
</android.support.constraint.ConstraintLayout>
MainActivity.class
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
RichEditor mEditor;
TextView mHtmlText;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ViewGroup buttonGroup = findViewById(R.id.button_bar);
mHtmlText = findViewById(R.id.html_text);
mEditor = findViewById(R.id.editor);
int childCount = buttonGroup.getChildCount();
for (int i = 0; i < childCount; i++) {
buttonGroup.getChildAt(i).setOnClickListener(this);
}
//RichEditor初始化配置，均為可選。
//也可全部直接使用默認(rèn)配置：mEditor.config().build();
mEditor.config()
.focusChangeListener(new View.OnFocusChangeListener() {
@Override
public void onFocusChange(View v, boolean hasFocus) {
//返回選定區(qū)域是否有指定樣式
findViewById(R.id.bold_btn).setBackgroundColor(mEditor.isBold() ? Color.RED : Color.GREEN);
findViewById(R.id.italic_btn).setBackgroundColor(mEditor.isItalic() ? Color.RED : Color.GREEN);
findViewById(R.id.underline_btn).setBackgroundColor(mEditor.isUnderline() ? Color.RED : Color.GREEN);
findViewById(R.id.strike_btn).setBackgroundColor(mEditor.isStrike() ? Color.RED : Color.GREEN);
}
})
.contentChangeListener(new OnContentChangeListener() {
@Override
public void onContentChanged(RichView view, boolean removed) {
mHtmlText.setText(mEditor.toHtml());//展示最終轉(zhuǎn)換的html文本
}
})
.pieceChangeListener(new SimplePieceChangeListener())
.selectionActionMenu(new SelectionActionMenuCreator() {
@Override
public ActionMode.Callback create(Context context, EditText editText) {
return new SimpleSelectionActionMenu(context, editText);
}
@Override
protected ActionMode.Callback2 create2(Context context, EditText editText) {
return new SimpleSelectionActionMenu(context, editText);
}
})
.defaultSize(12)
.defaultColor(Color.BLUE)
.build();
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.bold_btn:
mEditor.bold();//將所選文本設(shè)置為粗體，若已經(jīng)是粗體，則取消粗體效果
break;
case R.id.italic_btn:
mEditor.italic();//將所選文本設(shè)置為斜體，若已經(jīng)是斜體，則取消斜體效果
break;
case R.id.underline_btn:
mEditor.underline();//將所選文本添加下劃線，若已經(jīng)有下劃線，則取消下劃線效果
break;
case R.id.strike_btn:
mEditor.strike();//將所選文本添加刪除線，若已經(jīng)有刪除線，則取消刪除線效果
break;
case R.id.img_btn:
//可以通過(guò)類似方法添加任意View，無(wú)論是否實(shí)現(xiàn)RichView或RichText接口均可添加。
//如果該View實(shí)現(xiàn)了RichView或者RichText接口，那么RichEditor則會(huì)通過(guò)調(diào)用對(duì)應(yīng)接口實(shí)現(xiàn)來(lái)組裝為text文本或html文本
ImageView image = new ImageView(this);
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
image.setLayoutParams(layoutParams);
image.setImageResource(R.mipmap.simple_image);
mEditor.insert(image);
break;
case R.id.video_btn:
mEditor.setTextSize(15);
break;
case R.id.audio_btn:
mEditor.setTextColor(Color.RED);
break;
}
}
}
