Froala editor的基本使用

本王身为一个苦逼的程序员，在我的工作历程中，终于迎来了第一次使用富文本的项目。

由于工作时间紧急，于是就草草的百度一番，选中了名气贼大的百度富文本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个条件之后，上传图片功能就完成了。另外，推测文件上传和视频上传是一样的，本篇文章可以作为参考。