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 （转）的更多相关文章

  1. 基于jquery的bootstrap在线文本编辑器插件Summernote

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  2. 基于jquery的bootstrap在线文本编辑器插件Summernote 简单强大

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  3. Jquery的bootstrap在线文本编辑器插件Summernote

    http://www.jqcool.net/demo/201407/bootstrap-summernote/ Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线 ...

  4. Bootstrap-基于jquery的bootstrap在线文本编辑器插件Summernote

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  5. 基于JQuery的简单富文本编辑器

    利用jQuery实现最简单的编辑器 我试了很多种方法,目前最快捷能够实现及其简单的编辑可以使用 document.execCommand("ForeColor", "fa ...

  6. 基于jquery、bootstrap的数据验证插件bootstrapValidator使用

    实时验证用户名是否存在,密码不能和用户名相同,两次密码需要相同,提交之后需要验证返回值: <form id="defaultForm" role="form&quo ...

  7. Summernote – 基于 Bootstrap 的文本编辑器

    Summernote 是一个简单,灵活,所见即所得(WYSIWYG)的编辑器,基于 jQuery 和 Bootstrap 构建.Summernote 所有主要的操作都支持快捷键,有一个功能强大的 AP ...

  8. 百度umeditor富文本编辑器插件扩展

    富文本编辑器在WEB开发中经常用到,个人比较喜欢用百度出的ueditor这款,ueditor这款本身支持插件扩展的,但是ueditor的mini版本 umeditor 就没有那么方便了,不过找了很多资 ...

  9. 基于jQuery点击图像居中放大插件Zoom

    分享一款基于jQuery点击图像居中放大插件Zoom是一款放大的时候会从原图像的位置以动画方式放大到画面中间,支持点击图像或者按ESC键来关闭效果.效果图如下: 在线预览   源码下载 实现的代码. ...

随机推荐

  1. Ubuntu系统日志

    一.指定系统日志路径到:  /var/log/messages 1.默认系统日志 root@HDController:~# tail -1000 /var/log/syslog Oct 20 06:2 ...

  2. http://blog.csdn.net/emoven/article/details/12999265

    http://blog.csdn.net/emoven/article/details/12999265

  3. [转载]How to Install Firefox 33 on CentOS, Redhat and Other Linux Distributions

    FROM: http://tecadmin.net/install-firefox-on-linux/ Firefox 33 has been released for Systems and And ...

  4. MySQL5.7 基于二进制包的安装

    1.MySQL5.7安装注意事项 1.在MySQL5.7中mysql_install_db已经不再推荐使用,建议改成mysqld-initialize 完成实力初始化.(mysql_install_d ...

  5. kali渗透综合靶机(一)--Lazysysadmin靶机

    kali渗透综合靶机(一)--Lazysysadmin靶机 Lazysysadmin靶机百度云下载链接:https://pan.baidu.com/s/1pTg38wf3oWQlKNUaT-s7qQ提 ...

  6. Vue 事件修饰符 阻止默认事件

    阻止默认事件: <a v-on:click.prevent="doThat"></a>

  7. 01-2制作U盘启动盘--装机助理工具

    在可以上网的电脑上执行制作启动盘的操作: 打开浏览器输入:http://www.zhuangjizhuli.com/upan.html 1.制作U盘启动盘: 2.下载 装机助理 软件 3.步骤: 第一 ...

  8. Android下缓存以及解决OOM问题

    1 http://my.oschina.net/ryanhoo/blog/93285 开篇来个简单的后续的慢慢补充 2 http://www.apkbus.com/forum.php?mod=view ...

  9. vim 窗口管理

    一.切分窗口 1. 水平切分  命令::sp file 快捷键:<Ctrl-W> + S 2. 垂直切分 命令: :vsp file  快捷键:<Ctrl-W> + V 二.关 ...

  10. C# 系统应用之注冊表使用具体解释

    在平时做项目时,我们有时会遇到注冊表的操作,比如前面我们须要获取IE浏览器地址栏的信息.获取"我的电脑"地址栏输入的目录信息.USB近期使用信息等.注冊表项是注冊表的基本组织单位, ...