bootstrap外掛程式summernote 的使用__Java

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

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

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

<script src="includes/summernote/jquery-2.1.1.min.js"></script><script src="includes/summernote/bootstrap.min.js"></script><script src="includes/summernote/jquery.min.js"></script><script src="includes/summernote/bootstrap.js"></script><script src="includes/summernote/summernote.min.js"></script><script src="includes/summernote/lang/summernote-zh-CN.js"></script><link rel="stylesheet" type="text/css" href="includes/summernote/font-awesome/css/font-awesome.css"></link><link rel="stylesheet" type="text/css" href="includes/summernote/font-awesome/css/font-awesome.min.css"></link><link rel="stylesheet" type="text/css" href="includes/summernote/css/summernote.css"></link><link rel="stylesheet" type="text/css" href="includes/summernote/css/summernote-bs2.css"></link><link rel="stylesheet" type="text/css" href="includes/summernote/css/summernote-bs3.css"></link>

3、建一個div初始化div

<body><div id="summernote">這是summernote 富文字編輯器</div></body>

4、js初始化

<script type="text/javascript">//載入編輯器$(document).ready(function() {$('#summernote').summernote({height: 400,                minHeight: 300,           maxHeight: 500,      focus: true,     lang:'zh-CN',     // 重寫圖片上傳onImageUpload: function(files, editor, $editable) {sendFile(files[0],editor,$editable);}  });});//圖片上傳function sendFile(file, editor, $editable){var filename = false;try{filename = file['name'];} catch(e){filename = false;}if(!filename){$(".note-alarm").remove();}//以上防止在圖片在編輯器內拖拽引發第二次上傳導致的提示錯誤data = new FormData();data.append("file", file);data.append("key",filename); //唯一性參數$.ajax({data: data,type: "POST",url: "",cache: false,contentType: false,processData: false,success: function(url) {if(url=='200'){       alert("上傳失敗。");       return;   }else{   alert("上傳成功。");   }//alert(url);editor.insertImage($editable, url);//setTimeout(function(){$(".note-alarm").remove();},3000);},error:function(){alert("上傳失敗。");return;//setTimeout(function(){$(".note-alarm").remove();},3000);}  }); }</script>

5、給編輯器賦值

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

6、取值

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