summernote富文本編輯器的使用

最近做的一個項目要做一個富文本編輯器，於是用來summernote。它的用法和注意點如下：

前端代碼HTML：

   <div class="form-group">
                <label class="col-sm-2 control-label">反饋內容：</label>
                <div class="col-sm-10">
                    <input id="feedbackContent" name="feedbackContent" type="hidden">
                    <div class="summernote"></div>
                </div>
   </div>

js代碼：

<script type="text/javascript">

        var prefix = ctx + "system/info"
      
        //用類選擇器給class = summernote的div添加一個summernote富文本編輯器

        $('.summernote').summernote({
            placeholder: '請輸入反饋內容',
            height : 192,
            lang : 'zh-CN',
            followingToolbar: false,
            //回調函數onImageUpload
            callbacks: {
                onImageUpload: function (files) {
                    //調用文件上傳函數
                    sendFile(files[0], this);
                }
            }
        });

        // 上傳文件
        function sendFile(file, obj) {
            
            /*ormData是ajax2.0(XMLHttpRequest Level2)新提出的接口,利用FormData對象可以將form表單元素的name與value進行組合,
             實現表單數據的序列化,從而介紹表單元素的拼接,提高工作效率*/

           //新建一個FormData對象，FormData是將數據以鍵值對形式
             var data = new FormData();
             //給data對象里面添加鍵值對
            data.append("file", file);

 $.ajax({ type: "POST", url: ctx + "file/upload", data: data, 
 // cache: true和false的區別是：true的話會讀緩存而且真的到服務器上；alse的話會在url后面加一個時間綴，而是讓它跑到服務器獲取結果。

                cache: false,

 //contentType代表發送信息至服務器時內容編碼類型,通俗點說就是告訴服務器從瀏覽器提交過來的數據格式。

 contentType: false,
 //processData默認為true(該方法為jQuery獨有的)默認情況下會將發送的數據序列化以適應默認的內容類型
                //application/x-www-form-urlencoded如果想發送不想轉換的的信息的時候需要手動將其設置為false
      
                processData: false,

 dataType: 'json',
 //在ajax向后端controller發送數據，並且controller正確執行，正確返回之后執行success success: function(result) { if (result.code == web_status.SUCCESS) {
 // $(obj).summernote('editor.insertImage', result.data.url, result.data.fileName); } else { $.modal.alertError(result.msg); } }, error: function(error) { $.modal.alertWarning("圖片上傳失敗。"); } }); } /*校驗*/ $("#form-info-add").validate({ focusCleanup: true }); /*提交*/ function submitHandler() { if ($.validate.form()) { var sHTML = $('.summernote').summernote('code'); $("#feedbackContent").val(sHTML); $.operate.save(prefix + "/add", $('#form-info-add').serialize()); } } </script>

注意點：當summernote中添加表格時，數據庫不能保存標簽，只有純文本，這時需要在application.yml中添加一個配置：

# 排除鏈接（多個用逗號分隔）
excludes: /system/notice/*,/system/info*