给Guns【基于springboot框架】加入一个富文本编辑器wangEditor

Dear 丶 2022-01-31 02:25 342阅读 0赞

最近写一个小demo，想在Guns中加入一个富文本编辑器，参考网上的一些资料，现在的富文本编辑器非常多，比较出名的有百度的UEditor，功能很多，但是就是因为功能太多，很多功能是用不上的，所以加进去后看起来太过繁杂，所以选用了另外一个富文本编辑器——wangEditor，使用也非常简单

wangEditor地址：[http://www.wangeditor.com/][http_www.wangeditor.com]

效果如图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTg2Njk2MA_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTg2Njk2MA_size_16_color_FFFFFF_t_70 1][]

先下载wangeditor的源码

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTg2Njk2MA_size_16_color_FFFFFF_t_70 2][]

把下载下来的编辑器源码直接放进Guns项目中static文件中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTg2Njk2MA_size_16_color_FFFFFF_t_70 3][]

接下来就是将编辑器放入页面中了，先解决编辑文字的问题，只需在html页面和js文件中加入以下代码

$(function() {
        var E = window.wangEditor
        var editor = new E('#editor')
    
        // 或者 var editor = new E( document.getElementById('editor') )
       
        editor.create()
        /*editor.txt.html($("#contentVal").val())*/
        //获取富文本编辑器中的内容
        editor.txt.html()
    
    });

贴上html页面和js的完整代码

review\_add.html

@layout("/common/_container.html"){
    <div class="ibox float-e-margins">
        <div class="ibox-content">
            <div class="form-horizontal">
    
                <input type="hidden" id="id" value="">
    
                <div class="row">
                    <div class="col-sm-6 b-r">
                               
                                <#input id="uid" name="用户ID"/>
                    </div>
    
                    <div class="col-sm-6">
                                <#input id="sid" name="商店ID" underline="true"/>
                                <#input id="createDate" name="出生日期" underline="true" type="date"
                                        clickFun="laydate({istime: false, format: 'YYYY-MM-DD'})"/>
                    </div>
    
                    <script src="${ctxPath}/static/wangEditor/release/wangEditor.js"></script>
                    <div id="editor">
                    </div>
    
                </div>
    
                <div class="row btn-group-m-t">
                    <div class="col-sm-10">
                        <#button btnCss="info" name="提交" id="ensure" icon="fa-check" clickFun="ReviewInfoDlg.addSubmit()"/>
                        <#button btnCss="danger" name="取消" id="cancel" icon="fa-eraser" clickFun="ReviewInfoDlg.close()"/>
                    </div>
                </div>
            </div>
    
        </div>
    </div>
    <script src="${ctxPath}/static/modular/reviewManger/review/review_info.js"></script>
    @}

review\_info.js

