一、有时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. Java_数据交换_fastJSON_01_用法入门

    一.用法 1.序列化—将Object转为Json对象 Object data=JSON.toJSON( MyObject ); 注:本文的Object可以是Map.List.javaBean等 需求: ...

  2. Java--集合(一)

    一.前序     前几篇文章我结合数据结构说了一些常用的集合,但是我感觉那样可能不系统,于是乎想着重写,按照由整体到细节的方式去写,这样才能更好的把握集合,废话不多说开始吧: 二.集合框架      ...

  3. SUID,SGID,SBIT这些到底是什么

    SUID,SGID,SBIT这些都是文件的特殊权限. SUID(Set UID)文件执行过程中,用户拥有文件的root权限. SGID(Set GID)文件执行过程中,执行者拥有该文件的用户组的权限. ...

  4. C#自定义运行时窗体设计器Runtime FormDesigner

    写在前面:因为业务的需要,有时会使用到自定义运行时窗体设计器Runtime FormDesigner,实现的功能,就是IDE设计器的简化.设想一下,如果可以在程序运行时,再设计一个Form,然后编译代 ...

  5. 《天书夜读：从汇编语言到windows内核编程》六 驱动、设备、与请求

    1)跳入到基础篇的内核编程第7章,驱动入口函数DriverEnter的返回值决定驱动程序是否加载成功,当打算反汇编阅读驱动内核程序时,可寻找该位置. 2)DRIVER_OBJECT下的派遣函数(分发函 ...

  6. javaweb学习方案1

    一.JAVA环境变量的配置1.首先下载JDK JDK可以在Oracle(甲骨文)公司的官方网站http://www.oracle.com下载2.安装完成后查看JDK安装路径一般是C:\Program ...

  7. Samples for Parallel Programming with the .NET Framework

    The .NET Framework 4 includes significant advancements for developers writing parallel and concurren ...

  8. day01_HTML

    今日任务 网站信息页面案例 网站图片信息页面案例 网站友情链接页面案例 网站首页案例 网站后台页面案例 教学目标 了解什么是标记语言 了解HTML的框架标签 掌握HTML的主要标签(字体,图片,列表, ...

  9. c语言的数组

    1. 数组的基本概念 一个int类型的变量能保存一个人的年龄,如果想保存整个班的年龄呢? 1. 什么是数组 数组,从字面上看,就是一组数据的意思,没错,数组就是用来存储一组数据的 2. 数组的特点 ● ...

  10. SaltStack 安装介绍 01

    一.入门指南 1.1 SALTSTACK是什么? The backbone of Salt is the remote execution engine, which creates a high-s ...