由于公司产品需求原因，需要一个高度自定义的富文本编辑器。
原本想本着不重复造轮子的想法去网上找，但找到的要么就是功能强大的自由度却太低，要么自由度很高的代码稳定性却又很差，代码稳定的功能上又差了一点……最终没办法了，只能自己写一个。
我们需要的富文本编辑器可能会存在插入图片/视频/音频，甚至后期还有可能在文章中插入广告模块。所以用WebView调用js的方案就直接pass掉——虽然实现简单很多，但是呈现效果差，又没办法支持自定义View(主要用于支持广告模块)，所以后来就选择了用布局容器+View组合的思路来实现。
废话不多说，先上GitHub主页 RichEditor
build.gradle
dependencies {
implementation'com.github.dydytd3400:RichEditor:1.0.1'
}
下面是简单的使用示例
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初始化配置，均为可选。
//也可全部直接使用默认配置：mEditor.config().build();
mEditor.config()
.focusChangeListener(new View.OnFocusChangeListener() {
@Override
public void onFocusChange(View v, boolean hasFocus) {
//返回选定区域是否有指定样式
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());//展示最终转换的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();//将所选文本设置为粗体，若已经是粗体，则取消粗体效果
break;
case R.id.italic_btn:
mEditor.italic();//将所选文本设置为斜体，若已经是斜体，则取消斜体效果
break;
case R.id.underline_btn:
mEditor.underline();//将所选文本添加下划线，若已经有下划线，则取消下划线效果
break;
case R.id.strike_btn:
mEditor.strike();//将所选文本添加删除线，若已经有删除线，则取消删除线效果
break;
case R.id.img_btn:
//可以通过类似方法添加任意View，无论是否实现RichView或RichText接口均可添加。
//如果该View实现了RichView或者RichText接口，那么RichEditor则会通过调用对应接口实现来组装为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;
}
}
}
网友评论