基于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键来关闭效果.效果图如下: 在线预览 源码下载 实现的代码. ...
随机推荐
- Spring（二）__bean的装配
Bean的装配: 在spring容器内拼凑bean叫做装配.装 配bean的时候,需要告诉容器哪些bean 以及容器如何使用依赖注入将它们配合在一起. 上下文定义文件的根元素是<beans> ...
- node-inspector调试工具应用
一.起因 想调试某些开源的nodejs项目,然后就选择了node-inspector插件. 他的优点: 1.可以借用chrome或firefox浏览器进行调试,与前端调试融合. 2.配置简单 二.必备 ...
- jquery右键菜单
点击这里体验效果 如果要屏蔽页面原来的右键菜单,请设置disable_native_context_menu:true 以下是源代码: <!DOCTYPE html> <html&g ...
- JS学习笔记9之event事件及其他事件
-->鼠标事件-->event事件对象-->默认事件-->键盘事件(keyCode)-->拖拽效果 一.鼠标事件 onclick ---------------鼠标点击事 ...
- Intent属性详解一 component属性
先看效果图 概述 在介绍Component之前,我们首先来了解ComponentName这个类:ComponentName与Intent同位于android.content包下,我们从Android官 ...
- SDWebImage的使用
- setItem:(CustomItem *)item { _item = item; // 占位图片 UIImage *placeholder = [UIImage imageNamed:@&qu ...
- CentOS 6编译安装lamp,并分别安装event模块方式和FPM方式的PHP
任务目标: 编译安装LAMP 要求(1) 安装一个模块化的PHP 要求(2) 安装一个FPM的PHP 注意PHP需要最后一个安装,因为需要前两者的支持. 所以这里的安装次序为 1.httpd 2.Ma ...
- URL无法显示某些特殊符号
URL无法显示某些特殊符号,这个时候就要使用编码了.编码的格式为:一个百分号,后面跟对应字符的ASCII(16进制)码值.例如 空格的编码值是"%20".(ASCII参考)URL中 ...
- [MySQL性能优化系列]LIMIT语句优化
1. 背景 假设有如下SQL语句: SELECT * FROM table1 LIMIT offset, rows 这是一条典型的LIMIT语句,常见的使用场景是,某些查询返回的内容特别多,而客户端处 ...
- Python字典的基本组成以及用法
#!/usr/bin/env python# -*- coding:utf-8 -*-"""老规矩以下方法环境2.7.x,请3.x以上版本的朋友记得格式print(输出内 ...