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();

bootstrap插件summernote 的使用相关推荐

基于jquery的bootstrap在线文本编辑器插件Summernote
Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...
Bootstrap -- 插件: 按钮状态、折叠样式、轮播样式
Bootstrap -- 插件: 按钮状态.折叠样式.轮播样式 1. 按钮(Button)插件:可以添加进一些交互,比如控制按钮状态. 如需向按钮添加加载状态,只需要简单地向 button 元素添加 ...
Bootstrap插件
1 BootStrap插件使用规则 1.1 单个引入 JavaScript 插件可以单个引入(使用 Bootstrap 提供的单个 *.js 文件),或者一次性全部引入(使用 bootstrap.js ...
Bootstrap插件通过noConfllict 避免冲突
避免冲突 Bootstrap的插件,可以跟其它UI库的同名插件友好共存,为了防止Bootstrap插件被覆盖,Bootstrap的所有插件,均支持 noConflict 功能. 比如,在同一个页面中导 ...
Bootstrap学习（三）——Bootstrap 插件
Bootstrap学习(三)--Bootstrap 插件 Bootstrap 插件 Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动. 站点引用 Boots ...
基于jquery的bootstrap在线文本编辑器插件Summernote （转）
Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...
Bootstrap-基于jquery的bootstrap在线文本编辑器插件Summernote
Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...
黄聪： 50 个 Bootstrap 插件
Bootstrap是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等. 本文向你 ...
50 个 Bootstrap 插件
Bootstrap是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等. 本文向你 ...

bootstrap插件summernote 的使用

bootstrap插件summernote 的使用相关推荐

最新文章

热门文章