給Guns【基於springboot框架】加入一個富文本編輯器wangEditor

最近寫一個小demo，想在Guns中加入一個富文本編輯器，參考網上的一些資料，現在的富文本編輯器非常多，比較出名的有百度的UEditor，功能很多，但是就是因爲功能太多，很多功能是用不上的，所以加進去後看起來太過繁雜，所以選用了另外一個富文本編輯器——wangEditor，使用也非常簡單

wangEditor地址：http://www.wangeditor.com/

效果如圖

 先下載wangeditor的源碼

 把下載下來的編輯器源碼直接放進Guns項目中static文件中

 接下來就是將編輯器放入頁面中了，先解決編輯文字的問題，只需在html頁面和js文件中加入以下代碼

<script src="${ctxPath}/static/wangEditor/release/wangEditor.js"></script>
<div id="editor">
</div>

$(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;
    }

運行項目測試存儲一條數據到數據庫中

是沒有問題的 ，然後加入圖片上傳功能，這裏我打算將圖片上傳到項目路徑下，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;
        }

    }

這部分就處理完了，試驗一下

可以正常回傳顯示了 ，看看我在控制檯打印的文件路徑，我們的圖片就是傳到了這個路徑下，並且回傳給了前端顯示

 保存到數據庫中

這裏就完成了編輯器的新增功能了