移动端强大的富文本编辑器richeditor-android

代码地址如下:
http://www.demodashi.com/demo/14883.html

####一、运行效果图

####二、代码具体实现

1.引入richeditor-android
richeditor-android需要的jar:
implementation 'jp.wasabeef:richeditor-android:1.2.2'

这是一个Dialog框架,demo中不想自己去写,所以就使用了第三方
implementation 'com.afollestad.material-dialogs:core:0.9.6.0'
2.引入控件RichEditor
<jp.wasabeef.richeditor.RichEditor
        android:id="@+id/editor"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
3.使用到的权限

如果拍照需要相机权限,选择图片需要SD卡权限,插入网络图片需要网络权限

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.INTERNET" />
4.初始化RichEditor
mEditor = (RichEditor) findViewById(R.id.editor);

//初始化编辑高度
mEditor.setEditorHeight(200);
//初始化字体大小
mEditor.setEditorFontSize(22);
//初始化字体颜色
mEditor.setEditorFontColor(Color.BLACK);
//mEditor.setEditorBackgroundColor(Color.BLUE);

//初始化内边距
mEditor.setPadding(10, 10, 10, 10);
//设置编辑框背景,可以是网络图片
//mEditor.setBackground("https://raw.githubusercontent.com/wasabeef/art/master/chip.jpg");
// mEditor.setBackgroundColor(Color.BLUE);
mEditor.setBackgroundResource(R.drawable.bg);
//设置默认显示语句
mEditor.setPlaceholder("Insert text here...");
//设置编辑器是否可用
mEditor.setInputEnabled(true);
5.实时监听Editor输入内容
mPreview = (TextView) findViewById(R.id.preview);
        mEditor.setOnTextChangeListener(new RichEditor.OnTextChangeListener() {
   
            @Override
            public void onTextChange(String text) {
   
                mPreview.setText(text);
            }
        });
6.功能方法
     /**
         * 撤销当前标签状态下所有内容
         */
        findViewById(R.id.action_undo).setOnClickListener(new View.OnClickListener() {
   
            @Override
            public void onClick(View v) {
   
                mEditor.undo();
            }
        });
        /**
         * 恢复撤销的内容
         */
        findViewById(R.id.action_redo).setOnClickListener(new View.OnClickListener() {
   
            @Override
            public void onClick(View v) {
   
                mEditor.redo();
            }
        });
        /**
         * 加粗
         */
        findViewById(R.id.action_bold).setOnClickListener(new View.OnClickListener() {
   

            @Override
            public void onClick(View v) {
   
                mEditor.focusEditor();
                mEditor.setBold();
            }
        });
        /**
         * 斜体
         */
        findViewById(R.id.action_italic).setOnClickListener(new View.OnClickListener() {
   

            @Override
            public void onClick(View v) {
   
                mEditor.focusEditor();
                mEditor.setItalic();
            }
        });
        /**
         * 下角表
         */
        findViewById(R.id.action_subscript).setOnClickListener(new View.OnClickListener() {
   
            @Override
            public void onClick(View v) {
   
                mEditor.focusEditor();
                if (mEditor.getHtml() == null) {
   
                    
  • 1
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
h5移动端富文本编辑器是一种用于在移动设备上创建、编辑和排版富文本内容的工具。它通过简单而强大的用户界面,使用户能够以直观的方式对文本进行格式化和排版,同时支持插入图片、链接、表格和其他富媒体元素。 相比传统的文本编辑器,h5移动端富文本编辑器具有以下优点: 1. 响应式设计:移动设备的屏幕空间有限,h5移动端富文本编辑器能够根据屏幕大小动态调整布局和功能,以适应不同设备的需求。 2. 触摸友好:h5移动端富文本编辑器采用触摸屏操作,支持手指滑动、捏合和缩放等手势,使得编辑过程更加流畅自然。 3. 自动保存:编辑器可以自动保存用户的编辑内容,防止意外关闭或断网等情况下的数据丢失,提供更好的用户体验。 4. 多样化的样式和工具:编辑器提供丰富的文本样式和排版选项,如字体、颜色、加粗、斜体等,还支持插入图片、链接、表格等富媒体元素,使用户能够创建出更具表现力的文档。 5. 兼容性强:h5移动端富文本编辑器具有良好的兼容性,可以在主流的移动端浏览器中运行,不需要安装额外的插件或应用程序,方便用户在不同设备上进行编辑和调整。 综上所述,h5移动端富文本编辑器是一种功能强大、操作简便的工具,适用于移动设备上创建和编辑富文本内容,能够满足用户对于文本排版和富媒体元素插入的需求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值