# XRichText

**Repository Path**: chinasoft4_ohos/XRichText

## Basic Information

- **Project Name**: XRichText
- **Description**: 富文本类库，支持图文混排，支持编辑和预览，支持插入和删除图片。
- **Primary Language**: Java
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 3
- **Created**: 2021-06-28
- **Last Updated**: 2024-05-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# XRichText

#### 项目介绍
- 项目名称：XRichText
- 所属系列：openharmony的第三方组件适配移植
- 功能：富文本类库，支持图文混排，支持编辑和预览，支持插入和删除图片
- 项目移植状态：分享功能暂时不支持无法使用
- 调用差异：无
- 开发版本：sdk6，DevEco Studio 2.2 Beta1
- 基线版本：Releases v1.9.4

#### 效果演示
![效果演示](https://images.gitee.com/uploads/images/2021/0723/144623_4d19f641_7918188.gif "111.gif")

#### 安装教程
                                
1.在项目根目录下的build.gradle文件中，
 ```gradle
allprojects {
    repositories {
        maven {
            url 'https://s01.oss.sonatype.org/content/repositories/releases/'
        }
    }
}
 ```
2.在entry模块的build.gradle文件中，
 ```gradle
 dependencies {
    implementation('com.gitee.chinasoft_ohos:XRichText:1.0.0')
    ......  
 }
 ```

在sdk6，DevEco Studio 2.2 Beta1下项目可直接运行
如无法运行，删除项目.gradle,.idea,build,gradle,build.gradle文件，
并依据自己的版本创建新项目，将新项目的对应文件复制到根目录下

#### 使用说明
在xml布局中添加基于EditText编辑器（可编辑）
```
<com.sendtion.xrichtext.RichTextEditor
        ohos:id="$+id:et_new_content"
        ohos:height="match_parent"
        ohos:width="match_parent"
        app:rt_editor_text_line_space="6vp"
        app:rt_editor_image_height="500"
        app:rt_editor_image_bottom="10"
        app:rt_editor_text_init_hint="在这里输入内容"
        app:rt_editor_text_size="16fp"
        app:rt_editor_text_color="#212121"/>
```

在xml布局中添加基于TextView编辑器（不可编辑）
```
<com.sendtion.xrichtext.RichTextView
        ohos:id="$+id:et_new_content"
        ohos:height="match_parent"
        ohos:width="match_parent"
        app:rt_editor_text_line_space="6vp"
        app:rt_editor_image_height="500"
        app:rt_editor_image_bottom="10"
        app:rt_editor_text_init_hint=""
        app:rt_editor_text_size="16fp"
        app:rt_editor_text_color="#212121"/>
```
 生成数据

**保存为了html格式**

```
String noteContent = getEditData();

private String getEditData() {
        StringBuilder content = new StringBuilder();
        try {
            List<RichTextEditor.EditData> editList = et_new_content.buildEditData();
            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("\"/>");
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return content.toString();
    }
```
显示数据

```
 protected void showEditData(ObservableEmitter<String> emitter, String html) {
        try{
            List<String> textList = StringUtils.cutStringByImgTag(html);
            for (int i = 0; i < textList.size(); i++) {
                String text = textList.get(i);
                emitter.onNext(text);
            }
            emitter.onComplete();
        }catch (Exception e){
            e.printStackTrace();
            emitter.onError(e);
        }
    }
```
图片点击事件

```
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);
                new ToastDialog(NoteAbilitySlice.this).setContentText("点击图片" + currentPosition + ": " + imagePath).show();
                dataList = new ArrayList<>();
                for (int i = 0; i < imageList.size(); i++) {
                    dataList.add(getUriFromPath(imageList.get(i)));
                }
                // TODO 点击图片预览
                DialogUtil.show(getContext(), dataList, currentPosition);
            }
        });
```
图片加载器使用

请在MyApplication中设置，经测试在首页初始化会出现问题。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));
           }
       }
    }
});
```

自定义属性
**RichTextView**
```
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
```

**RichTextEditor**
```
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
```



#### 测试信息

CodeCheck代码测试无异常

CloudTest代码测试无异常

病毒安全检测通过

当前版本demo功能与原组件基本无差异


#### 版本迭代

1.0.0

#### 版权和许可信息
```
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.
```