Home

Awesome

XRichText

一个Android富文本类库，支持图文混排，支持编辑和预览，支持插入和删除图片。

实现的原理：

注意事项

截图预览

笔记列表 文字笔记详情 编辑笔记 图片笔记详情

使用方式

1. 作为module导入

把xrichtext作为一个module导入你的工程。

2. gradle依赖

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

dependencies {
    implementation 'com.github.sendtion:XRichText:1.9.4'
}

如果出现support版本不一致问题，请排除XRichText中的support库，或者升级自己的support库为28.0.0版本。 使用方式：

implementation ('com.github.sendtion:XRichText:1.9.4') {
    exclude group: 'com.android.support'
}

具体使用

在xml布局中添加基于EditText编辑器（可编辑）

<com.sendtion.xrichtext.RichTextEditor
    android:id="@+id/et_new_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:rt_editor_text_line_space="6dp"
    app:rt_editor_image_height="500"
    app:rt_editor_image_bottom="10"
    app:rt_editor_text_init_hint="在这里输入内容"
    app:rt_editor_text_size="16sp"
    app:rt_editor_text_color="@color/grey_900"/>

在xml布局中添加基于TextView编辑器（不可编辑）

<com.sendtion.xrichtext.RichTextView
    android:id="@+id/tv_note_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:rt_view_text_line_space="6dp"
    app:rt_view_image_height="0"
    app:rt_view_image_bottom="10"
    app:rt_view_text_size="16sp"
    app:rt_view_text_color="@color/grey_900"/>

自定义属性

具体参考Demo

rt_view_image_height        图片高度，默认为0自适应，可以设置为固定数值，如500、800等
rt_view_image_bottom        上下两张图片的间隔，默认10
rt_view_text_size           文字大小，使用sp单位，如16sp
rt_view_text_color          文字颜色，使用color资源文件
rt_view_text_line_space     字体行距，跟TextView使用一样，比如6dp

rt_editor_image_height      图片高度，默认为500，可以设置为固定数值，如500、800等，0为自适应高度
rt_editor_image_bottom      上下两张图片的间隔，默认10
rt_editor_text_init_hint    默认提示文字，默认为“请输入内容”
rt_editor_text_size         文字大小，使用sp单位，如16sp
rt_editor_text_color        文字颜色，使用color资源文件
rt_editor_text_line_space   字体行距，跟TextView使用一样，比如6dp

生成数据

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

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();
}

显示数据

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);
        }
    }
}

图片点击事件

tv_note_content.setOnRtImageClickListener(new RichTextView.OnRtImageClickListener() {
    @Override
    public void onRtImageClick(String imagePath) {
        ArrayList<String> imageList = StringUtils.getTextFromHtml(myContent, true);
        int currentPosition = imageList.indexOf(imagePath);
        showToast("点击图片："+currentPosition+"："+imagePath);
        // TODO 点击图片预览
    }
});

图片加载器使用

请在Application中设置，经测试在首页初始化会出现问题。Demo仅供参考，具体实现根据您使用的图片加载器而变化。

XRichText.getInstance().setImageLoader(new IImageLoader() {
    @Override
    public void loadImage(String imagePath, ImageView imageView, int imageHeight) {
       //如果是网络图片
       if (imagePath.startsWith("http://") || imagePath.startsWith("https://")){
           Glide.with(getApplicationContext()).asBitmap().load(imagePath).dontAnimate()
                   .into(new SimpleTarget<Bitmap>() {
                       @Override
                       public void onResourceReady(@NonNull Bitmap resource, @Nullable Transition<? super Bitmap> transition) {
                           if (imageHeight > 0) {//固定高度
                               RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(
                                       FrameLayout.LayoutParams.MATCH_PARENT, imageHeight);//固定图片高度，记得设置裁剪剧中
                               lp.bottomMargin = 10;//图片的底边距
                               imageView.setLayoutParams(lp);
                               Glide.with(getApplicationContext()).asBitmap().load(imagePath).centerCrop()
                                       .placeholder(R.mipmap.img_load_fail).error(R.mipmap.img_load_fail).into(imageView);
                           } else {//自适应高度
                               Glide.with(getApplicationContext()).asBitmap().load(imagePath)
                                       .placeholder(R.mipmap.img_load_fail).error(R.mipmap.img_load_fail).into(new TransformationScale(imageView));
                           }
                       }
                   });
       } else { //如果是本地图片
           if (imageHeight > 0) {//固定高度
               RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(
                       FrameLayout.LayoutParams.MATCH_PARENT, imageHeight);//固定图片高度，记得设置裁剪剧中
               lp.bottomMargin = 10;//图片的底边距
               imageView.setLayoutParams(lp);

               Glide.with(getApplicationContext()).asBitmap().load(imagePath).centerCrop()
                       .placeholder(R.mipmap.img_load_fail).error(R.mipmap.img_load_fail).into(imageView);
           } else {//自适应高度
               Glide.with(getApplicationContext()).asBitmap().load(imagePath)
                       .placeholder(R.mipmap.img_load_fail).error(R.mipmap.img_load_fail).into(new TransformationScale(imageView));
           }
       }
    }
});

TransformationScale类请参考Demo

具体的使用方式，请参考Demo代码。

更新历史

v1.9.4 2019.11.05

v1.9.3 2019.10.19

v1.9.1 2019.04.30

v1.9.0 2019.04.10

v1.8 2018.12.02

v1.6 2018.11.16

v1.5 2018.07.10

v1.4 2018.06.22

v1.3 2018.05.05

v1.2 2018.04.05

v1.1 2017.03.27

v1.0 2016.10.26

感谢

本库参考了以下项目，感谢各位大神的优秀作品！

其他

License

Copyright 2019 sendtion

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.