基于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键来关闭效果.效果图如下: 在线预览 源码下载 实现的代码. ...
随机推荐
- HTML5有特色的进度条
查看效果:http://keleyi.com/keleyi/phtml/html5/26.htm 完整代码如下: <!DOCTYPE html> <html> <head ...
- Android中通过线程实现更新ProgressDialog（对话进度条）
作为开发者我们需要经常站在用户角度考虑问题,比如在应用商城下载软件时,当用户点击下载按钮,则会有下载进度提示页面出现,现在我们通过线程休眠的方式模拟下载进度更新的演示,如图(这里为了截图方便设置对话进 ...
- Android原生json和fastjson的简单使用
android原生操作json数据 主要是两个类 JSONObject 操作对象 JONSArray操作json数组 对象转json //创建学生对象 Student student=new ...
- 长链接转换成短链接（iOS版本）
首先需要将字符串使用md5加密,添加NSString的md5的类别方法如下 .h文件 #import <CommonCrypto/CommonDigest.h> @interface NS ...
- 【代码笔记】iOS-下拉选项cell
一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> //加入头文件 #import "ComboBo ...
- [LoadRunner]LR11安装或破解时报错的解决方法
背景:在性能测试项目上,需要安装到LR11进行性能测试,而在安装时会出现安装运行环境失败,安装文件缺失等问题.现总结了上述问题,并给出以下解决方法: 问题1:安装LoadRunner时出现“计算机缺少 ...
- 使用PhoneGap开启移动开发之旅
移动市场风起云涌,只是好像和悲催的.net程序员隔绝.我们内心中一直期待的Windows Phone终究不能匹及windows, 随着时间的流逝,windows phone越来越像扶不起的阿斗,连微软 ...
- TFS源代码管理原则
1.工作开始初次打开解决方案是应向服务器请求更新代码.2.工作结束时,应向服务器签入最新代码,并保证解决方案能够编译通过.3.不要长时间签出项目或解决方案,当向项目添加新项目后为编辑任何程序代码时,应 ...
- IIS不能下载ini文件
1.打开IIS. 2.选择站点或者存放*.ini文件的目录,右键菜单中选择属性. 3.选择“HTTP头”选项卡. 4.点击“MINE类型”. 5.点击“新建”. 6.这是跳出一个对话框,在“扩展名”一 ...
- git 命令使用总结
聊下 git rebase -i 聊下git merge --squash 聊下git pull --rebase 聊下 git remote prune origin 聊下 git 使用前的一些注意 ...