基于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' ]], ] }); |
预设参数
类型
方法 | |
---|---|
picture | Insert a picture |
link | Insert a hyperlink |
video | Insert a video |
table | Insert a table |
hr | Insert a horizontal rule |
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 |
ul | Make an un-ordered list |
ol | Make an ordered list |
paragraph | Set text alignment |
height | Set height of text |
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的简单富文本编辑器
利用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键来关闭效果.效果图如下: 在线预览 源码下载 实现的代码. ...
随机推荐
- 让用VS2012/VS2013编写的程序在XP中顺利执行
微软为了推销自家平台,默认配置下VS2012和VS2013编写的应用程序仅仅能在Vista/Win7/Win8上执行.但幸好还保留了生成XP程序的设置项.XP和Win2003的用户还是大量存在的,我们 ...
- @Component-@Resource-@Repository-@Service-@Controller的区别和理解-------springMVC
1.作用: @Component------------------------泛指组件,当组件不好归类的时候,我们可以使用这个注解进行标注.(Component-------成分; 组分; 零件) ...
- 往MySQL数据库datetime类型字段中插入数据库的当前时间
代码: StringBuilder sb = new StringBuilder(); sb.append(" insert into uosdetailfile ("); sb. ...
- Android Tabhost置于底部
方法一: <TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id=&qu ...
- Angular 学习笔记——模块之间的通讯
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...
- react-native 中使用 mobx
1. 介绍 1.1. 原理 React的render是 状态 转化为树状结构的渲染组件的方法而MobX提供了一种存储,更新 状态 的方法React 和 MobX都在优化着软件开发中相同的问题.Reac ...
- C语言结构体及函数传递数组參数演示样例
注:makeSphere()函数返回Sphere结构体,main函数中.调用makeSphere()函数,传递的第一个參数为数组,传递的数组作为指针.
- Hbase笔记:批量导入
工作中可能会有对HBase的复杂操作,我们现在对HBase的操作太简单了.复杂操作一般用HBaseScan操作,还有用框架对HBase进行复杂操作,iparler,sharker.我们说HBase是数 ...
- BigDecimal舍入模式使用及建议
1. 八种舍入模式 此节内容参考于 https://my.oschina.net/sunchp/blog/670909. JDK1.5发布的枚举 RoundingMode 对 BigDecimal 的 ...
- my_interface
import flask,osserver=flask.Flask(__name__) #当前这个python文件,当做一个服务 @server.route('/error',methods=['ge ...