富文本编辑器wangEditor2的基本配置

对于富文本编辑器主要有几种，他们的有点缺点如下：

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 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:[email protected]）

希望可以帮到大家。