Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Android富文本编辑器

Android富文本编辑器

作者头像
全栈程序员站长
发布于 2022-06-27 01:17:20
发布于 2022-06-27 01:17:20
2.9K00
代码可运行
举报
运行总次数:0
代码可运行

大家好,又见面了,我是你们的朋友全栈君。

Android富文本编辑器,一款支持撤销、加粗、斜体、下划线、有序无序列表、对齐、改文字大小、改文字颜色、插入图片、插入视频等功能,并且可设置cookie,自定义素材操作菜单的的编辑器。

github地址:https://github.com/yeaper/RichEditor

1.控件使用

RichEditor是富文本编辑器,EditorOpMenuView是操作栏控件,两个需要配合使用,xml引用方式如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<com.yyp.editor.RichEditor android:id="@+id/editor" android:layout_width="match_parent" android:layout_height="wrap_content"/>

<com.yyp.editor.widget.EditorOpMenuView android:id="@+id/editor_op_menu_view" android:layout_width="match_parent" android:layout_height="wrap_content"/>

两个控件最后需要绑定

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
mEditorOpMenuView.setRichEditor(mEditor);

2.编辑器相关设置

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//设置占位文字
mEditor.setPlaceholder("请填写文章正文内容(必填)");
//设置编辑器文字大小
mEditor.setEditorFontSize(16);
//设置编辑器内边距
mEditor.setPadding(10, 10, 10, 10);
//设置编辑器背景色
mEditor.setBackgroundColor(UIUtils.getResources().getColor(R.color._ffffff));
//禁止编辑 包括长按复制、双击选中、点击
mEditor.disableEdit();
//配置同一界面的焦点切换,可传多个输入框控件
mEditor.hideWhenViewFocused((editText1, editText2, editText3, ...);

3.编辑器操作

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//撤销
mEditor.undo();
//反撤销
mEditor.redo();
//加粗
mEditor.setBold();
//斜体
mEditor.setItalic();
//删除线
mEditor.setStrikeThrough();
//下划线
mEditor.setUnderline();
//设置文字颜色 传int色值
mEditor.setTextColor(color);
//设置文字大小 支持1-7字号
mEditor.setFontSize(size);
//左对齐
mEditor.setAlignLeft();
//居中对齐
mEditor.setAlignCenter();
//右对齐
mEditor.setAlignRight();
//两端对齐
mEditor.setAlignFull();
//有序列表
mEditor.setNumbers();
//无序列表
mEditor.setBullets();
//清除所有格式
mEditor.removeFormat();

//插入图片
mEditor.insertImage("图片地址", "提示文字");
//插入视频
mEditor.insertVideoFrame("视频封面地址", videoId, "视频名字", size);
//插入文本
mEditor.insertHtml("文本内容");

4.监听接口使用

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//编辑器焦点监听
mEditor.setOnEditorFocusListener(new OnEditorFocusListener() { 
   
    @Override
    public void onEditorFocus(boolean isFocus) { 
   
        mEditorOpMenuView.displayMaterialsMenuView(false); //编辑器重获焦点,素材菜单要隐藏
        mEditorOpMenuView.setVisibility(isFocus ? View.VISIBLE : View.GONE);
    }
});
//编辑器文本输入回调
mEditor.setOnTextChangeListener(new OnTextChangeListener() { 
   
    @Override
    public void onTextChange(String text) { 
   
        text.length();
    }
});
//监听素材菜单点击事件
mEditorOpMenuView.setOnMaterialsItemClickListener(new OnMaterialsItemClickListener() { 
   

    @Override
    public void onMaterialsItemClick(MaterialsMenuBean bean) { 
   
        switch (bean.getId()){ 
   
            case MATERIALS_IMAGE: //从素材图片库选择
                break;
            case MATERIALS_VIDEO: //从素材视频库选择
                break;
            case MATERIALS_TXT: //从素材文字库选择
                break;
            case LOCAL_IMAGE: //从本地图片库选择
                break;
            case LOCAL_VIDEO: //从本地视频库选择
                break;
        }
    }
});

5.遇到的问题与解决方案

问题: 编辑器展示的图片访问不了,需要传cookie验证

解决方案: 先前试过在WebViewClient的shouldInterceptRequest方法中,针对url设置cookie,但是cookie同步不及时,导致部分图片无法加载,后来考虑在加载图片前,先设置cookie,那么得出解决方案,先清除原来的cookie,然后为图片的ip地址设置新cookie,就可以访问了,这个方法在Webview.loadUrl()方法前调用即可。(注:android5.0以上记得打开cookie开关)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 //打开cookie
android.webkit.CookieManager cookieManager = android.webkit.CookieManager.getInstance();
cookieManager.setAcceptCookie(true);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { 
   
    cookieManager.setAcceptThirdPartyCookies(this, true);
}

private void addCookies(String url) { 
   
    CookieManager cookieManager = CookieManager.getInstance();
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { 
   
        cookieManager.removeSessionCookies(null);
        PersistentCookieStore cookieStore = new PersistentCookieStore(UIUtils.getContext());
        for (Cookie cookie : cookieStore.getCookies()) { 
    //添加cookie
            cookieManager.setCookie(url, String.format("%s=%s", cookie.name(), cookie.value()));
        }
        cookieManager.flush();
    }
}

问题: 为了方便编辑,图片、视频之间需要保持间距

解决方案: css样式文件中,设置margin边距即可

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/* 图片和视频:宽度占满,高度自适应,下边距3px */
IMAGE,img,video { 
   
    width: 100% !important;
    height: auto;
    margin: 0px 0px 3px 0px !important;
}

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/133488.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年6月8,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
记一次使用 android 自带 WebView 做富文本编辑器之API、机型的兼容及各种奇葩bug的解决
转载请声明出处(https://cloud.tencent.com/developer/user/1148436/activities) 目录 1,测试设备介绍 2,开源项目richeditor及Cr
林冠宏-指尖下的幽灵
2018/01/03
2.7K0
【HarmonyOS】富文本编辑器RichEditor详解
在信息化高速发展的今天,普通的文本容器,已经不能够承载用户丰富的表达欲。富文本展示已经是移动开发中,必备要解决的问题,在鸿蒙中,通过在系统层提供RichEditor控件,来解决富文本展示的问题。
GeorgeGcs
2025/07/07
2420
【HarmonyOS】富文本编辑器RichEditor详解
vue富文本编辑器tinymce_vue移动端富文本编辑器
前言:vue中很多项目都需要用到富文本编辑器,在使用了ueditor和tinymce后,发现并不理想。所以果断使用vue-quill-editor来实现。
全栈程序员站长
2022/11/04
3.9K0
富文本编辑器开发简介
富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器。
江米小枣
2020/06/15
5K0
vue中使用富文本编辑器(wangeditor)
<template> <div class="subcontainer"> <!-- de --> <div class="editor" id="editor" ref="editor"></div> <div class="a-btn"> <a href="javascript:void(0)">提交</a> </div> </div> </template> <script> import pcSet from "@/components/p
用户4344670
2020/04/02
8990
vue 富文本编辑框_基于vue的富文本编辑器
npm i wangeditor –save 插件官网地址:https://www.wangeditor.com/
全栈程序员站长
2022/11/08
1.4K0
vue富文本编辑器插件推荐_elementui富文本编辑器
2)在node_modules里面找到tinymce,将skins目录复制到public/tinymce里面
全栈程序员站长
2022/11/04
2.7K0
Quill 富文本编辑器简介
Quill 是一个免费的,开源的 WYSIWYG (What You See Is What You Get)编辑器,专为现代网络而打造。凭借其模块化架构和富有表现力的 API,你可完全自定义以满足任何需求。
阿宝哥
2019/11/06
4.1K0
wangeditor富文本编辑器的使用(超详细)
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/137644.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/05
12.4K1
Vue富文本编辑器_前端富文本编辑器插件
博客(coder的自我修养)原文链接:http://www.imcoder.fun/archives/1591583350241
全栈程序员站长
2022/11/07
3.8K0
Vue富文本编辑器_前端富文本编辑器插件
【愚公系列】2022年03月 微信小程序-富文本编辑器
编辑器导出内容支持带标签的 html和纯文本的 text,编辑器内部采用 delta 格式进行存储。
全栈程序员站长
2022/06/28
8930
【愚公系列】2022年03月 微信小程序-富文本编辑器
iOS小技能:富文本编辑器(下篇)
https://blog.csdn.net/z929118967/article/details/125298245
公众号iOS逆向
2022/08/22
1.1K0
iOS小技能:富文本编辑器(下篇)
Android富文本开发
基础概念目录介绍 01.业务需求简单介绍 02.实现的方案介绍 03.异常状态下保存状态信息 04.处理软键盘回删按钮逻辑 05.在指定位置插入图片 06.在指定位置插入输入文字 07.如果对选中文字加粗 08.利用Span对文字属性处理 09.如何设置插入多张图片 10.如何设置插入网络图片 11.如何避免插入图片OOM 12.如何删除图片或者文字 13.删除和插入图片添加动画 14.点击图片可以查看大图 15.如何暴露设置文字属性方法 16.文字中间添加图片注意事项 17.键盘弹出和收缩优化 18.前后
杨充
2019/12/25
9.2K0
Vue实战Vue-Quill-Editor富文本编辑器
     做博客系统、商城系统、cms系统等系统的时候需要自动生成网页,自动生成多媒体等图片网页的时候我们就用到了富文本编辑器。以前用jquery的时候经常使用的有百度富文本编辑器UEditor,不过因为后期自适应不大好使,也就换成别的了,有时候用过Ckeditor。自从用了element ui后打算做一个博客系统,后来就研究了一下Vue-Quill-Editor,嵌入到element ui中。Vue-Quill-Editor,这是一款基于Quill、适用于Vue的富文本编辑器。
十分钟空间
2022/08/17
1.7K0
如何用canvas实现一个富文本编辑器
富文本编辑器相信大家都用过,相关的开源项目也很多,虽然具体的实现不一样,但是大部分都是使用DOM实现的,但其实还有一种实现方式,那就是使用HTML5的canvas,本文会带大家使用canvas简单实现一个类似Word的富文本编辑器,话不多说,开始吧。
街角小林
2023/07/09
2.2K0
如何用canvas实现一个富文本编辑器
最近迷上了富文本编辑器!
遥想刚入行的时候在一个媒体类的互联网单位,既然是媒体单位,文案的在线编辑,自然而然成为了一个不可绕过的坎
用户7413032
2022/03/09
3.9K2
最近迷上了富文本编辑器!
关于富文本编辑器
在使用了众多富文本编辑器后,终于有一些总结经验了. 这两天换了不下5个富文本编辑器,最后还是选择了第一次用的.后面的都白试了. 先说一下这个项目的需要,1.基本的字体以及样式修改要的,要图片上传功能,需要上传到自己公司的服务器,在获取地址后加上编辑中去,2.需要placeholder属性. 也许很多人都觉得这两个属性的富文本编辑器很多,然而在我花了1天左右时间寻找后,只有1款勉强满足自己的需要,placeholder这个属性还是自己通过修改原插件才得以实现的. 下面是我使用过的富文本编辑器: 1.react
杭州前端工程师
2018/06/15
3.1K0
iOS 富文本编辑器
之前项目是用H5写的编辑器,效果不好,想着用原生自己好操作些,百度搜索一下,发现ZSSRichTextEditor很好用。 项目需求就是类似于实现富文本功能,可以换行,左右对齐,修改字体颜色等,选择这个的原因不光因为它可以实现以上功能,他还可以把输入好的文字转换成html。 但是ZSSRichTextEditor不能修改字体,中文输入可以,英文却不可以,查看代码: case ZSSFontFamilyPalatino: fontFamilyString = @"Palatino Linoty
honey缘木鱼
2018/06/08
2.4K0
vuetify富文本编辑器_vue富文本编辑器的使用
最近再弄一个后台管理系统,挑选了不少的编辑器,最终选择了tinymce,UI精美,功能模块多,可按需加载配置 来一张tinymce官网的完整功能的图(没梯子可能访问速度有点慢…)
全栈程序员站长
2022/11/15
3.2K0
vuetify富文本编辑器_vue富文本编辑器的使用
Django添加ckeditor富文本编辑器
源码 https://github.com/django-ckeditor/django-ckeditor
菲宇
2022/12/21
2.6K0
推荐阅读
相关推荐
记一次使用 android 自带 WebView 做富文本编辑器之API、机型的兼容及各种奇葩bug的解决
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验