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);
             }
         });
相关推荐
LabVIEW开发4 小时前
LabVIEW图标编辑器文字模糊现象
ui·编辑器·labview·labview知识·labview功能·labview程序
on_pluto_1 天前
【debug】vscode 和 codex 不兼容问题
ide·人工智能·vscode·编辑器
Web - Anonymous1 天前
Vue3 + Element Plus 集成 JSON Editor 实现实时校验 JSON 编辑器(高亮/暗亮主题/分栏回显/组件复用) - 附完整示例
vue.js·编辑器·json
迷路爸爸1802 天前
cursor资源管理器修改为与vscode一样的纵向布局
ide·vscode·编辑器
TO_ZRG2 天前
Unity 编辑器之 EditorTool、EditorToolBar、Overlay属性
编辑器
星羽XingYu2 天前
esp32 vscode clangd 无法索引库函数解决方案
ide·vscode·编辑器
北漂燕郊杨哥2 天前
DotMD:一款基于 Go + Wails 的轻量开源 Markdown 桌面编辑器
golang·开源·编辑器·markdown·md
末代iOS程序员华仔2 天前
Cursor 编辑器 + Figma‑MCP 服务器(真正让 Codex 直接读取 Figma 链接,高级方案)
服务器·编辑器·figma
平头某2 天前
DSH:Agent 的 VSCode 时刻?
ide·vscode·编辑器
Dontla2 天前
VSCode打开关闭控制台面板快捷键ctrl+`(terminal快捷键、vscode控制台快捷键)
ide·vscode·编辑器