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