search

sendtion / XRichText

一个Android富文本类库，支持图文混排，支持编辑和预览，支持插入和删除图片。
1.76k stars 263 forks source link
android demo edittext html markdown richtext textview xrichtext

readme

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

生成数据

我把数据保存为了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.