基于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键来关闭效果.效果图如下: 在线预览 源码下载 实现的代码. ...
随机推荐
- 使用eclipse作为python开发工具安装旧版pydev
在Eclipse中: Help->Install New Software add之后输入的链接地址 https://dl.bintray.com/fabioz/pydev/old/ 如果使用从 ...
- AMD and CMD are dead之KMDjs内核之依赖分析
有人说js中有三座大三:this.原型链和scope tree,搞懂了他们就算是js成人礼.当然还有其他不同看法的js成人礼,如熟悉js的:OOP.AP.FP.DOP.AOP.当然还听说一种最牛B的j ...
- [deviceone开发]-日程日历示例
一.简介 用户Wang利用Gridview和其它组件绘制的日历和任务,基本实现一个完整的在线日程管理功能.另外还封装了很多js对象,非常值得参考学习.二.效果图 三.相关下载 https://gith ...
- [python]沪深龙虎榜数据导入通达信的自选板块，并标注于K线图上
将沪深龙虎榜数据导入通达信的自选板块,并标注于K线图上 原理:python读取前一次处理完的计算5日后涨跌幅输出的csv文件 文件名前加"[paint]" 安照通达信的画图文件和板 ...
- 【翻译】理念:无冲突的扩展本地DOM原型
菜鸟翻译,望大家多多指正哈 原文:http://lea.verou.me/2015/04/idea-extending-native-dom-prototypes-without-collisions ...
- 网站 robots.txt 文件编写
网站 robots.txt 文件编写 Intro robots.txt 是网站根目录下的一个纯文本文件,在这个文件中网站管理者可以声明该网站中不想被robots访问的部分,或者指定搜索引擎只收录指定的 ...
- UIWindow
title: UIWindow相关知识date: 2016-1-21 20:50categories: IOS tags: UIWindow 小小程序猿我的博客:http://daycoding.co ...
- 【原】iOS动态性(三) Method Swizzling以及AOP编程：在运行时进行代码注入
概述 今天我们主要讨论iOS runtime中的一种黑色技术,称为Method Swizzling.字面上理解Method Swizzling可能比较晦涩难懂,毕竟不是中文,不过你可以理解为“移花接木 ...
- 记CentOS-7-x86_64-DVD-1503与Windows7单硬盘双系统的安装
我最初的设想是:Win引导CentOS,最后却变成了CentOS引导Win了.算是‘弄拙成巧’了吧. 因为我打算用U盘刻录镜像直接从U盘启动,所以不需要网上一些教程里面的繁琐的win下引导CentOS ...
- 归档—监控ORACLE数据库告警日志
ORACLE的告警日志里面包含许多有用的信息,尤其是一些ORACLE的ORA错误信息,所以有必要及时归档.监控数据库告警日志的ORA错误,及时提醒数据库管理员DBA处理这些错误信息,那么我们首先来看看 ...