富文本編輯器summernote的基本使用

summernote比較突出的優點就是能保持復制過來的東西的原有樣式，並且比較流暢。

官方文檔地址：https://summernote.org/getting-started

我是用到cdn引入

　　　　<!-- 插件引入 -->
        <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>
        <!--引入中文JS包-->
        <script src="https://cdn.bootcss.com/summernote/0.8.10/lang/summernote-zh-CN.js"></script>  //因為這個插件是國外的寫的，一定要引入這個中文包，不然編輯器是默認的英文

HTML

    <div id="summernote"></div>   //內容載體

JS

//        編輯器功能=====================================
         $("#summernote").summernote({
             lang : 'zh-CN',// 語言
            height : 496, // 高度
            minHeight : 300, // 最小高度
            placeholder : '請輸入文章內容', // 提示       
            // summernote自定義配置
            toolbar: [
              ['operate', ['undo','redo']],
              ['magic',['style']],
              ['style', ['bold', 'italic', 'underline', 'clear']],
              ['para', ['height','fontsize','ul', 'ol', 'paragraph']],
              ['font', ['strikethrough', 'superscript', 'subscript']],
              ['color', ['color']],
              ['insert',['picture','video','link','table','hr']],
              ['layout',['fullscreen','codeview']],
            ],
            callbacks : { // 回調函數
                // 上傳圖片時使用的回調函數   因為我們input選擇的本地圖片是二進制圖片，需要把二進制圖片上傳服務器，服務器再返回圖片url，就需要用到callback這個回調函數
                onImageUpload : function(files) { 
                    var form=new FormData();
                        form.append('myFileName',files[0])  //myFileName 是上傳的參數名，一定不能寫錯
                    $.ajax({
                        type:"post",
                        url:"${path}/Img/upload", //上傳服務器地址
                        dataType:'json',
                        data:form,
                        processData : false,
                           contentType : false,
                           cache : false,
                           success:function(data){
                            console.log(data.data)                            
                              $('#summernote').summernote('editor.insertImage',data.data);
                           }
                    })
                }
            }
        });

注意：

 $('#summernote').summernote('insertImage', url, filename); 官方文檔提供的圖片插入封裝函數，在本地環境下服務器返回的url並不能展示在編輯框內，所以不要懷疑這個函數的作用，當你放到生產環境的時候自然會展示在編輯框內，這個問題我花了一個下午才證明，希望不要再踩坑

 最終效果圖