基于jquery的bootstrap在线文本编辑器插件Summernote
Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器。Summernote非常的轻量级，大小只有30KB，支持Safari,Chrome,Firefox、Opera、Internet Explorer 9 +(IE8支持即将到来)。
特点：
世界上最好的WYSIWYG在线编辑器
极易安装
开源
自定义初化选项
支持快捷键
适用于各种后端程序言语
使用方法
使用html5文档
<!DOCTYPE html>
<html>
...
</html>
引入核心文件，Summernote需要几个JS库的支持，所以得先引入其它库
<!-- include libries(jQuery, bootstrap, fontawesome) -->
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<!-- include summernote css/js-->
<link href="summernote.css" />
<script src="summernote.min.js"></script>
写入html，只需加入一个DIV元素，写上ID
<div id="summernote">Hello Summernote</div>
写入JS初始化插件
$(document).ready(function() {
$('#summernote').summernote();
});
API
初始化Summernote
$('.summernote').summernote();
使用参数初始化
设定高度与焦点
$('.summernote').summernote({
height: 300, // set editor height
minHeight: null, // set minimum height of editor
maxHeight: null, // set maximum height of editor
focus: true, // set focus to editable area after initializing summernote});
设定高度后，如果内容高度超过设定高度将出现滚动条，如果没有设定高度则一直往下挣开。设定focus为true时，打开页面后焦点定位到编辑器中。
自定义工具栏
$('.summernote').summernote({
toolbar: [
//[groupname, [button list]]
['style', ['bold', 'italic', 'underline', 'clear']],
['font', ['strikethrough']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']],
]
});
预设参数
| 类型 | 按钮id | 方法 |
|---|---|---|
| Insert |
picture |
Insert a picture |
|
link |
Insert a hyperlink |
|
|
video |
Insert a video |
|
|
table |
Insert a table |
|
|
hr |
Insert a horizontal rule |
|
| Style |
style |
Format selected block |
|
fontname |
Set font family |
|
|
fontsize |
Set font size |
|
|
color |
Set foreground and background color |
|
|
bold |
Toggle weight |
|
|
italic |
Toggle italic |
|
|
underline |
Toggle underline |
|
|
strikethrough |
Toggle strikethrough |
|
|
clear |
Clearing all styles |
|
| Layout |
ul |
Make an un-ordered list |
|
ol |
Make an ordered list |
|
|
paragraph |
Set text alignment |
|
|
height |
Set height of text |
|
| Misc |
fullscreen |
Toggle fullscreen editing mode |
|
codeview |
Toggle wysiwyg and html editing mode |
|
|
undo |
Undo |
|
|
redo |
Redo |
|
|
help |
Show help dialog |
极简模式Air-mode
$('.summernote').summernote({
airPopover: [
['color', ['color']],
['font', ['bold', 'underline', 'clear']],
['para', ['ul', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture']]
]
});
释放Summernote
$('.summernote').destroy();
取值与赋值
//取值
var sHTML = $('.summernote').code();
//同一页面多个summernote时，取第二个的值
var sHTML = $('.summernote').eq(1).code();
//赋值
$('.summernote').code(sHTML);
事件
oninit
$('#summernote').summernote({
oninit: function() {
console.log('Summernote is launched');
}
});
onenter
$('#summernote').summernote({
onenter: function(e) {
console.log('Enter/Return key pressed');
}
});
onfocus
$('#summernote').summernote({
onfocus: function(e) {
console.log('Editable area is focused');
}
});
onblur
$('#summernote').summernote({
onblur: function(e) {
console.log('Editable area loses focus');
}
});
onkeyup
$('#summernote').summernote({
onkeyup: function(e) {
console.log('Key is released:', e.keyCode);
}
});
onkeydown
$('#summernote').summernote({
onkeydown: function(e) {
console.log('Key is pressed:', e.keyCode);
}
});
onpaste
$('#summernote').summernote({ onpaste: function(e) { console.log('Called event paste'); } });
onImageUpload
可以重写图片上传句柄
$('#summernote').summernote({
onImageUpload: function(files, editor, $editable) {
console.log('image upload:', files, editor, $editable);
}
});
onChange
IE9-10: DOMCharacterDataModified, DOMSubtreeModified, DOMNodeInserted
Chrome, FF: input
$('#summernote').summernote({
onChange: function(contents, $editable) {
console.log('onChange:', contents, $editable);
}
});
支持18国语言，使用时引入你需要的语言文件，lang值设为你需要的语言
<!-- include summernote-ko-KR -->
<script src="lang/summernote-ko-KR.js"></script>
$(document).ready(function() {
$('#summernote').summernote({
lang: 'ko-KR' // default: 'en-US'
});
});
文章原地址：基于jquery的bootstrap在线文本编辑器插件Summernote
基于jquery的bootstrap在线文本编辑器插件Summernote的更多相关文章
- 基于jquery的bootstrap在线文本编辑器插件Summernote （转）
Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...
- 基于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在线 ...
- Bootstrap-基于jquery的bootstrap在线文本编辑器插件Summernote
Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...
- 基于JQuery的简单富文本编辑器
利用jQuery实现最简单的编辑器 我试了很多种方法,目前最快捷能够实现及其简单的编辑可以使用 document.execCommand("ForeColor", "fa ...
- 基于jquery、bootstrap的数据验证插件bootstrapValidator使用
实时验证用户名是否存在,密码不能和用户名相同,两次密码需要相同,提交之后需要验证返回值: <form id="defaultForm" role="form&quo ...
- Summernote – 基于 Bootstrap 的文本编辑器
Summernote 是一个简单,灵活,所见即所得(WYSIWYG)的编辑器,基于 jQuery 和 Bootstrap 构建.Summernote 所有主要的操作都支持快捷键,有一个功能强大的 AP ...
- 百度umeditor富文本编辑器插件扩展
富文本编辑器在WEB开发中经常用到,个人比较喜欢用百度出的ueditor这款,ueditor这款本身支持插件扩展的,但是ueditor的mini版本 umeditor 就没有那么方便了,不过找了很多资 ...
- 基于jQuery点击图像居中放大插件Zoom
分享一款基于jQuery点击图像居中放大插件Zoom是一款放大的时候会从原图像的位置以动画方式放大到画面中间,支持点击图像或者按ESC键来关闭效果.效果图如下: 在线预览 源码下载 实现的代码. ...
随机推荐
- AFNetworking 3.0 断点续传 使用记录
最近项目中用到了压缩包下载,使用AFNetworking 3.0 下载压缩包 支持断点续传 代码如下: #import "HDInternet_handler.h" #import ...
- Android UI:ListView -- SimpleAdapter
SimpleAdapter是扩展性最好的适配器,可以定义各种你想要的布局,而且使用很方便. layout : <?xml version="1.0" encoding=&qu ...
- CocoaPods安装及使用详情
CocoaPods是什么? 当你开发iOS应用时,会经常使用到很多第三方开源类库,比如JSONKit,SDWebImage等等.可能某个类库又用到其他类库,所以要使用它,必须得另外下载其他类库,而其他 ...
- Ubuntu14.04 Django Mysql安装部署全过程
Ubuntu14.04 Django Mysql安装部署全过程 一.简要步骤.(阿里云Ubuntu14.04) Python安装 Django Mysql的安装与配置 记录一下我的部署过程,也方便 ...
- Hadoop系列教程<一>---Hadoop是什么呢？
Hadoop适合应用于大数据存储和大数据分析的应用,适合于服务器几千台到几万台的集群运行,支持PB级的存储容量.Hadoop典型应用有:搜索.日志处理.推荐系统.数据分析.视频图像分析.数据保存等.但 ...
- 编写Javascript类库（jQuery版） - 进阶者系列 - 学习者系列文章
这些年主要关注于项目管理方面的工作,编码就比较少了.这几天比较空闲,就想把原来的经验沉淀下来,一个是做好记录,以后如果忘记了还能尽快找回来,第二个是写写博文,算是练练手笔吧. 言归正传,这次写的是Ja ...
- 触屏touchstart 与 click
设计效果:当手指点击或触摸红框线menuList之外的部分时,弹框menuList消失. 问题:在优化触屏版的时候发现如图问题,当menuList弹出,手指触摸屏幕向下滑动时,menuList弹框不消 ...
- SQL Server 2012 实现分页新语法
最近一直在看SQL Server的书,不过看的都是基础的查询流,查询在工作中用到的最多,所以能正确地查询出想要的数据也是很重要的嘛. 在书上看到在SQL Server 2012新增了一种实现分页的查询 ...
- eAccelerator、memcached、xcache、APC 等四个加速扩展的区别
折腾VPS的朋友,在安装好LNMP等Web运行环境后都会选择一些缓存扩展安装以提高PHP运行速度,常被人介绍的有eAccelerator.memcached.xcache.Alternative PH ...
- linux shell 比较文件夹内容 diff
diff -ruNa test1 test2 > test12.diff -r 比较子目录中的文件 -u 以合并的方式显示文件的不同 -N 比较目录时,若文件A仅出现在某个目录中,预设 ...