本王身为一个苦逼的程序员，在我的工作历程中，终于迎来了第一次使用富文本的项目。
由于工作时间紧急，于是就草草的百度一番，选中了名气贼大的百度富文本ueditor,不得不说，百度富文本在外观上还是相当精美的，至少符合了精简、功能强大的需求，于是，我就踩入这个深坑没有自拔。
首先我下载了精简版的 umeditor(ueditor的精简版本)1.2.3版本，在百般调试之后，部署到项目中，然后！！！字体字号修改不能用！！！，当时我心中一万匹什么马奔腾而过，没办法，水平有限，只能找最快的方法，百度！！，然后发现说1.2.3版本就是有这样的问题，网友们推荐1.2.2版本，之后我就下载了1.2.2版本，还不错，根据网上的使用方法啥的终于在本地部署成功，然而还没有完！！后来部署到服务器上之后，上传图片功能不能用！！！你没听错，真的不能用！好吧，这个富文本的使用我也不再记录，因为百度不再维护这个富文本编辑器，bug众多，我想我以后应该也不会选择这个富文本了，好吧废话不多说，下面来干货。
Froala Editor 官网地址在此！https://www.froala.com
1.下载
嘛，下载什么的我也不多说了把，下载就完了。
2.使用
那啥，下载的里面都有demo，直接看一下就知道怎么用。
3.使用技巧
我在使用的过程中，就应用到了几个地方，下面来说一哈
1）更改语言
$(function () {
$('#edit').froalaEditor({
language: 'zh_cn',
toolbarButtons: ['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', '|', 'color', 'emoticons', 'inlineStyle', 'paragraphStyle', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', '-', 'insertLink', 'insertImage', 'insertTable', '|', 'quote', 'insertHR', 'undo', 'redo', 'clearFormatting', 'selectAll', 'html'],
quickInsertButtons: ['image', 'table', 'ol', 'ul'],
imageUploadURL: "http://192.168.1.86:8080/exampage/ques/ziliaoceshi.do",
})
});
上图中的language就是更改语言的地方了。
2）更改顶端按钮框
上面的toolbarbuttons就是了，可以按照需求更改自己的按钮个数以及顺序。
3）更改快捷添加框
上面的quickInsertButtons就是了，可以更改快捷添加的按钮个数，以及功能。
4）更改图片上传路径
这个要重点说一下，在上面的代码中你看到imageUploadURL，imageUploadURL其实就是你处理该插件上传图片的后台方法地址，而不是你的图片要上传到的路径。
下面贴出我的后台处理方法。
@RequestMapping(value = "/exampage/ques/ziliaoceshi",method = RequestMethod.POST)
public void ziliaoceshi(HttpServletRequest request,HttpServletResponse response) throws IOException {
request.setCharacterEncoding("UTF-8");
CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(
request.getSession().getServletContext());
MultipartHttpServletRequest multiRequest = multipartResolver.resolveMultipart(request);
CommonsMultipartFile file=(CommonsMultipartFile) multiRequest.getFile("file");
String webpath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath();
//localhost:8080
webpath+="/pages/exampage/ques/froala_images/";//服务器文件地址
String localpath=request.getSession().getServletContext().getRealPath("");
localpath+="/pages/exampage/ques/froala_images/";//文件保存地址
System.out.println(localpath+"localpath");
System.out.println(webpath+"webpath");
if (file!=null){
String random= Toolsyhs.getfilname(file.getOriginalFilename());
webpath+=random;
localpath+=random;
}
file.transferTo(new File(localpath));
Map<String,String>map = new HashMap<>();
map.put("link",webpath);
Gson gson=new Gson();
System.out.println("hashmap"+gson.toJson(map));
response.setHeader("Access-Control-Allow-Origin", "*"); //解决跨域问题 一般不推荐使用 现在没找到好的解决方法
response.getWriter().write(gson.toJson(map));
}
注意：
1）后台处理后可能会出现跨域错误
No ‘Access-Control-Allow-Origin‘ header is present on
上面的代码中也已经写过解决方法了，不再赘述。
2）后台返回格式一定是
{"link": "图片的绝对地址"}
在满足上面的2个条件之后，上传图片功能就完成了。另外，推测文件上传和视频上传是一样的，本篇文章可以作为参考。
网友评论