/**
     * 初始化评论管理详情对话框
     */
    var ReviewInfoDlg = {
        reviewInfoData : {}
    };
    
    /**
     * 清除数据
     */
    ReviewInfoDlg.clearData = function() {
        this.reviewInfoData = {};
    }
    
    /**
     * 设置对话框中的数据
     *
     * @param key 数据的名称
     * @param val 数据的具体值
     */
    ReviewInfoDlg.set = function(key, val) {
        this.reviewInfoData[key] = (typeof val == "undefined") ? $("#" + key).val() : val;
        return this;
    }
    
    /**
     * 设置对话框中的数据
     *
     * @param key 数据的名称
     * @param val 数据的具体值
     */
    ReviewInfoDlg.get = function(key) {
        return $("#" + key).val();
    }
    
    /**
     * 关闭此对话框
     */
    ReviewInfoDlg.close = function() {
        parent.layer.close(window.parent.Review.layerIndex);
    }
    
    /**
     * 收集数据
     */
    ReviewInfoDlg.collectData = function() {
    
        var temp = document.createElement("div");
        temp.textContent=ReviewInfoDlg.editor.txt.html();
        var output = temp.innerHTML;
        /*console.log("output内容是"+output)*/
        this.reviewInfoData['content'] = output
    
        this
        .set('id')
        .set('uid')
        .set('sid').set('createDate')
        ;
    }
    
    /**
     * 提交添加
     */
    ReviewInfoDlg.addSubmit = function() {
    
        this.clearData();
        this.collectData();
    
        //提交信息
        var ajax = new $ax(Feng.ctxPath + "/review/add", function(data){
            Feng.success("添加成功!");
            window.parent.Review.table.refresh();
            ReviewInfoDlg.close();
        },function(data){
            Feng.error("添加失败!" + data.responseJSON.message + "!");
        });
        ajax.set(this.reviewInfoData);
        ajax.start();
    }
    
    /**
     * 提交修改
     */
    ReviewInfoDlg.editSubmit = function() {
    
        this.clearData();
        this.collectData();
    
        //提交信息
        var ajax = new $ax(Feng.ctxPath + "/review/update", function(data){
            Feng.success("修改成功!");
            window.parent.Review.table.refresh();
            ReviewInfoDlg.close();
        },function(data){
            Feng.error("修改失败!" + data.responseJSON.message + "!");
        });
        ajax.set(this.reviewInfoData);
        ajax.start();
    }
    
    $(function() {
        var E = window.wangEditor
        var editor = new E('#editor')
    
        // 或者 var editor = new E( document.getElementById('editor') )
        
        editor.create()
        /*editor.txt.html($("#contentVal").val())*/
        editor.txt.html()
        ReviewInfoDlg.editor = editor
    
    });

后端java代码片段

/**
         * 新增评论管理
         */
        @RequestMapping(value = "/add")
        @ResponseBody
        public Object add(Review review) {
            String content=HtmlUtils.htmlUnescape(review.getContent());
            review.setContent(content);
            reviewService.insert(review);
            return super.SUCCESS_TIP;
        }

运行项目测试存储一条数据到数据库中

![20190515144428618.png][]

是没有问题的 ，然后加入图片上传功能，这里我打算将图片上传到项目路径下，springboot框架和SSM框架不一样在于，springboot是内置tomcat，springboot中不是将项目上传到webroot下面，也不是上传到缓存中，而是上传到运行资源中，也就是target目录中的static的某个文件夹中，而不是源代码static的某个文件中

首先在上传js文件基础上新增图片的一些参数和上传的监听函数

var E = window.wangEditor
        var editor = new E('#editor')
    
        // 或者 var editor = new E( document.getElementById('editor') )
        // 配置服务器端地址,也就是controller的请求路径，不带项目路径，前面没有/
        editor.customConfig.uploadImgServer = '/review/upload/editor/img';
        //配置属性名称，绑定请求的图片数据
        //controller会用到，可以随便设置，但是一定要与controller一致
        editor.customConfig.uploadFileName = 'img';
        editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024
        editor.customConfig.uploadImgMaxLength = 5
    
        editor.create()
        /*editor.txt.html($("#contentVal").val())*/
        editor.txt.html()
        ReviewInfoDlg.editor = editor
    editor.customConfig.uploadImgHooks = {
            before: function (xhr, editor, files) {
                // 图片上传之前触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
    
                // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
                // return {
                //     prevent: true,
                //     msg: '放弃上传'
                // }
            },
            success: function (xhr, editor, result) {
                // 图片上传并返回结果，图片插入成功之后触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
            },
            fail: function (xhr, editor, result) {
                // 图片上传并返回结果，但图片插入错误时触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
            },
            error: function (xhr, editor) {
                // 图片上传出错时触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
            },
            timeout: function (xhr, editor) {
                // 图片上传超时时触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
            },
    
            // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
            // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
            customInsert: function (insertImg, result, editor) {
                // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
                // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
    
                // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
                var url = result.url
                insertImg(url)
    
                // result 必须是一个 JSON 格式字符串！！！否则报错
            }
        }

java后端代码

新增一个dto，作为返回的对象

