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

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

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

  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

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




4、js初始化

  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、给编辑器赋值

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





6、取值

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

bootstrap插件summernote 的使用的更多相关文章

  1. 基于jquery的bootstrap在线文本编辑器插件Summernote

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  2. Jquery的bootstrap在线文本编辑器插件Summernote

    http://www.jqcool.net/demo/201407/bootstrap-summernote/ Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线 ...

  3. 20个超棒的jQuery bootstrap 插件

    1. Bootstrap File Input Bootstrap3.x 的一个增强版的HTML 5 文件选择控件,可以对图片文件和文本文件进行预览,以及其他功能.该插件增强了这些插件,并且将组件的初 ...

  4. Bootstrap插件的使用

    昨天,我偶然间发现了它——BootStrap插件,它是一一套功能强大的前端组件.说起来,我跟这插件还真算得上有缘,我本来并不是去找这个插件的,我本来是找BootStarp Paginator这个分页插 ...

  5. bootstrap插件学习-bootstrap.dropdown.js

    bootstrap插件学习-bootstrap.dropdown.js 先看bootstrap.dropdown.js的结构 var toggle = '[data-toggle="drop ...

  6. bootstrap插件学习-bootstrap.modal.js

    bootstrap插件学习-bootstrap.modal.js 先从bootstrap.modal.js的结构看起. function($){ var Modal = function(){} // ...

  7. Bootstrap -- 插件: 按钮状态、折叠样式、轮播样式

    Bootstrap -- 插件: 按钮状态.折叠样式.轮播样式 1. 按钮(Button)插件:可以添加进一些交互,比如控制按钮状态. 如需向按钮添加加载状态,只需要简单地向 button 元素添加 ...

  8. Bootstrap -- 插件: 提示工具、弹出框、 警告框消息

    Bootstrap -- 插件: 提示工具.弹出框. 警告框消息 1. 提示工具(Tooltip)插件:根据需求生成内容和标记. 使用提示工具: <!DOCTYPE html> <h ...

  9. Bootstrap -- 插件: 模态框、滚动监听、标签页

    Bootstrap -- 插件: 模态框.滚动监听.标签页 1. 模态框(Modal): 覆盖在父窗体上的子窗体. 使用模态框: <!DOCTYPE html> <html> ...

随机推荐

  1. C# Dapper 轻量ORM调试对SQLServer

    Dapper简介 Dapper只有一个代码文件,完全开源,你可以放在项目里的任何位置,来实现数据到对象的ORM操作,体积小速度快. 使用ORM的好处是增.删.改很快,不用自己写sql,因为这都是重复技 ...

  2. maven下的sqlserver配置jar包

    看了两天的maven,开始把之前做的ssm项目搭建成maven项目,结果在sqlserver的依赖包上受阻,sqlserver需要sqljdbc4.jar包,经过一系列百度教程才得以解决,现在总结一下 ...

  3. 阿里云RDS SQL Server 2008 R2 使用本地SQL备份文件还原全过程

    最近公司准备全面转向阿里云,写了好几个方案,最终决定购买一台ECS和一台RDS搭配使用.开始对阿里的RDS产品陌生,加上公司的数据库文件近20G,诸多担心,生怕产品买来了不能用,给公司造成损失.后来联 ...

  4. Python学习一：序列基础详解

    作者:NiceCui 本文谢绝转载,如需转载需征得作者本人同意,谢谢. 本文链接:http://www.cnblogs.com/NiceCui/p/7858473.html 邮箱:moyi@moyib ...

  5. netty 入门二 （传输bytebuf 或者pojo）

    基于流的数据传输:在基于流的传输(如TCP / IP)中,接收的数据被存储到套接字接收缓冲器中. 不幸的是,基于流的传输的缓冲区不是数据包的队列,而是字节队列. 这意味着,即使您将两个消息作为两个独立 ...

  6. [NOIP]玩具装箱

    题目:(非常经典的模拟赛题,适合动规入门的OIer) 简要分析:   动态规划,用一维数组 f[i] 表示从位置1 到 位置i 的最优花费 ,由于 f[i ] 以前的最优花费都是确定的,故只需要在 1 ...

  7. npoi导入导出

    NPOI是指构建在POI 3.x版本之上的一个程序,NPOI可以在没有安装Office的情况下对Word或Excel文档进行读写操作. NPOI是一个开源的Java读写Excel.WORD等微软OLE ...

  8. String的Intern方法

    jdk6 和 jdk7 下 intern 的区别 相信很多 JAVA 程序员都做做类似 String s = new String("abc")这个语句创建了几个对象的题目. 这种 ...

  9. JAVA基础1——字节&位运算

    占用字节数 & 取值范围 Java一共有8种基本数据类型(原始数据类型): 类型 存储要求 范围(包含) 默认值 包装类 int 4字节(32位) -2^31~ 2^31-1 0 Intege ...

  10. 变位词(0029)-swustoj

    变位词(0029)水题 变位词如果两个单词的组成字母完全相同,只是字母的排列顺序不一样,则它们就是变位词,两个单词相同也被认为是变位词.如tea 与eat , nic 与cin, ddc与dcd, a ...