bootstrap插件summernote 的使用
一、有时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();