package com.stylefeng.guns.common.persistence.model;
    
    public class ImgResultDto<T> {
        private int  errno;//错误代码
    
        private String[] data;//存放数据
    
        public int getErrno() {
            return errno;
        }
    
        public void setErrno(int errno) {
            this.errno = errno;
        }
    
        public String[] getData() {
            return data;
        }
    
        public void setData(String[] data) {
            this.data = data;
        }
    }

图片上传处理代码，我将很多逻辑处理放在了controller里面，其实这样很不规范。。。

/**
         * 上传图片
         */
        @ResponseBody
        @RequestMapping(value="/upload/editor/img")
        //RequestParam中的属性名称要和前端定义的一致，上面说明了．所以写"img"
        //使用List<MultipartFile>进行接收
        //返回的是一个Ｄto类，后面会说明，使用@ResponseBody会将其转换为Ｊson格式数据
        public ImgResultDto uploadEditorImg(@RequestParam("img") List<MultipartFile> list,HttpSession session,HttpServletRequest request) {
            //获取运行状态（编译状态）staitc文件目录，将图片上传到文件下
            String path= Class.class.getClass().getResource("/").getPath();
            path= path+"static"+File.separator+"uploadfiles";
            System.out.println("fileUrl:"+path);
    
            ImgResultDto imgResultDto = new ImgResultDto();
            String[] urlData = new String[5];
            int index = 0;
            try{
                for(MultipartFile img : list) {
                    //获取原始文件名，比如你上传的是　图片．jpg,则fileName＝图片．jpg
                    String fileName = img.getOriginalFilename();
                    if(fileName == "") {
                        continue;
                    }
                    //处理文件名字
                    String Code = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date()) + RandomUtils.nextInt(10000);
                    String newName=Code+fileName.substring(fileName.lastIndexOf("."));
                    System.out.println("新的文件名"+newName);
    
    
                    File file = new File(path, newName);
                    if (!file.getParentFile().exists()){
                        file.getParentFile().mkdirs();
                    }
                    //存入文件
                    img.transferTo(file);
    
                    String url =request.getContextPath()+"/static/uploadfiles/"+newName;
                    urlData[index++]=url;
                    System.out.println("Url:"+url);
                    //设置异常代号
                    imgResultDto.setErrno(0);
                }
                imgResultDto.setData(urlData);
                //返回Ｄto
                return imgResultDto;
            }catch (Exception e){
                e.printStackTrace();
                return imgResultDto;
            }
    
        }

这部分就处理完了，试验一下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTg2Njk2MA_size_16_color_FFFFFF_t_70 4][]

可以正常回传显示了 ，看看我在控制台打印的文件路径，我们的图片就是传到了这个路径下，并且回传给了前端显示

![20190517110518174.png][]

保存到数据库中

![20190517110645256.png][]

这里就完成了编辑器的新增功能了

[http_www.wangeditor.com]: http://www.wangeditor.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTg2Njk2MA_size_16_color_FFFFFF_t_70]: /images/20220131/f82c4d7a0e1140c0bf4106c01785e8e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTg2Njk2MA_size_16_color_FFFFFF_t_70 1]: /images/20220131/5288785adb8a47588d938f314fb4a066.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTg2Njk2MA_size_16_color_FFFFFF_t_70 2]: /images/20220131/33fc493e54244a05ae6369a7e927f815.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTg2Njk2MA_size_16_color_FFFFFF_t_70 3]: /images/20220131/63c9ba197e7a4278b4cb00841b056ef4.png
[20190515144428618.png]: /images/20220131/7f8f32c0ea594b3aa7bee74880d49586.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTg2Njk2MA_size_16_color_FFFFFF_t_70 4]: /images/20220131/476e9f5fd2c44796bb83de7d13438c70.png
[20190517110518174.png]: /images/20220131/982d085e76e74880889d24002634f360.png
[20190517110645256.png]: /images/20220131/fce49d9eb24a4ab3a607782fcca4ecad.png