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

  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. springmvc+mybatis+spring 整合源码项目

    A集成代码生成器 [正反双向(单表.主表.明细表.树形表,开发利器)+快速构建表单; freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本,处理类,service等 ...

  2. karma与webpack结合

    一.必备插件 1.babel:es6的语法支持 2.karma:测试框架 3.jasmine:断言框架 4.webpack:打包工具 5.karma-webpack:karma调用webpack打包接 ...

  3. 推荐15个最好用的 JavaScript 代码压缩工具

    JavaScript 代码压缩是指去除源代码里的所有不必要的字符,而不改变其功能的过程.这些不必要的字符通常包括空格字符,换行字符,注释以及块分隔符等用来增加可读性的代码,但并不需要它来执行. 在这篇 ...

  4. Sass-也许你想和CSS玩耍起来（上篇）

    我们努力,我们坚持,共勉! 众所周知,css其实不是一门编程语言,熟悉的人都知道css全称Cascading Style Sheets(层叠样式表)是一种用来表现HTML(标准通用标记语言的一个应用) ...

  5. AO安装需要Microsoft Visual Studio 2013?

    从接触ArcGIS9.2到 10.4,在不断升级的 过程中,既给我们带来了很多惊喜,也带来一些麻烦,因为ArcGIS版本不兼容.出于体验,安装了ArcGIS Desktop10.4,AO也得升到10. ...

  6. iOS之清除缓存

    //清除缓存按钮的点击事件 - (void)putBufferBtnClicked:(UIButton *)btn{ CGFloat size = [self folderSizeAtPath:NSS ...

  7. iOS用三种途径实现一方法有多个返回值

    以前觉得这种标题有点偏向于理论,实际开发中怎么会有这种诡异的需求,但是真正遇到了这种硬需求时觉得还是有那么点价值的,理论付诸了实践在此也就做了个整理. 以我私下开发中的一处代码为例,本意是希望有这么一 ...

  8. Android 学习心得 快速排序

    快速排序(Quicksort) 是对冒泡排序的一种改进,它的基本思想是:通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的所有数据都比另外一部分的所有数据都要小,然后再按此方法对这两部分数据分 ...

  9. 如何保证Service在后台不被kill

    如何保证Service在后台不被kill 相信很多Android开发者在面试过程中会经常被问到“如何保证Service在后台不被kill”这个问题,总结了下一些大神给的答案. 引用知乎Android ...

  10. weblogic安装注意事项_linux

    ➠更多技术干货请戳:听云博客 一.安装过程:参考“weblogic安装截屏(linux)” 注意事项:安装weblogic时,需要注意以下两点: 1.首先在安装目录下创建weblogic12文件夹 如 ...