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'
  });
});

Summernote的更多相关文章

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

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

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

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

  3. Odoo Website 替换 Summernote 为第三方富文本编辑器

    随着用odoo的人越来越多,奇葩的需求也是越来越多.... 这不,有同学就想替换掉website forum里边的summernote控件,花了点时间研究了一下,先说结论:替换是可行的. 先上替换之后 ...

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

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

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

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

  6. summernote使用心得

    今日因项目需要所以使用了很有名气的富文本编辑器summernote,分享使用方法如下!填了一点坑,提供给需要的朋友借鉴! 直接转入我的前端网 地址: http://www.qdfuns.com/not ...

  7. 基于Metronic的Bootstrap开发框架经验总结（17）-- 使用 summernote插件实现HTML文档的编辑和图片插入操作

    在很多场合,我们需要在线编辑HTML内容,然后在页面上或者其他终端上(如小程序.APP应用等)显示,编辑HTML内容的插件有很多,本篇介绍基于Bootstrap的 summernote插件实现HTML ...

  8. bootstrap插件summernote 的使用

    一.有时Java工程中会用到summernote 编辑器,下面简单说一下引用 1.将summernote 相应的文件放到工程中(webapp下面) 2.建一个jsp文件,在文件中引入相应的js.css ...

  9. Vue.js中集成summernote

    首先引用summernote样式及js: <!--summernote css --> <link href="${ctxPath}/static/css/summerno ...

随机推荐

  1. C#编程语言与面向对象——类与对象

    由于ASP.NET技术是全面向对象的,因此,要掌握这一技术,必须具备有扎实的面向对象理论基础 使用C#编程,所有的程序代码几乎都放在类中,不存在独立于类中之外的函数,因此,类是面向对象编程的基本单元 ...

  2. jquery的dom操作

    DOM操作 $("p").appendTo("div");把p标签追加到div标签--中--后 $("p").prependTo(" ...

  3. 将list中的数据通过某一个字段来分类存储的实例

    现有学生表 public class Student { /** * 班级id */ private String classId; /** * 学生name */ private String na ...

  4. Spring 4.x Task 和 Schedule 概述（代java配置）

    转载请注明https://zhangzhaoyu.github.io/2016/09/30/spring-task-and-schedule-deep-research/ 摘要 在很多业务场景中,系统 ...

  5. 11.14 T2 小x的旅行(小x的旅行)

    1．小x的旅行   (travel.pas/c/cpp) [问题描述] 小x大学毕业后,进入了某个公司做了高层管理,他每年的任务就是检查这个公司在全国各地N个分公司的各种状况,每个公司都要检查一遍,且 ...

  6. 高级Linux SA需要会做的事情

    高级Linux SA需要会做的事情:linux---------系统安装(光盘或自动化安装)linux---------系统常用工具安装(sudo,ntp,yum,rsync,lrzsz syssta ...

  7. LeetCode 【Single Number I II III】

    Given an array of integers, every element appears twice except for one. Find that single one. 思路: 最经 ...

  8. 自定义windows新建菜单

    注册表下找到hkey_classes_root 找到想要新建的文件扩展名(.txt,.php,.html,.xml etc.) 创建名为ShellNew的键,再在其下添加NullType的项

  9. ValidateRequest问题

    1,在出现该错误的页面头部的page中加入ValidateRequest="false",那么该页面的任何一次Post提交都不会再验证提交内容的安全性.如: <%@ Page ...

  10. facebook darkforest围棋ai测试

    0.darkforest说明 darkforest是facebook田渊栋博士开发的深度学习围棋程序,2016的uec cup得了第二名(http://jsb.cs.uec.ac.jp/~igo/en ...