天天看点
返回

bootstrap插件summernote 的使用

bootstrap插件summernote 的使用

一、有时java工程中会用到summernote 编辑器，下面简单说一下引用

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

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

[html]  view plain  copy

  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

  1. <body>  
  2.     <div id="summernote">这是summernote 富文本编辑器</div>  
  3. </body>  

4、js初始化

[html]  view plain  copy

  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.     var filename = false;  
  19.     try{  
  20.     filename = file['name'];  
  21.     } catch(e){  
  22.         filename = false;  
  23.     }  
  24.     if(!filename){  
  25.         $(".note-alarm").remove();  
  26.     }  
  27.     //以上防止在图片在编辑器内拖拽引发第二次上传导致的提示错误  
  28.     data = new FormData();  
  29.     data.append("file", file);  
  30.     data.append("key",filename); //唯一性参数  
  31.     $.ajax({  
  32.     data: data,  
  33.     type: "POST",  
  34.     url: "",  
  35.     cache: false,  
  36.     contentType: false,  
  37.     processData: false,  
  38.     success: function(url) {  
  39.         if(url=='200'){  
  40.             alert("上传失败！");  
  41.             return;  
  42.         }else{  
  43.             alert("上传成功！");   
  44.         }  
  45.         //alert(url);  
  46.     editor.insertImage($editable, url);  
  47.     //setTimeout(function(){$(".note-alarm").remove();},3000);  
  48.     },  
  49.     error:function(){  
  50.         alert("上传失败！");  
  51.         return;  
  52.         //setTimeout(function(){$(".note-alarm").remove();},3000);  
  53.         }  
  54.   });  
  55.  }  
  56. </script>  

5、给编辑器赋值

[html]  view plain  copy

  1. var text="${text}";   
  2. $('#summernote').code(text);  

6、取值

[html]  view plain  copy

  1. var str= $('#summernote').code();  
前端 summernote
上一篇: summernote图片上传
下一篇: 微服务是怎么一回事

继续阅读