Chinaunix首页 | 论坛 | 博客
  • 博客访问: 106310
  • 博文数量: 36
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 330
  • 用 户 组: 普通用户
  • 注册时间: 2014-08-18 23:16
文章分类
文章存档

2016年(7)

2015年(20)

2014年(9)

我的朋友

分类: Html/Css

2016-03-18 17:27:55

基于jquery的bootstrap在线文本编辑器插件Summernote(转)

极客来 GeekCome 2014-12-08 224 阅读

Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器。Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox、Opera、Internet Explorer 9 +(IE8支持即将到来)。 特点: 世界上最好的WYSIWYG在线编辑器 极易安装 开源 自定义初化选项 支持快捷键 适用于各种后端程序言语 使用方法 使用html5文档
<html>
...
html>
引入核心文件,Summernote需要几个JS库的支持,所以得先引入其它库
<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">
<link href="summernote.css" />
<script src="summernote.min.js">script>
  写入html,只需加入一个DIV元素,写上ID
<div id="summernote">Hello Summernotediv>
写入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值设为你需要的语言  
 
 
阅读(3253) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~