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. 《一个 Go 程序系统线程暴涨的问题》结论

    原文地址:https://zhuanlan.zhihu.com/p/22474724 作者的结论没写好,我来说两句.. 结论: Docker swarm自己有个函数,叫setTcpUserTimeou ...

  2. JS和Android交互

    //本地webview写法 webview = (WebView) findViewById(R.id.webview); webview.loadUrl("http://192.168.1 ...

  3. MySQL查询缓存

    MySQL查询缓存 用于保存MySQL查询语句返回的完整结果,被命中时,MySQL会立即返回结果,省去解析.优化和执行等阶段. 如何检查缓存? MySQL保存结果于缓存中: 把SELECT语句本身做h ...

  4. SpringMvc 页面DATE传值问题

    页面传过来yyy-MM-dd格式的日期类型,springMVC是不认的. 解决办法: @DateTimeFormat(pattern="yyyy-MM-dd") 在类属性上加上注解 ...

  5. 使用Ogre::ManualObject 绘制自定义图形

    在ogre中如果需要进行自定义图形绘制可以使用ManualObject.例如绘制一个三角形的用法如下: SceneNode* pGridNode = m_pBaseNode->createChi ...

  6. Mac使用wireshark对移动设备抓包

    在系统偏好设置中,打开蓝牙共享网络,就能让移动设备通过连接蓝牙来访问网络,这个途径访问都会被wireshark所抓 然后捕获接口中可选 设置 筛选 为 http and (ip.src == 192. ...

  7. About SQLite

    About SQLite See Also... Features When to use SQLite Frequently Asked Questions Well-known Users Boo ...

  8. JTree使用

    package JTree; import java.awt.Component; import javax.swing.Icon; import javax.swing.JTree; import ...

  9. LoadRunner 11 安装及破解

    LoadRunner 11 安装及破解   前提条件: 内存:2G,硬盘空闲空间10G,安装完成后实际只占不到2G 支持winXP  SP3;32位与64位win7浏览器支持IE6-8,IE9,fir ...

  10. 用CorelDRAW等分分割图片的方法

    在CorelDRAW中,想要将图片等分分割可以通过放置容器来实现,根本不需要裁剪工具和辅助线.例如两等分:首先要建立确定等分的份数,建立长方形或正方形.然后把图片放置容器,调整位置,做无缝拼接就可以了 ...