基于jquery的bootstrap在线文本编辑器插件Summernote 简单强大
Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器。Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox、Opera、Internet Explorer 9 +(IE8支持即将到来)。
特点:
世界上最好的WYSIWYG在线编辑器
极易安装
开源
自定义初化选项
支持快捷键
适用于各种后端程序言语
使用方法
使用html5文档
1
2
3
4
|
<!DOCTYPE html> < html > ... </ html > |
引入核心文件,Summernote需要几个JS库的支持,所以得先引入其它库
1
2
3
4
5
6
7
8
9
|
<!-- 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
1
|
< div id = "summernote" >Hello Summernote</ div > |
写入JS初始化插件
1
2
3
|
$(document).ready( function () { $( '#summernote' ).summernote(); }); |
API
初始化Summernote
1
|
$( '.summernote' ).summernote(); |
使用参数初始化
设定高度与焦点
1
2
3
4
5
6
7
|
$( '.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时,打开页面后焦点定位到编辑器中。
自定义工具栏
1
2
3
4
5
6
7
8
9
10
11
12
|
$( '.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
1
2
3
4
5
6
7
8
9
|
$( '.summernote' ).summernote({ airPopover: [ [ 'color' , [ 'color' ]], [ 'font' , [ 'bold' , 'underline' , 'clear' ]], [ 'para' , [ 'ul' , 'paragraph' ]], [ 'table' , [ 'table' ]], [ 'insert' , [ 'link' , 'picture' ]] ] }); |
释放Summernote
1
|
$( '.summernote' ).destroy(); |
取值与赋值
1
2
3
4
5
6
|
//取值 var sHTML = $( '.summernote' ).code(); //同一页面多个summernote时,取第二个的值 var sHTML = $( '.summernote' ).eq(1).code(); //赋值 $( '.summernote' ).code(sHTML); |
事件
oninit
1
2
3
4
5
|
$( '#summernote' ).summernote({ oninit: function () { console.log( 'Summernote is launched' ); } }); |
onenter
1
2
3
4
5
|
$( '#summernote' ).summernote({ onenter: function (e) { console.log( 'Enter/Return key pressed' ); } }); |
onfocus
1
2
3
4
5
|
$( '#summernote' ).summernote({ onfocus: function (e) { console.log( 'Editable area is focused' ); } }); |
onblur
1
2
3
4
5
|
$( '#summernote' ).summernote({ onblur: function (e) { console.log( 'Editable area loses focus' ); } }); |
onkeyup
1
2
3
4
5
|
$( '#summernote' ).summernote({ onkeyup: function (e) { console.log( 'Key is released:' , e.keyCode); } }); |
onkeydown
1
2
3
4
5
|
$( '#summernote' ).summernote({ onkeydown: function (e) { console.log( 'Key is pressed:' , e.keyCode); } }); |
onpaste
1
2
3
4
5
|
$( '#summernote' ).summernote({ onpaste: function (e) { console.log( 'Called event paste' ); } }); |
onImageUpload
可以重写图片上传句柄
1
2
3
4
5
|
$( '#summernote' ).summernote({ onImageUpload: function (files, editor, $editable) { console.log( 'image upload:' , files, editor, $editable); } }); |
onChange
IE9-10: DOMCharacterDataModified, DOMSubtreeModified, DOMNodeInserted
Chrome, FF: input
1
2
3
4
5
|
$( '#summernote' ).summernote({ onChange: function (contents, $editable) { console.log( 'onChange:' , contents, $editable); } }); |
支持18国语言,使用时引入你需要的语言文件,lang值设为你需要的语言
1
2
3
4
5
6
7
8
|
<!-- 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
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、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键来关闭效果.效果图如下: 在线预览 源码下载 实现的代码. ...
- 基于jQuery select下拉框美化插件
分享一款基于jQuery select下拉框美化插件.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 源码下 ...
随机推荐
- Flask开发系列之数据库操作
Flask开发系列之数据库操作 Python数据库框架 我们可以在Flask中使用MySQL.Postgres.SQLite.Redis.MongoDB 或者 CouchDB. 还有一些数据库抽象层代 ...
- Python控制语句执行流程
if语句: if<条件>:#条件之后必须有“:”. <语句> if语句的三元运算符: <表达式1>if<条件>else<表达式2>:其语义 ...
- AIX系统的备份和恢复
1.AIX备份命令
- (转) httpclient对cookie的处理
session的保持是通过cookie来维持的,所以如果用户有勾选X天内免登录,这个session 就X天内一直有效,就是通过这个cookie来维护.如果没选X天内免登录,基本上就本次才能保持sess ...
- robots.txt防止向黑客泄露网站的后台和隐私
为了不让搜索引擎索引网站的后台页面或其它隐私页面,我们将这些路径在robots.txt文件中禁用了.但矛盾的是,robots.txt文件任何人都可以访问,包括黑客.为了禁止搜索引擎,我们把隐私泄露给了 ...
- dedecms织梦无法保存栏目内容的解决方法
最近使用DedeCms5.3和DedeCms5.5遇到了一个不可思议的问题:在添加栏目时IE内核的浏览器无法保存栏目内容.到网上搜索了半天没找到解决方法,查看DedeCms官方搜索到的结果是“栏目内容 ...
- 怎么画一条0.5px的边
编者按:本文由人人网FED发表于掘金,并已授权奇舞周刊转载 什么是像素? 像素是屏幕显示最小的单位,在一个1080p的屏幕上,它的像素数量是1920 1080,即横边有1920个像素,而竖边为1080 ...
- 利用angular4和nodejs-express构建一个简单的网站(十)—好友模块
上一章讲解了用户登录的相关代码.用户登录成功后,就会进入好友模块,在好友模块中会根据不同的用户ID显示相应的好友列表,点击好友列表中的单个好友就会进入编辑单个好友页面,对好友信息进行编辑.点击列表页面 ...
- 微信小程序-饮食日志_开发记录03
这段时间主要是收尾阶段. 美化界面,排版分部等. 并进行上传,审核. 环境部署一直出现问题,所以测试版食物查找查找不到. 主要问题是:https://的网页证书没有通过审核. 所以现在推行开发,调试版 ...
- Codeforces Round #568 (Div. 2) C2. Exam in BerSU (hard version)
链接: https://codeforces.com/contest/1185/problem/C2 题意: The only difference between easy and hard ver ...