Java web 引入wangEditor编辑器

Posted 2020-10-14 小哥z

最近项目需要我做些前端的事，这让我这个半吊子前端很是痛苦。项目中需要一个编辑器，之前找了个ueditor,插件比较多，需要改源码等等不说，最后弄好了，发现需要flash插件。没办法，只有推到重来，在网上寻找对比后，最后决定使用用wangEditor，首先它简单，轻量，基本能满足我的需求，不好的地方就是网上的demo不是很多，不是大公司的开源产品，不知道能不能坚持更新下去，不过ueditor都不更新了，也没必要强求。

首先贴上官方地址：https://www.kancloud.cn/wangfupeng/wangeditor3/335771。

没什么说的，就是简洁，轻量、官网上的例子已经写很详细了，主要记录下我的做法。

 <div id="div1">
   
     </div>
    <textarea name="ueditorContent" id="ueditorContent" style="width:100%; height:200px;display:none" ></textarea>
    <script type="text/javascript">
        var E = window.wangEditor;
        var editor = new E(\'#div1\');
        var $ueditorContent = $(\'#ueditorContent\');
        editor.customConfig.onchange = function (html) {
            // 监控变化，同步更新到 textarea
            $ueditorContent.val(html);
        };
        editor.customConfig.uploadImgServer = \'/bhym/systemController/fileUp.do\' ; // 上传图片到服务器，
        // 隐藏“网络图片”tab
       // editor.customConfig.showLinkImg = false;
        editor.customConfig.uploadImgHooks = {
                // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
                customInsert: function (insertImg, result, editor) {
                    // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果：
                    var url = result.obj;
                    insertImg(url);
                },
              },
        editor.create();
        // 初始化 textarea 的值,向后台提交textarea中的值
        $ueditorContent.val(editor.txt.html())

    </script>

因为前端参数比较多，不想单独去写个ajax请求去发送请求。所以为了偷下懒，就在编辑器的下方，定义了一个textarea ，将它隐藏掉，将编辑器的内容同步更新到textarea中。再通过将textarea中的内容用提交form

表单的方式提交。前端就这样了，再来看看后台的图片处理，思路是：按照常规的文件上传方式将图片上传到服务器，返回一个url(虚拟路径）再通过配置虚拟路径的方式访问图片，前面有篇文章说的怎么配置虚拟路径：http://www.cnblogs.com/magic101/p/7756402.html。

/**
     * 
     * @Title: fileUp
     * @Description:wangEditor上传图片
     * @param
     * @return
     */
    @RequestMapping("/fileUp")
    @ResponseBody
    public AjaxJson fileUp(HttpServletRequest request) {
        AjaxJson j = new AjaxJson();
        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
        try {
            multipartRequest.setCharacterEncoding("UTF-8");
            Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
            // 文件数据库保存的路径
            String path = null;
            // 文件保存在硬盘的相对路径
            String realPath = null;

            realPath = ResourceUtil.getConfigByName("webUploadpath") + "/";
            path = ResourceUtil.getConfigByName("http_url") + "/";
            File file = new File(realPath);
            if (!file.exists()) {
                file.mkdirs();// 创建根目录
            }
            realPath += DateUtils.getDataString(DateUtils.yyyyMMdd) + "/";
            path += DateUtils.getDataString(DateUtils.yyyyMMdd) + "/";
            file = new File(realPath);
            if (!file.exists()) {
                file.mkdir();// 创建文件时间子目录
            }
            String fileName = "";
            // String swfName = "";
            for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) {

                MultipartFile mf = entity.getValue();// 获取上传文件对象
                fileName = mf.getOriginalFilename();// 获取文件名
                // swfName =
                // PinyinUtil.getPinYinHeadChar(oConvertUtils.replaceBlank(FileUtils.getFilePrefix(fileName)));//
                // 取文件名首字母作为SWF文件名
                String extend = FileUtils.getExtend(fileName);// 获取文件扩展名
                String myfilename = "";
                String noextfilename = "";// 不带扩展名

                noextfilename = DateUtils.getDataString(DateUtils.yyyymmddhhmmss) + StringUtil.random(8);// 自定义文件名称
                myfilename = noextfilename + "." + extend;// 自定义文件名称

                String savePath = realPath + myfilename;// 文件保存全路径

                File savefile = new File(savePath);
                if (entity.getKey() != null) {
                    // 设置文件数据库的物理路径
                    String filePath = path + myfilename;
                    j.setObj(filePath);
                }
                // 文件拷贝到指定硬盘目录
                if ("txt".equals(extend)) {
                    // 利用utf-8字符集的固定首行隐藏编码原理
                    // Unicode:FF FE UTF-8:EF BB
                    byte[] allbytes = mf.getBytes();
                    try {
                        String head1 = toHexString(allbytes[0]);
                        // System.out.println(head1);
                        String head2 = toHexString(allbytes[1]);
                        // System.out.println(head2);
                        if ("ef".equals(head1) && "bb".equals(head2)) {
                            // UTF-8
                            String contents = new String(mf.getBytes(), "UTF-8");
                            if (StringUtils.isNotBlank(contents)) {
                                OutputStream out = new FileOutputStream(savePath);
                                out.write(contents.getBytes());
                                out.close();
                            }
                        } else {

                            // GBK
                            String contents = new String(mf.getBytes(), "GBK");
                            OutputStream out = new FileOutputStream(savePath);
                            out.write(contents.getBytes());
                            out.close();
                        }
                    } catch (Exception e) {
                        String contents = new String(mf.getBytes(), "UTF-8");
                        if (StringUtils.isNotBlank(contents)) {
                            OutputStream out = new FileOutputStream(savePath);
                            out.write(contents.getBytes());
                            out.close();
                        }
                    }
                } else {
                    FileCopyUtils.copy(mf.getBytes(), savefile);
                }
            }
        } catch (Exception e) {
            j.setSuccess(false);
            e.printStackTrace();
        }
        return j;
    }

    private String toHexString(int index) {
        String hexString = Integer.toHexString(index);
        // 1个byte变成16进制的，只需要2位就可以表示了，取后面两位，去掉前面的符号填充
        hexString = hexString.substring(hexString.length() - 2);
        return hexString;
    }

最后再来测试一下：

然后再访问一下数据库。发现确实也存入了的。