一、有时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. openstack学习心得：glance 架构、概念、后端存储配置方式

    glance 架构 glance 服务概述 Image 服务 使得用户可以发现.注册.检索虚拟机镜像.它对外提供REST API使得你能够查询虚拟机镜像元数据和检索一个真实的镜像.你可以通过镜像服务将 ...

  2. 《天书夜读：从汇编语言到windows内核编程》八 文件操作与注册表操作

    1)Windows运用程序的文件与注册表操作进入R0层之后,都有对应的内核函数实现.在windows内核中,无论打开的是文件.注册表或者设备,都需要使用InitializeObjectAttribut ...

  3. cgg之数据类型

    所有例子都在64为操作系统 Linux 2.6.30 x86_64 x86_64 x86_64 GNU/Linux 1.1整数 在stdint.h中定义一些看上去更明确的整数类型 #ifndef __ ...

  4. 有序GUID

    背景 常见的一种数据库设计是使用连续的整数为做主键,当新的数据插入到数据库时,由数据库自动生成.但这种设计不一定适合所有场景. 随着越来越多的使用Nhibernate.EntityFramework等 ...

  5. 网页如何展示PPT文档

    最近再做一个新项目,其中有一个难点,就是如何在网页上展示PPT,我网上找到了几种方法,但是真正符合我目前这个项目的就只有这一种方法了,       使用PowerPoint to Flash将ppt文 ...

  6. 开源巨献：Google最热门60款开源项目

    文章整理于互联网.本文收集了 60款 Google 开源的项目,排名顺序按照 Github ★Star 数量排列. 0.机器学习系统 TensorFlow  ★Star 62533 TensorFlo ...

  7. 《java.util.concurrent 包源码阅读》11 线程池系列之ThreadPoolExecutor 第一部分

    先来看ThreadPoolExecutor的execute方法,这个方法能体现出一个Task被加入到线程池之后都发生了什么: public void execute(Runnable command) ...

  8. JavaFx新手教程-布局-StackPane

    cmlanche: 您叫什么名字? StackPane cmlanche: 您好,StackPane君,可以问下您在JavaFX家族中是什么地位? stackpane君: 我可重要了,我是在JavaF ...

  9. git的CentOS服务端安装和windows客户端的使用

    git的CentOS服务端安装和windows客户端的使用 此教程以 搬瓦工vps CentOS 6 x64 的系统为环境,搭建 git 服务端.windows 7 系统为客户端. git客户端 在W ...

  10. ACM HDU 1559 最大子矩阵

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1559 这道题 挺好的,当时想出解法的时候已经比较迟了.还是平时看得少. 把行与列都进行压缩.ans[i ...