Android富文本编辑器:XRichText

作者: sendtion | 来源:发表于2016-11-04 09:30 被阅读7353次

XRichText

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

截图预览

笔记列表
新建笔记
笔记详情

使用方式
1、作为module导入

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

2、 gradle依赖

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

dependencies {
    compile 'com.github.sendtion:XRichText:1.0'
}

3、Maven方式

<repositories>
    <repository>
        <id>jitpack.io</id>
        <url>https://jitpack.io</url>
    </repository>
</repositories>

<dependency>
    <groupId>com.github.sendtion</groupId>
    <artifactId>XRichText</artifactId>
    <version>1.0</version>
</dependency>

具体使用

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

<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编辑器(不可编辑):

<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格式,生成字符串存储到了数据库。

生成数据:

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

2、gradle依赖稍后支持。感谢本库在前人的基础上进行修改,感谢各位大神的辛苦劳作!参考了以下项目:

其他

相关文章

网友评论

  • 韶华逝:大神你这个插入图片的功能,如果插入手机拍摄的图片 图片会自动转90°去展示的 这个是为什么?
  • 一根愤怒的黄瓜:请问这个怎么插入视频啊,我们需求要加入视频
    sendtion: @一根愤怒的黄瓜 没有实现插入视频,你可以插入按钮,点击按钮播放视频
  • 花果山来的猴子:private void showArticleView() {
    richTextView.post(new Runnable() {
    @Override
    public void run() {
    richTextView.clearAllLayout();
    showGraphicArticleView();
    }
    });
    }

    private void showGraphicArticleView() {
    // try {
    List<String> textList = StringUtils.cutStringByImgTag(articleEntry.data.detail.content);
    for (int i = 0; i < textList.size(); i++) {
    String text = textList.get(i);
    if (text.contains("<img") && text.contains("src=")) {
    String imagePath = StringUtils.getImgSrc(text);
    // if (new File(imagePath).exists())
    // subscriber.onNext(imagePath);
    // int width = ScreenUtils.getScreenWidth(this);
    // int height = ScreenUtils.getScreenHeight(this);
    // richTextView.measure(0, 0);
    // Bitmap bitmap = ImageUtils.getSmallBitmap(imagePath, width, height);
    // if (null != bitmap)
    richTextView.addImageViewAtIndex(richTextView.getLastIndex(), imagePath);
    // else
    // PrintUtil.toast(CoverGraphicArticleActivity.this, "图片" + 1 + "已丢失,请重新插入");
    } else
    // subscriber.onNext(text);
    richTextView.addTextViewAtIndex(richTextView.getLastIndex(), text);
    }
    // subscriber.onCompleted();
    // } catch (Exception e) {
    // e.printStackTrace();
    // subscriber.onError(e);
    // }
    }
  • 花果山来的猴子:et_new_content.addImageViewAtIndex(et_new_content.getLastIndex(), bitmap, imagePath)
    老哥,为什么我没找到这个三个参数的方法?
  • Mrwu_4fdc:楼主 我想问一下 为什么我选择的图片只能显示一半呢 就是RichTextEditor布局设置填充居然无效?看到麻烦请速回,谢谢
  • 352956c59158:image url地址后面加了" width="100%"这个属性吗
  • db895d39583b:怎么自定义格式啊,我想将文本用<p>标签包裹起来,到时候展示他读不出来文本啊
    sendtion:内容的保存不是html格式,使用img标签只是为了方便找到文本中的图片,如果你想使用p标签可以在生成数据的时候自行处理,当然显示的时候需要你自行实现解析html了
  • c20bd44387f5:老哥 这个怎么上传服务器 还有将第一张图片 拿出来 做贴图
    sendtion:@北城以北_a3c6 你可以自己定义数据保存形式,也可以用我写的,目前是文本+img标签用来区分文本和图片
    c20bd44387f5:@sendtion 老哥 富文本里面的内容 是转成html的形式上传么 ?
    sendtion:把图片上传服务器?在保存到本地的地方上传就好了

本文标题:Android富文本编辑器:XRichText

本文链接:https://www.haomeiwen.com/subject/uaiiuttx.html