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> ...
随机推荐
- Vue Elementui 如何让输入框每次自动聚焦
在项目优化中碰到一个小问题,在每次提示框显示的时候让提示框中的输入框聚焦.如下图.一般情况下提示框是隐藏的.点击了编辑才会弹出. 那么原生属性autofocus 只在模板加载完成时起作用,也就是说只有 ...
- js 根据身份证号获取性别，年龄，等
$(function(){ $("#corpOwnerIdno").blur(function(){ //获取输入身份证号码 ...
- 极简版ASP.NET Core学习路径及教程
绝承认这是一个七天速成教程,即使有这个效果,我也不愿意接受这个名字.嗯. 这个路径分为两块: 实践入门 理论延伸 有了ASP.NET以及C#的知识以及项目经验,我们几乎可以不再需要了解任何新的知识就开 ...
- List实现
1.元素添加 #include <stdio.h> #include <stdlib.h> struct ListNode{ struct ListNode* next; in ...
- cgg之类型转换
3.类型转换 3.1算术类型转换 编译器默认的隐式转换等级: long double >double >float >long long >long >int >c ...
- [Egret]长按图片分享、分享图片、本地存储
egret 分享有API可以把一个显示对象树渲染成一个位图纹理,我把它赋值给 HTML 的 Image 元素,就实现了图片的显示,在微信中,通过长按图片可以分享出去.当然在其他浏览器可以保存在本地. ...
- 如何使用webpack优化首屏渲染时间
其实说到性能优化,他的范围太广了,今天我们就只聊一聊通过webpack配置减少http请求数量这个点吧. 简单说下工作中遇到的问题吧,我们做的一个项目中首页用了十多张图片,每张图片都是一个静态资源,所 ...
- 华南师大 2017 年 ACM 程序设计竞赛新生初赛题解
题解 被你们虐了千百遍的题目和 OJ 也很累的,也想要休息,所以你们别想了,行行好放过它们,我们来看题解吧... A. 诡异的计数法 Description cgy 太喜欢质数了以至于他计数也需要用质 ...
- 使用asp.net mvc引擎开发插件系统
一.前言 我心中的插件系统应该是像Nop那样(更牛逼的如Orchard,OSGI.NET),每个插件模块不只是一堆实现了某个业务接口的dll,然后采用反射或IOC技术来调用,而是一个完整的mvc小应用 ...
- 【设计模式系列】之OO面向对象设计七大原则
1 概述 本章叙述面向向对象设计的七大原则,七大原则分为:单一职责原则.开闭原则.里氏替换原则.依赖倒置原则.接口隔离原则.合成/聚合复用原则.迪米特法则. 2 七大OO面向对象设计 2.1 单一 ...