碼上快樂

相關內容    簡體    繁體

bootstrap插件summernote 的使用

本文轉載自   查看原文   2017-02-06 09:18   1445    java/ bootstrap插件summernote

 

一、有時Java工程中會用到summernote 編輯器，下面簡單說一下引用

1、將summernote 相應的文件放到工程中（webapp下面）

2、建一個jsp文件，在文件中引入相應的js、css文件

[html] view plain copy 在CODE上查看代碼片派生到我的代碼片
  1. <script src="includes/summernote/jquery-2.1.1.min.js"></script>  
  2. <script src="includes/summernote/bootstrap.min.js"></script>  
  3. <script src="includes/summernote/jquery.min.js"></script>  
  4. <script src="includes/summernote/bootstrap.js"></script>  
  5. <script src="includes/summernote/summernote.min.js"></script>  
  6. <script src="includes/summernote/lang/summernote-zh-CN.js"></script>  
  7. <link rel="stylesheet" type="text/css" href="includes/summernote/font-awesome/css/font-awesome.css"></link>  
  8. <link rel="stylesheet" type="text/css" href="includes/summernote/font-awesome/css/font-awesome.min.css"></link>  
  9. <link rel="stylesheet" type="text/css" href="includes/summernote/css/summernote.css"></link>  
  10. <link rel="stylesheet" type="text/css" href="includes/summernote/css/summernote-bs2.css"></link>  
  11. <link rel="stylesheet" type="text/css" href="includes/summernote/css/summernote-bs3.css"></link>  



3、建一個div初始化div

[html] view plain copy 在CODE上查看代碼片派生到我的代碼片
  1. <body>  
  2.     <div id="summernote">這是summernote 富文本編輯器</div>  
  3. </body>  


4、js初始化


[html] view plain copy 在CODE上查看代碼片派生到我的代碼片
  1. <script type="text/javascript">  
  2. //加載編輯器  
  3. $(document).ready(function() {  
  4.     $('#summernote').summernote({  
  5.         height: 400,                  
  6.         minHeight: 300,             
  7.         maxHeight: 500,        
  8.         focus: true,   
  9.         lang:'zh-CN',   
  10.         // 重寫圖片上傳  
  11.     onImageUpload: function(files, editor, $editable) {  
  12.         sendFile(files[0],editor,$editable);  
  13.     }  
  14.   });  
  15. });  
  16. //圖片上傳  
  17. function sendFile(file, editor, $editable){  
  18.       
  19.     var filename = false;  
  20.     try{  
  21.     filename = file['name'];  
  22.     } catch(e){  
  23.         filename = false;  
  24.     }  
  25.     if(!filename){  
  26.         $(".note-alarm").remove();  
  27.     }  
  28.       
  29.     //以上防止在圖片在編輯器內拖拽引發第二次上傳導致的提示錯誤  
  30.     data = new FormData();  
  31.     data.append("file", file);  
  32.     data.append("key",filename); //唯一性參數  
  33.   
  34.     $.ajax({  
  35.     data: data,  
  36.     type: "POST",  
  37.     url: "",  
  38.     cache: false,  
  39.     contentType: false,  
  40.     processData: false,  
  41.     success: function(url) {  
  42.         if(url=='200'){  
  43.             alert("上傳失敗！");  
  44.             return;  
  45.         }else{  
  46.             alert("上傳成功！");   
  47.         }  
  48.         //alert(url);  
  49.     editor.insertImage($editable, url);  
  50.     //setTimeout(function(){$(".note-alarm").remove();},3000);  
  51.     },  
  52.     error:function(){  
  53.         alert("上傳失敗！");  
  54.         return;  
  55.         //setTimeout(function(){$(".note-alarm").remove();},3000);  
  56.         }  
  57.   });  
  58.  }  
  59.   
  60. </script>  


5、給編輯器賦值

[html] view plain copy 在CODE上查看代碼片派生到我的代碼片
  1. var text="${text}";   
  2. $('#summernote').code(text);  



6、取值

[html] view plain copy 在CODE上查看代碼片派生到我的代碼片
    1. var str= $('#summernote').code(); 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 基於Metronic的Bootstrap開發框架經驗總結（17）-- 使用 summernote插件實現HTML文檔的編輯和圖片插入操作 基於jquery的bootstrap在線文本編輯器插件Summernote （轉） summernote-詳細使用 bootstrap DataTable 插件的使用 Bootstrap插件的使用 bootstrap插件—ystep使用 Summernote – 基於 Bootstrap 的文本編輯器 Bootstrap Summernote 圖片上傳服務器 Summernote Thymeleaf使用bootstrap及其bootstrap相關插件（二）
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM