一、有时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. maven---settings.xml配置

    <?xml version="1.0" encoding="UTF-8"?> <settings xmlns="http://mav ...

  2. C# 中英文符号互转

    /// 转全角的函数(SBC case) ///       ///任意字符串 /// 全角字符串 ///       ///全角空格为12288,半角空格为32       ///其他字符半角(33 ...

  3. 设计模式的征途—9.组合（Composite）模式

    树形结构在软件中随处可见,比如操作系统中的目录结构,公司组织结构等等,如何运用面向对象的方式来处理这种树形结构是组合模式需要解决的问题.组合模式通过一种巧妙的设计方案来使得用户可以一致性地处理整个树形 ...

  4. mysql多个TimeStamp设置（转）

    原文地址:http://www.cnblogs.com/yjf512/archive/2012/11/02/2751058.html timestamp设置默认值是Default CURRENT_TI ...

  5. Upgrading an ASP.NET MVC 2 Project to ASP.NET MVC 3 Tools Update

    ASP.NET MVC 3 can be installed side by side with ASP.NET MVC 2 on the same computer, which gives you ...

  6. phpcms实现全站搜索

    如果制作的静态页面中有搜索功能,那么使用phpcms进行替换怎么替换呢?会不会越到很多的麻烦呢?接下来进行phpcms替换静态页面中的搜索功能. 第一步:搜索页面的form表单提交书写,form表单怎 ...

  7. ionic开发遇到的坑及总结

    前言 ionic是一个用来开发混合手机应用的,开源的,免费的代码库.可以优化html.css和js的性能,构建高效的应用程序,而且还可以用于构建Sass和AngularJS的优化.ionic会是一个可 ...

  8. alex python of day1

    Print("hello word!")#打印hello word!向python世界发生第一声呐喊,仪式很重要 定义变量 name="Alex Li" nam ...

  9. 了解Python列表的一些方法

    首先定义一个名字列表,然后使用print() BIF在屏幕上显示这个列表. 接下来,使用len() BIF得出列表中有多少个数据项,然后再访问并显示第2个数据项的值: 创建了列表之后,可以使用列表方法 ...

  10. 无法将类型为“System.DBNull”的对象强制转换为类型“System.String”

    在ERP中做业务类单据,有时候会遇到这样的报错. 无法将类型为"System.DBNull"的对象强制转换为类型"System.String"   去数据库中检 ...