篇首语:本文由小编为大家整理,主要介绍了PC/移动端的富文本编辑器wangEditor的使用相关的知识,希望对你有一定的参考价值。
参考技术A 在刚开发的项目之中,在移动端/PC端,需要一个富文本编辑器,要求:简单-轻量-实用。比较了几种编辑器后,选择了wangEditor。移动端的截图(手机效果好些):
PC端的截图:
在wangEditor的官网( http://www.wangeditor.com/ )中,提供了一些常用的工具,可以按需来配置,还可以自己二次封装:
先说配置:在PC端直接引入 wangEditor.js来创建,在移动端用的vue.js模块开发,所以用的: npm install wangeditor 来安装。
移动端:
1 . import wangeditor from "wangeditor" 来引入
2 . this.editor = new wangeditor ("#p1")
4 .配置需要的选项,具体的到官网查看
5.常用的配置:
6 . this.editor.create(); //创建编辑器,到这里创建就完成了。
7 . 但是你去发现在移动端,会不怎么适配,这时候就需要用 rem 来做适配。
如果:想要自己改变样式,那么直接在 node_moudles/wangwditor 下找到 wangEditor.js ,来自行修改。
PC端:在确保引入wangEditor.js之后,在之后的js中,写入:
android 记一次富文本加载之路
文章链接:https://mp.weixin.qq.com/s/69TRkmFL1aNuSqfw4ULMJw
项目中经常涉及到富文本的加载,后台管理端编辑器生成的一段html 代码要渲染到移动端上面,一种方法是前端做成html页面,放到服务器上,移动端这边直接webView 加载url即可,还有一种后台接口直接返回这段html富文本的,String类型的,移动端直接加载的;具体的需求按实际情况而定,webview直接加载url的就不说了,这里主要说说关于直接加载html的。
一段简单的html代码
private String txt = "" + "程序猿TX" + "
" + "";
原生webView 加载富文本
原生的webView 直接加载
webView.loadDataWithBaseURL(null,txt,"text/html","UTF-8",null);
如果是textView 有setText(Html.fromHtml(txt))
方法,但是这种加载方式,图片无法在textView显示。
如果非要使用textView 加载...
第三方库加载富文本
这里我使用的是RichText 第三方库
implementation ("com.zzhoujay.richtext:richtext:3.0.7"){ exclude group: "com.android.support"}
同时排除了support包的冲突,使用上
RichText.initCacheDir(this);RichText.from(txt).into(tv);
更多的方法可以去github上查看,这种方式图片是可以加载的,但是css的样式是没法呈现的。
以上的两种方式按自己的需求来进行使用的,试用于后台接口直接返回数据给移动端进行加载的。
加载html文件
一般的webView直接加载url体验上没那么流畅,相对的加载html文件会好点。后台依旧返回html数据给移动端,前端负责写html 文件模板,android将html文件放在assets 文件夹下面,通过webView.loadUrl("file:///android_asset/**.html")
加载,至于数据,就是移动端与前端的交互了,之前推荐过一个三方库 [android与js的交互之jsbridge使用
](https://www.manjiexiang.cn/bl...,通过这种方式将数据传递给前端,同时可以监听到js的方法调用。
这种方式更加适用于一个页面模板可以反复使用的,后台返回不同的数据进行加载。一个场景就是 viewpager里面的每个fragment页面结构相同,如果使用url加载,每个fragment里的webview去加载一个url,这种在体验上就不是很优雅,而使用html文件加载的方式,后台可以返回list 数据给移动端,对应的去用webview加载本地文件,把各项的数据传给前端展示,加载渲染的速度上会快点。当然如果原生的可以直接渲染页面的,优先原生的。
如果是那种单页面,只是浏览功能的,类似于 "关于我们" 那种页面可以直接用url加载的。
这篇文章主要介绍的是关于html 加载的,目前我们使用的是第三种方式的,不同的需求场景得根据各个项目来定的,关于第三种加载 html 文件的,后续再写一篇文章介绍移动端与前端交互的,而且我们加载的富文本内容相对的也不一样。
欢迎关注我的个人博客:https://www.manjiexiang.cn/
更多精彩欢迎关注微信号:春风十里不如认识你
一起学习,一起进步,欢迎上车,有问题随时联系,一起解决!!!
以上是关于PC/移动端的富文本编辑器wangEditor的使用的主要内容,如果未能解决你的问题,请参考以下文章