Vue.js中集成summernote

首先引用summernote樣式及js：

    <!--summernote css -->
    <link href="${ctxPath}/static/css/summernote/summernote-0.8.8.css" rel="stylesheet">
         
    <!--summernote-->
    <script src="${ctxPath}/static/plugins/summernote/summernote.js"></script>
    <script src="${ctxPath}/static/plugins/summernote/summernote-zh-CN.min.js"></script>
    

Add.html:

     <input id="content" name="content" type="hidden"  v-model="sysNotify.notifyContent"> 
     <div class="col-sm-11">
        <div class="ibox-content no-padding">
            <div id="content_sn" class="summernote"></div>
        </div>
     </div>

Add.js:

$().ready(function() {
    $('.summernote').summernote({
        height : '220px',
        lang : 'zh-CN',
            callbacks : { 
                 onImageUpload: function(files, editor, $editable) {
                     sendFile(files);
                  }
            }
    });
});

var vm = new Vue({
    el:'#dpLTE',
    data: {
        sysNotify: {
            id: 0
        }
    },
    methods : {
/*        html_encode: function (str) {
            var s = ''
            if (str.length === 0) return ''
            s = str.replace(/&/g, '&')
            s = s.replace(/</g, '&lt;')
            s = s.replace(/>/g, '&gt;')
            s = s.replace(/ /g, '&nbsp;')
            s = s.replace(/'/g, '&#39;')
            s = s.replace(/"/g, '&quot;')
            s = s.replace(/\n/g, '<br>')
            return s
          },
          html_decode: function (str) {
            var s = ''
            if (str.length === 0) return ''
            s = str.replace(/&amp;/g, '&')
            s = s.replace(/&lt;/g, '<')
            s = s.replace(/&gt;/g, '>')
            s = s.replace(/&nbsp;/g, ' ')
            s = s.replace(/&#39;/g, '\'')
            s = s.replace(/&quot;/g, '"')
            s = s.replace(/<br>/g, '\n')
            return s  }, */
            acceptClick: function() {
                if (!$('#form').Validform()) {
                    return false;
                }
                
                var content_sn = $("#content_sn").summernote('code');
                $("#content").val(content_sn);
                //vm.sysNotify.notifyContent=html_encode(content_sn);  //采用js中直接轉義方式,調用公用的轉義函數encode
                vm.sysNotify.notifyContent=content_sn;                 //采用過濾器的方式,在數據提交時進行轉義
                
                //alert(vm.sysNotify.notifyContent);
                
                $.SaveForm({
                    url: '../../sys/notify/save?_' + $.now(),
                    param: vm.sysNotify,
                    success: function(data) {
                        $.currentIframe().vm.load();
                    }
                });
            }
    } 
})

Edit.js:

$().ready(function() {
    $('.summernote').summernote({
        height : '220px',
        lang : 'zh-CN',
        callbacks: {
             onImageUpload: function(files, editor, $editable) {
                 sendFile(files);
              }
        }
    });
});


var vm = new Vue({
    el:'#dpLTE',
    data: {
        sysNotify: {
            id: 0
        }
    },
    methods : {
/*        html_encode: function (str) {
            var s = ''
            if (str.length === 0) return ''
            s = str.replace(/&/g, '&')
            s = s.replace(/</g, '&lt;')
            s = s.replace(/>/g, '&gt;')
            s = s.replace(/ /g, '&nbsp;')
            s = s.replace(/'/g, '&#39;')
            s = s.replace(/"/g, '&quot;')
            s = s.replace(/\n/g, '<br>')
            return s
          },
          html_decode: function (str) {
            var s = ''
            if (str.length === 0) return ''
            s = str.replace(/&amp;/g, '&')
            s = s.replace(/&lt;/g, '<')
            s = s.replace(/&gt;/g, '>')
            s = s.replace(/&nbsp;/g, ' ')
            s = s.replace(/&#39;/g, '\'')
            s = s.replace(/&quot;/g, '"')
            s = s.replace(/<br>/g, '\n')
            return s  
           }, */
           setForm: function() {
              $.SetForm({
                url: '../../sys/notify/info?_' + $.now(),
                param: vm.sysNotify.id,
                success: function(data) {
                    vm.sysNotify = data;
                    ///alert(vm.sysNotify.notifyContent);
                    //$('#content_sn').summernote('code', html_decode(vm.sysNotify.notifyContent));  //采用js中直接轉義方式,調用公用的轉義函數decode
                    $('#content_sn').summernote('code', vm.sysNotify.notifyContent);                 //采用過濾器的方式,在數據提交時進行轉義
                   }
               });
            },
            acceptClick: function() {
                if (!$('#form').Validform()) {
                    return false;
                }
                
                var content_sn = $("#content_sn").summernote('code');
                $("#content").val(content_sn);
                vm.sysNotify.notifyContent=vm.html_encode(content_sn);
                
                $.ConfirmForm({
                    url: '../../sys/notify/update?_' + $.now(),
                    param: vm.sysNotify,
                    success: function(data) {
                        $.currentIframe().vm.load();
                    }
                });
            }
        }
    })

summernote圖片上傳回調函數sendFile:

//編輯器新增的ajax上傳圖片函數
function sendFile(files, editor, $editable) {
    var size = files[0].size;
    if((size / 1024 / 1024) > 2) {
        alert("圖片大小不能超過2M...");
        return false;
    }
    console.log("size="+size);
    var formData = new FormData();
    formData.append("file", files[0]);
    $.ajax({
        data : formData,
        type : "POST",
        url : "/sys/file/upload",    // 圖片上傳出來的url，返回的是圖片上傳后的路徑，http格式
        cache : false,
        contentType : false,
        processData : false,
        dataType : "json",
        success: function(data) {//data是返回的hash,key之類的值，key是定義的文件名
            $('.summernote').summernote('insertImage',data.fileName);
        },
        error:function(){
            alert("上傳失敗");
        }
    });
}

后台upload方法：

    @ResponseBody
    @PostMapping("/upload")
    R upload(@RequestParam("file") MultipartFile file, HttpServletRequest request) {
        /*if ("test".equals(getUsername())) {
            return R.error(1, "演示系統不允許修改,完整體驗請部署程序");
        }*/
        String fileName = file.getOriginalFilename();
        fileName = FileUtil.renameToUUID(fileName);
        SysFileEntity sysFile = new SysFileEntity(FileType.fileType(fileName), "/files/" + fileName, new Date());
        try {
            FileUtil.uploadFile(file.getBytes(), dpConfig.getUploadPath(), fileName);
        } catch (Exception e) {
            return R.error();
        }

        if (sysFileService.save(sysFile) > 0) {
            return R.ok().put("fileName",sysFile.getUrl());
        }
        return R.error();
    }

文件上傳路徑虛擬映射：

    registry.addResourceHandler("/files/**").addResourceLocations("file:///"+dpConfig.getUploadPath());

文件路徑過濾：

    public FilterRegistrationBean xssFilterRegistration() {
        XssFilter xssFilter = new XssFilter();
        FilterRegistrationBean registration = new FilterRegistrationBean(xssFilter);
        registration.setOrder(Integer.MAX_VALUE);
        registration.addUrlPatterns("/upload");
        return registration;
    }

這樣就不需要在前端encode和decode，xssFilter過濾器會自動做這些事情。

 測試圖例：