一、有时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. SSM ：MyBatis与Spring的整合

    MyBatis与Spring的整合 一:Spring整合MyBatis的准备工作: (1.)在项目中加入Spring,ByBatis及整合相关的jar文件 (2.)建立开发目录结构,创建实体类 (3. ...

  2. percona_xtrabackup

    原理 percona xtrabackup备份过程主要分为以下几点: 1.xtrabackup在启动时会记住LSN(log sequence number),然后复制所有的数据文件 2.xtrabac ...

  3. Lucene入门-安装和运行Demo程序

    Lucene版本:7.1 一.下载安装包 https://lucene.apache.org/core/downloads.html 二.安装 把4个必备jar包和路径添加到CLASSPATH \lu ...

  4. java 中 “文件” 和 “流” 的简单分析

    java 中 FIle 和 流的简单分析 File类 简单File 常用方法 创建一个File 对象,检验文件是否存在,若不存在就创建,然后对File的类的这部分操作进行演示,如文件的名称.大小等 / ...

  5. Meteor的初步了解

    最近入职到新一家公司,技术总监给我介绍了一个新技术---Meteor,这是我之前没有接触过的一项技术,我查阅了相关资料,原来这是一项基于Node js的纯Javascript技术,然后给了我们一个项目 ...

  6. A workaround to change shared memory size for Docker containers in AWS ECS

    Issue Because of not supporting to specify the following docker run parameter, containers in ECS can ...

  7. 数细胞-swust oj

    数细胞(0964) 一矩形阵列由数字0到9组成,数字1到9代表细胞,细胞的定义为沿细胞数字上下左右还是细胞数字则为同一细胞,求给定矩形阵列的细胞个数.编程需要用到的队列及其相关函数已经实现,你只需要完 ...

  8. 在windows下vs使用pthread

    首先从http://sourceware.org/pthreads-win32/下载pthread 的windows安装包,我下的是pthread-w32-2-9-1-release.zip,其他版本 ...

  9. python 正则空格\xa0实录 与xpath取 div 里面的含多个标签的所有文字

    业余玩爬虫时,由原先的原生写法 改为 scrapy框架了,使用自带的selector时,xpath配合正则来抓取回复数和阅读数的时候,遇到的小问题,mark下. 首先获取到 我需要的数据块,(我用sc ...

  10. Nginx的知识分享，技术分享

    3. Nginx常用命令管理及升级 查看nginx进程 ps -ef|grep nginx 说明:nginx的进程由主进程和工作进程组成. 启动nginx nginx 启动结果显示nginx的主线程和 ...