• 欢迎访问风的记忆博客网站,如有疑问请加作者QQ或者微信联系。作者QQ:524100248,微信号:sendtion。

Android富文本编辑器,支持图文混排,支持插入和删除图片

安卓教程 sendtion 8年前 (2016-11-03) 9325次浏览 已收录 2个评论 扫描二维码

XRichText

一个Android富文本类库,支持编辑和预览,支持插入和删除图片。
GitHub 地址:https://github.com/sendtion/XRichText

截图预览

Android 富文本编辑器,支持图文混排,支持插入和删除图片

Android 富文本编辑器,支持图文混排,支持插入和删除图片

Android 富文本编辑器,支持图文混排,支持插入和删除图片

使用方式

1、作为类库
把 xrichtext 作为一个 module 导入你的工程。
或者
把 xrichtext 中的文件拷贝到你的工程,可以在你的工程中建一个 xrichtextming 包名,并把文件拷贝进去。

在 xml 布局中添加基于 EditText 编辑器(可编辑):


1
2
3
4
5
6
<com.sendtion.xrichtext.RichTextEditor
    android:id="@+id/et_new_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:textSize="@dimen/text_size_16"
    android:textColor="@color/grey_600"/>

在 xml 布局中添加基于 TextView 编辑器(不可编辑):


1
2
3
4
5
6
<com.sendtion.xrichtext.RichTextView
    android:id="@+id/tv_note_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:textSize="@dimen/text_size_16"
    android:textColor="@color/grey_600"/>

我把数据保存为了 html 格式,生成字符串存储到了数据库

生成数据:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
String noteContent = getEditData();

private String getEditData() {
    List<RichTextEditor.EditData> editList = et_new_content.buildEditData();
    StringBuffer content = new StringBuffer();
    for (RichTextEditor.EditData itemData : editList) {
        if (itemData.inputStr != null) {
            content.append(itemData.inputStr);
        } else if (itemData.imagePath != null) {
            content.append("<img src="").append(itemData.imagePath).append(""/>");
        }
    }
    return content.toString();
}

显示数据:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
et_new_content.post(new Runnable() {
     @Override
     public void run() {
         showEditData(content);
     }
 });

protected void showEditData(String content) {
    et_new_content.clearAllLayout();
    List<String> textList = StringUtils.cutStringByImgTag(content);
    for (int i = 0; i < textList.size(); i++) {
        String text = textList.get(i);
        if (text.contains("<img")) {
            String imagePath = StringUtils.getImgSrc(text);
            int width = ScreenUtils.getScreenWidth(this);
            int height = ScreenUtils.getScreenHeight(this);
            et_new_content.measure(0,0);
            Bitmap bitmap = ImageUtils.getSmallBitmap(imagePath, width, height);
            if (bitmap != null){
                et_new_content.addImageViewAtIndex(et_new_content.getLastIndex(), bitmap, imagePath);
            } else {
            et_new_content.addEditTextAtIndex(et_new_content.getLastIndex(), text);
            }
            et_new_content.addEditTextAtIndex(et_new_content.getLastIndex(), text);
        }
    }
}

2、gradle 依赖
稍后支持。

感谢
本库在前人的基础上进行修改,感谢各位大神的辛苦劳作!
参考了以下项目:
https://github.com/xmuSistone/android-animate-RichEditor
https://github.com/KDF5000/RichEditText

其他
– 个人博客:http://www.sendtion.cn
– CSDN:http://blog.csdn.net/shuyou612
– GitHub:https://github.com/sendtion
– 欢迎大家 fork、star,也欢迎大家参与修改。


风的记忆 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:Android 富文本编辑器,支持图文混排,支持插入和删除图片
喜欢 (9)
[sendtion@126.com]
分享 (0)
sendtion
关于作者:
一个不断奋斗追逐梦想的少年~
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. 楼主 我想问一下 为什么我选择的图片只能显示一半呢 就是RichTextEditor布局设置填充居然无效?看到麻烦请速回,谢谢
    自由有方向2017-09-22 09:55 回复 未知操作系统 | 未知浏览器
  2. 还没来得及看~不过楼主要是能补充下设计思路就更好了
    君莫笑2017-03-25 13:54 回复 未知操作系统 | 未知浏览器