富文本编辑_android高仿今日头条富文本编辑(发布文章)

       在经历了几个月的项目期限。我们遇到了前端发布文章&＃xff0c;要用到富文本编辑的功能。在一番衡量下最终用到了[richeditor-android](https://github.com/wasabeef/richeditor-android)第三方框架。实现原理就是通过webView和js实现前端富文本。有想了解的可以点开上面链接&＃xff0c;研究研究。虽然richeditor-android已经帮我们实现了大部分核心内容&＃xff0c;但是很多细节它都没有完善&＃xff0c;这也是为什么他的issues达到170多的原因。也不知道它有没有停更。接下来是作者踩了N多坑之后&＃xff0c;把功能基本补全。可以说是高仿“今日头条富文本编辑”。

(这里不会重复richeditor-android原有功能&＃xff0c;只会详细讲解补全的细节功能)

1.1、在没有焦点时&＃xff0c;主动获取焦点并弹出软键盘

修改后&＃xff1a; 在第一打开富文本编辑时&＃xff0c;点击加粗&＃xff0c;下划线或上传图片时&＃xff0c;主动获取焦点并弹出软键盘。

1.2、在光标主动回到某处&＃xff0c;下方tab选中当前的样式&＃xff0c;同理撤销和回退

修改后&＃xff1a;在光标变化&＃xff0c;撤销回退&＃xff0c;或者主动点删除时&＃xff0c;下方tab会根据当前样式选中要选中的样式

1.3、上传图片&＃xff0c;自动换行&＃xff0c;且自动滚动到底部。且充满屏幕

修改后&＃xff1a; 选中图片后&＃xff0c;插入图片自动换行&＃xff0c;自动滚动到底部&＃xff0c;弹出软键盘。(图片充满屏幕)

1.4、点击图片&＃xff0c;可编辑图片(剪裁)&＃xff0c;或删除图片

修改后&＃xff1a;点击图片增加了删除和编辑功能&＃xff0c;编辑剪裁图片也是模仿头条的。(注&＃xff1a;这里的图片选择和图片剪裁是其他第三方&＃xff0c;后续给上链接&＃xff0c;作者修改后增加了比例切换的动画&＃xff0c;且适配了全面屏和处理了虚拟键)

1.5、根据头条的排版样式&＃xff0c;修改了文字&＃xff0c;图片还有序号的排版样式

修改后&＃xff1a;原样式&＃xff0c;比较不理想。在看了头条的排版样式后&＃xff0c;修改了css样式。尽量模仿出头条的感觉

1.6、选中文字后&＃xff0c;在不点击屏幕前&＃xff0c;选中文字都不变。高度模仿头条

修改后&＃xff1a;之前点击1下或者2下加粗时&＃xff0c;选中文字会取消。现在不是主动点击屏幕&＃xff0c;选中文字不会取消

1.7、在作者在实现这块功能时&＃xff0c;还遇到了缺少ssl证书&＃xff0c;图片没法显示出来。还加了忽略ssl证书

在华为和小米都有出现过。出现的时候&＃xff0c;我用头条app去上传图片也是遇到上传图片失败。过一会&＃xff0c;手机又正常了。反正加上忽略ssl是一定可以成功的。

• 文中用到的图片选择框架&＃xff0c;建议用demo的&＃xff0c;是作者适配全面屏修改过的&＃xff1b;原框架地址&＃xff1a;https://github.com/jeasonlzy/ImagePicker

• 文章用到的剪裁框架&＃xff0c;建议用demo的&＃xff0c;是作者适配全面屏修改过的&＃xff1b;原框架地址&＃xff1a;https://github.com/Yalantis/uCrop

• 请注意&＃xff1a;文中用到本地路径的图片&＃xff0c;如果是网图&＃xff0c;则可直接替换成网图即可

• 最终生成的是html,可在前端各个端展示

• android高仿今日头条富文本编辑&＃xff0c;发布文章&＃xff1b;本文demo&＃xff0c;github地址&＃xff1a; https://github.com/lihangleo2/RichEditTextCopyToutiao