bootstrap插件summernote 的使用
一、有时Java工程中会用到summernote 编辑器，下面简单说一下引用
1、将summernote 相应的文件放到工程中（webapp下面）
2、建一个jsp文件，在文件中引入相应的js、css文件
- <script src="includes/summernote/jquery-2.1.1.min.js"></script>
- <script src="includes/summernote/bootstrap.min.js"></script>
- <script src="includes/summernote/jquery.min.js"></script>
- <script src="includes/summernote/bootstrap.js"></script>
- <script src="includes/summernote/summernote.min.js"></script>
- <script src="includes/summernote/lang/summernote-zh-CN.js"></script>
- <link rel="stylesheet" type="text/css" href="includes/summernote/font-awesome/css/font-awesome.css"></link>
- <link rel="stylesheet" type="text/css" href="includes/summernote/font-awesome/css/font-awesome.min.css"></link>
- <link rel="stylesheet" type="text/css" href="includes/summernote/css/summernote.css"></link>
- <link rel="stylesheet" type="text/css" href="includes/summernote/css/summernote-bs2.css"></link>
- <link rel="stylesheet" type="text/css" href="includes/summernote/css/summernote-bs3.css"></link>
3、建一个div初始化div
- <body>
- <div id="summernote">这是summernote 富文本编辑器</div>
- </body>
4、js初始化
- <script type="text/javascript">
- //加载编辑器
- $(document).ready(function() {
- $('#summernote').summernote({
- height: 400,
- minHeight: 300,
- maxHeight: 500,
- focus: true,
- lang:'zh-CN',
- // 重写图片上传
- onImageUpload: function(files, editor, $editable) {
- sendFile(files[0],editor,$editable);
- }
- });
- });
- //图片上传
- function sendFile(file, editor, $editable){
- var filename = false;
- try{
- filename = file['name'];
- } catch(e){
- filename = false;
- }
- if(!filename){
- $(".note-alarm").remove();
- }
- //以上防止在图片在编辑器内拖拽引发第二次上传导致的提示错误
- data = new FormData();
- data.append("file", file);
- data.append("key",filename); //唯一性参数
- $.ajax({
- data: data,
- type: "POST",
- url: "",
- cache: false,
- contentType: false,
- processData: false,
- success: function(url) {
- if(url=='200'){
- alert("上传失败！");
- return;
- }else{
- alert("上传成功！");
- }
- //alert(url);
- editor.insertImage($editable, url);
- //setTimeout(function(){$(".note-alarm").remove();},3000);
- },
- error:function(){
- alert("上传失败！");
- return;
- //setTimeout(function(){$(".note-alarm").remove();},3000);
- }
- });
- }
- </script>
5、给编辑器赋值
- var text="${text}";
- $('#summernote').code(text);
6、取值
- var str= $('#summernote').code();
bootstrap插件summernote 的使用的更多相关文章
- 基于jquery的bootstrap在线文本编辑器插件Summernote
Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...
- Jquery的bootstrap在线文本编辑器插件Summernote
http://www.jqcool.net/demo/201407/bootstrap-summernote/ Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线 ...
- 20个超棒的jQuery bootstrap 插件
1. Bootstrap File Input Bootstrap3.x 的一个增强版的HTML 5 文件选择控件,可以对图片文件和文本文件进行预览,以及其他功能.该插件增强了这些插件,并且将组件的初 ...
- Bootstrap插件的使用
昨天,我偶然间发现了它——BootStrap插件,它是一一套功能强大的前端组件.说起来,我跟这插件还真算得上有缘,我本来并不是去找这个插件的,我本来是找BootStarp Paginator这个分页插 ...
- bootstrap插件学习-bootstrap.dropdown.js
bootstrap插件学习-bootstrap.dropdown.js 先看bootstrap.dropdown.js的结构 var toggle = '[data-toggle="drop ...
- bootstrap插件学习-bootstrap.modal.js
bootstrap插件学习-bootstrap.modal.js 先从bootstrap.modal.js的结构看起. function($){ var Modal = function(){} // ...
- Bootstrap -- 插件: 按钮状态、折叠样式、轮播样式
Bootstrap -- 插件: 按钮状态.折叠样式.轮播样式 1. 按钮(Button)插件:可以添加进一些交互,比如控制按钮状态. 如需向按钮添加加载状态,只需要简单地向 button 元素添加 ...
- Bootstrap -- 插件: 提示工具、弹出框、 警告框消息
Bootstrap -- 插件: 提示工具.弹出框. 警告框消息 1. 提示工具(Tooltip)插件:根据需求生成内容和标记. 使用提示工具: <!DOCTYPE html> <h ...
- Bootstrap -- 插件: 模态框、滚动监听、标签页
Bootstrap -- 插件: 模态框.滚动监听.标签页 1. 模态框(Modal): 覆盖在父窗体上的子窗体. 使用模态框: <!DOCTYPE html> <html> ...
随机推荐
- 学习RocketMQ （一） 安装并且启动MQ
1.使用RocketMQ 的 软件要求 64bit OS, Linux/Unix/Mac is recommended;64bit JDK 1.8+;Maven 3.2.xGit 1)安装Linux ...
- word中表格第一列序号的设置
表格中序号问题 1.新建一个表格.第一列选择编号后,编号后有tab,如下图 2.选中表格的编号,点击新建列表样式, 3.将编号后的字符改成nothing,在将单元格改成居中即可 4.在将单元格改成居中 ...
- ionic开发环境搭建之android及问题
1. 准备工作: a) 配置java开发环境 b) 配置安卓开发环境 注:下载android-studio后,可能会出现android一直在编译,出现这种情况,关掉你的as ,找到你的路 ...
- python坑之input获取字符串
space = input("set user quotation:").strip() quotation = int(space* 1024 * 1024) print(quo ...
- TIJ学习总结（1）- Java基础语法
TIJ(Thinking in Java)作为Java学习书籍里的"圣经",之前花两个月系统的捋了一遍,很多东西有种豁然开朗的感觉,入门之后读一遍TIJ,相信会有很多意外收获哦- ...
- Javascript中prototype属性
prototype作为JS相对比较难理解的一个知识点,在这里发表下自己的理解. 本文将包含以下几部分内容: 1.js prototype的简单介绍, 2.js构造函数的介绍, 3.prototype的 ...
- HTML Entity 字符实体
目录 1. HTML Entity 2. 字符与Entity Name的互相转换 3. 字符与Entity Number的互相转换 1. HTML Entity 1.1 介绍 在编写HTML页面时,需 ...
- nginx反向代理node.js获取客户端IP
使用Nginx做node.js程序的反向代理,会有这么一个问题:在程序中获取的客户端IP永远是127.0.0.1 如果想要拿到真实的客户端IP改怎么办呢? 一.首先配置Nginx的反向代理 proxy ...
- 设置SO_RECVBUF和SO_SENDBUF套接字选项
控制套接字的行为(如修改缓冲区的大小). int getsockopt(int sockfd,int level,int optname,void *optval,socklen_t *optlen) ...
- PHP防止SQL注入和XSS攻击
PHP防止SQL注入和XSS攻击PHP防范SQL注入是一个非常重要的安全手段.一个优秀的PHP程序员除了要能顺利的编写代码,还需要具备使程序处于安全环境下的能力.说到网站安全,就不得不提到SQL注入( ...