基於bootstrap的文本編輯器組件：Summernote

時間 2019-12-06

標籤基於 bootstrap 文本編輯器組件 summernote 欄目 Bootstarp 简体版

原文原文鏈接

Summernote官網地址 ：https://summernote.org/css

這是官網的一個例子：html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Summernote</title>
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 
  <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.js"></script>
</head>
<body>
  <div id="summernote"><p>Hello Summernote</p></div>
  <script>
    $(document).ready(function() {
        $('#summernote').summernote();
    });
  </script>
</body>
</html>

效果圖：前端

最簡單的默認初始化組件的方式：jquery

在<body>添加一個容器<div>：web

<div id="summernote">Hello Summernote</div>

再用Jquery初始化該組件：ajax

$(document).ready(function() {
  $('#summernote').summernote();
});

咱們也能夠自定義組件，如自定義編輯框的高度：數據庫

$('#summernote').summernote({
  height: 300,                 // 定義編輯框高度
  minHeight: null,             // 定義編輯框最低的高度
  maxHeight: null,             // 定義編輯框最高德高度
 
});

咱們還能夠自定義工具欄：apache

 <!--工具欄-->
              toolbar: [
                <!--字體工具-->
                ['fontname', ['fontname']], //字體系列                                 
                ['style', ['bold', 'italic', 'underline', 'clear']], // 字體粗體、字體斜體、字體下劃線、字體格式清除       
                ['font', ['strikethrough', 'superscript', 'subscript']], //字體劃線、字體上標、字體下標   
                ['fontsize', ['fontsize']], //字體大小                                
                ['color', ['color']], //字體顏色
                
                <!--段落工具-->                
                ['style', ['style']],//樣式
                ['para', ['ul', 'ol', 'paragraph']], //無序列表、有序列表、段落對齊方式
                ['height', ['height']], //行高
                
                <!--插入工具-->    
                ['table',['table']], //插入表格    
                ['hr',['hr']],//插入水平線                
                ['link',['link']], //插入連接                
                ['picture',['picture']], //插入圖片                
                ['video',['video']], //插入視頻
                
                <!--其它-->
                ['fullscreen',['fullscreen']], //全屏
                ['codeview',['codeview']], //查看html代碼
                ['undo',['undo']], //撤銷
                ['redo',['redo']], //取消撤銷
                ['help',['help']], //幫助
              ],

其它的一些初始化設置：json

              lang:'zh-CN',  //設置中文，需引入中文插件summernote-zh-CN.js
              
              placeholder: 'write here...', //佔位符
              
              dialogsInBody: true,  //對話框放在編輯框仍是Body
               
              dialogsFade: true ,//對話框顯示效果
               
              disableDragAndDrop: true ,//禁用拖放功能
               
              shortcuts: false ,//禁用快捷鍵

還有回調函數：bootstrap

callbacks: {
    
  }

回調函數裏面的事件有 oninit，onenter，onfocus，onblur，onkeyup，onkeydown，onpaste,onImageUpload 等等，

這裏主要介紹上傳圖片觸發的事件 onImageUpload ：

插入圖片的時候，Summernote組件默認是將圖片以二進制形式展現的，若是以此方式將文本框的內容存儲到數據庫時，會致使數據庫數據量很大

這是summernote默認方式插入圖片時存儲到數據庫的字段：

因此這裏採用另外一個方法，就是將圖片上傳到服務器，上傳成功後回傳圖片的訪問地址到插入的圖片位置，展現圖片；

具體實現以下：

                                  callbacks: {  
                                      onImageUpload: function(file) {  //圖片默認以二進制的形式存儲到數據庫，調用此方法將請求後臺將圖片存儲到服務器，返回圖片請求地址到前端
                                                                  
                                            //將圖片放入Formdate對象中                                         
                                            var formData = new FormData();  
                                            //‘picture’爲後臺獲取的文件名，file[0]是要上傳的文件
                                            formData.append("picture", file[0]); 
                                            $.ajax({                            
                                                 type:'post',        
                                                 url:'請求後臺地址',                        
                                                 cache: false,
                                                 data:formData, 
                                                 processData: false,
                                                 contentType: false,
                                                 dataType:'text', //請求成功後，後臺返回圖片訪問地址字符串，故此以text格式獲取，而不是json格式
                                                 success: function(picture) {                                            
                                                   $('#summernote').summernote('insertImage',picture); 
                                                 },  
                                                 error:function(){                                                  
                                                    alert("上傳失敗");                                                     
                                                 } 
                                            });
                                      }  
                                  }

後臺處理請求存儲圖片到服務器，成功則返回圖片訪問地址：

注意：我這裏是將圖片上傳的真實地址和虛擬的圖片訪問地址在tomcat的server.xml中配置了映射關係，因此上傳成功後返回給前端的是虛擬的訪問地址；

@RequestMapping(value="contentFileUpload",method=RequestMethod.POST)
    @ResponseBody
    public String contentFileUpload(MultipartFile picture) {
    
        if (picture!=null && picture.getOriginalFilename()!=null && picture.getOriginalFilename().trim().length()>0) {  
                    
            /**
             * picture上傳路徑（+時間文件夾）
             */
            //真實的上傳根路徑
            String realUploadPath = 'D:/Program Files (x86)/apache-tomcat-8.5.16/webapps/file';
            //虛擬的文件訪問根路徑
            String fictitiousRoot = '/file'
             
            //創建以時間命名的文件夾
            SimpleDateFormat sdf=new SimpleDateFormat("/yyyy/MM/dd/");  
            String datePath = sdf.format(new Date());
            //最終真實路徑
            String realuUploadBrandPath = realUploadPath+"/content"+datePath;
            //最終虛擬訪問路徑
            String  fictitiousUploadBrandPath =fictitiousRoot +"/content"+datePath;
                                 
           // 上傳文件原始名稱  
           String originFileName = picture.getOriginalFilename();  
           // 新的文件名稱  
           String newFileName = UUID.randomUUID()+originFileName.substring(originFileName.lastIndexOf(".")); 
           
             
           //若是路徑文件夾不存在就建立  
           File dir=new File(realuUploadBrandPath);  
           if(!dir.exists()){  
               dir.mkdirs();  
           } 
                       
           // 新文件  
           File newFile = new File(realuUploadBrandPath+File.separator+newFileName);  
             
           // 將內存中的文件寫入磁盤  
           try {
                picture.transferTo(newFile);
            } catch (IllegalStateException | IOException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }  
             
           // 文件虛擬地址  
           String fictitiousFilePath =  fictitiousUploadBrandPath+newFileName;      
           return fictitiousFilePath;                    
       }
        
      return "false";    
        
    }

建議：真實的上傳根路徑應寫在properties配置文件中，方便往後地址的修改，同時虛擬的訪問根路徑也不該存儲到數據庫當中，只需存儲相對位置就能夠，將虛擬的訪問根路徑也寫在properties文件當中。

經過上面的方法處理後，在編輯框裏，圖片的展現方式：

獲取編輯框內容後，經過後臺存儲到數據庫；

獲取編輯框內容的方法：

var markupStr = $('#summernote').summernote('code');

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。