概述
对于富文本编辑器主要有几种,他们的有点缺点如下:
1.KindEditor:优点:比较轻,轻量版
缺点:目前来说,不可自定义字体字号【2018-04-01】
2.UEditor:优点:拥有最丰富的功能。
缺点:1.换行之后,下一行对齐上一行,因此无法调整下一行的对齐方式
2.当全选内容,给全部内容统一改变属性时,不一定使每个字的格式都生效。
3.还有其他一些bug,就不多说了
3.wangEditor v2:优点:功能比较完善,包括自定义菜单、字体字号等
缺点:该版本将不再维护更新
4.wangEditor v3:优点:持续维护更新
缺点:到现在为止(2018-04-28),v3版本功能尚未 完善,如:不能自定义字体(10px,12px,14px...)
字体都是定死了的(small、normal、large等)
综上所述:根据我目前的需求,还是选wangEditor v2最为恰当,虽然开发者不再维护,但功能依然是存在的。
接下来就是在页面配置一个富文本编辑器出来。
首先:引入jquery
第二:下载 wangEditor2.1.23,可以到官方网站下载,也可以到我的网盘下载 wangEditor2.1.23
第三:创建页面,引入 wangEditor2.1.23/dist文件夹目录下的wangEditor2.1.23.js,并配置富文本编辑器的基本配置的js(即我的分享中的wangEditor-config.js)
如此就完成了创建wangEditor2富文本编辑器
如图:
测试:
至于富文本编辑器的图片上传我就不一一详细说了,可以参考官网
其中,我引用了官网的处理上传的图片代码,发现有些报错,所以就改了一下,将对应的代码改成以下代码解决:
/**上传文件处理内容**/
DiskFileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload sfu = new ServletFileUpload(factory);
sfu.setHeaderEncoding("UTF-8"); // 处理中文问题
sfu.setSizeMax(10 * 1024 * 1024); // 限制文件大小
try {
List<FileItem> fileItems = sfu.parseRequest(request); // decode request
for (FileItem fi : fileItems) {
//System.out.println("fi :"+fi.toString());
fileName = UUID.randomUUID()+fi.getName().substring(fi.getName().lastIndexOf("."),fi.getName().length());
if(!fi.equals(null)&&!fi.getName().equals("")){
fi.write(new File(realPath, fileName));
}
}
} catch (Exception e) {
e.printStackTrace();
}
好了,wangEditor2的基本配置已经讲完了,应该很通俗吧,如若有问题可以在评论区评论或者联系本人(qq:2225629171@qq.com)
希望可以帮到大家。
最后
以上就是朴实母鸡为你收集整理的富文本编辑器wangEditor2的基本配置的全部内容,希望文章能够帮你解决富文本编辑器wangEditor2的基本配置所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复