android项目实战之编辑器集成

引言

项目需要用到编辑器,采用RichEditor,如下效果

实现

  1. 引入库2

    implementation 'jp.wasabeef:richeditor-android:2.0.0'

  2. XML


    复制代码
         <LinearLayout
             android:orientation="horizontal"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content">
    
             <ImageButton
                 android:id="@+id/action_undo"
                 android:layout_width="48dp"
                 android:layout_height="48dp"
                 android:background="@null"
                 android:contentDescription="@null"
                 android:src="@mipmap/undo" />
    
             <ImageButton
                 android:id="@+id/action_redo"
                 android:layout_width="48dp"
                 android:layout_height="48dp"
                 android:background="@null"
                 android:contentDescription="@null"
                 android:src="@mipmap/redo" />
    
             <ImageButton
                 android:id="@+id/action_bold"
                 android:layout_width="48dp"
                 android:layout_height="48dp"
                 android:background="@null"
                 android:contentDescription="@null"
                 android:src="@mipmap/bold" />
    
             <ImageButton
                 android:id="@+id/action_heading1"
                 android:layout_width="48dp"
                 android:layout_height="48dp"
                 android:background="@null"
                 android:contentDescription="@null"
                 android:src="@mipmap/h1" />
    
             <ImageButton
                 android:id="@+id/action_heading2"
                 android:layout_width="48dp"
                 android:layout_height="48dp"
                 android:background="@null"
                 android:contentDescription="@null"
                 android:src="@mipmap/h2" />
    
             <ImageButton
                 android:id="@+id/action_heading3"
                 android:layout_width="48dp"
                 android:layout_height="48dp"
                 android:background="@null"
                 android:contentDescription="@null"
                 android:src="@mipmap/h3" />
    
             <ImageButton
                 android:id="@+id/action_heading4"
                 android:layout_width="48dp"
                 android:layout_height="48dp"
                 android:background="@null"
                 android:contentDescription="@null"
                 android:src="@mipmap/h4" />
    
             <ImageButton
                 android:id="@+id/action_heading5"
                 android:layout_width="48dp"
                 android:layout_height="48dp"
                 android:background="@null"
                 android:contentDescription="@null"
                 android:src="@mipmap/h5" />
    
             <ImageButton
                 android:id="@+id/action_heading6"
                 android:layout_width="48dp"
                 android:layout_height="48dp"
                 android:background="@null"
                 android:contentDescription="@null"
                 android:src="@mipmap/h6" />
    
             <ImageButton
                 android:id="@+id/action_insert_image"
                 android:layout_width="48dp"
                 android:layout_height="48dp"
                 android:background="@null"
                 android:contentDescription="@null"
                 android:src="@mipmap/insert_image" />
    
    
         </LinearLayout>
    
     </HorizontalScrollView>
     <androidx.core.widget.NestedScrollView
         android:layout_width="match_parent"
         android:layout_height="wrap_content">
         <jp.wasabeef.richeditor.RichEditor
             android:id="@+id/editor"
             android:layout_width="match_parent"
             android:layout_height="wrap_content" />
     </androidx.core.widget.NestedScrollView>
    
     <TextView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_marginTop="20dp"
         android:text="详情预览"
         android:visibility="gone"
         android:textSize="12sp" />
    
     <TextView
         android:id="@+id/preview"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_marginTop="15dp"
         android:visibility="gone"/>
  3. fragement片段初始化

    private void initEditor(){
    mPreview = (TextView) mActivity.findViewById(R.id.preview);
    mEditor = (RichEditor) mActivity.findViewById(R.id.editor);
    //初始化编辑高度
    mEditor.setEditorHeight(200);
    //初始化字体大小
    mEditor.setEditorFontSize(16);
    //初始化字体颜色
    mEditor.setEditorFontColor(Color.BLACK);
    //初始化内边距
    mEditor.setPadding(10, 10, 10, 10);
    //设置默认显示语句
    mEditor.setPlaceholder("请输入...");
    //设置编辑器是否可用
    mEditor.setInputEnabled(true);

    复制代码
         //mPreview = (TextView) mActivity.findViewById(R.id.preview);
    
         mEditor.setOnTextChangeListener(new RichEditor.OnTextChangeListener() {
             @Override
             public void onTextChange(String text) {
                 mPreview.setText(text);
             }
         });
    
         mActivity.findViewById(R.id.action_undo).setOnClickListener(new View.OnClickListener() {
             @Override
             public void onClick(View v) {
                 mEditor.undo();
             }
         });
    
         mActivity.findViewById(R.id.action_redo).setOnClickListener(new View.OnClickListener() {
             @Override
             public void onClick(View v) {
                 mEditor.redo();
             }
         });
    
         mActivity.findViewById(R.id.action_heading1).setOnClickListener(new View.OnClickListener() {
             @Override
             public void onClick(View v) {
                 mEditor.setHeading(1);
             }
         });
    
         mActivity.findViewById(R.id.action_heading2).setOnClickListener(new View.OnClickListener() {
             @Override
             public void onClick(View v) {
                 mEditor.setHeading(2);
             }
         });
    
         mActivity.findViewById(R.id.action_heading3).setOnClickListener(new View.OnClickListener() {
             @Override
             public void onClick(View v) {
                 mEditor.setHeading(3);
             }
         });
    
         mActivity.findViewById(R.id.action_heading4).setOnClickListener(new View.OnClickListener() {
             @Override
             public void onClick(View v) {
                 mEditor.setHeading(4);
             }
         });
    
         mActivity.findViewById(R.id.action_heading5).setOnClickListener(new View.OnClickListener() {
             @Override
             public void onClick(View v) {
                 mEditor.setHeading(5);
             }
         });
    
         mActivity.findViewById(R.id.action_heading6).setOnClickListener(new View.OnClickListener() {
             @Override
             public void onClick(View v) {
                 mEditor.setHeading(6);
             }
         });
相关推荐
OliverH-yishuihan2 小时前
【保姆级教程】Win11 下从零部署 Claude Code:本地环境配置 + VSCode 可视化界面全流程指南
ide·vscode·编辑器
TakeForge2 小时前
17天跑通交通行业SVG编辑器
编辑器
键盘飞行员3 小时前
macOS Trae 解决 Codex 插件不显示问题(官方适配版)
macos·编辑器·ai编程
Cloud_Shy6183 小时前
解读《Effective Python 3rd Edition》:从练气到老魔(第二章 Item 10 - 12)
c语言·开发语言·网络·人工智能·windows·python·编辑器
木古古1816 小时前
搞一个高效的c/c++开发环境,工具VIm+自研vim插件+Shell脚本
linux·编辑器·vim
knighthood200117 小时前
vscode插件开发的一些过程
ide·vscode·编辑器
小炉子的修炼手册1 天前
【配置Agent】VScode+claude code+codex+deepseek
ide·vscode·编辑器
knighthood20011 天前
vscode扩展中vscode版本号该如何填写?
ide·vscode·编辑器
互联网散修1 天前
鸿蒙实战:图片编辑器——高性能纹理马赛克画笔
华为·编辑器·harmonyos·纹理马赛克
wbc103155582 天前
基于 VSCode + Icarus 的 Verilog 编译和仿真
ide·vscode·编辑器