Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器。Summernote非常的轻量级，大小只有30KB，支持Safari,Chrome,Firefox、Opera、Internet Explorer 9 +(IE8支持即将到来)。

特点：

世界上最好的WYSIWYG在线编辑器

极易安装

开源

自定义初化选项

支持快捷键

适用于各种后端程序言语

使用方法

下载地址：http://www.yyyweb.com/demo/inner-show/summernote.html

将下载下来的summernote文件解压，将解压的文件放入到项目中，显示如下：

然后在你需要调用的界面中引入核心文件，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，只需在body中加入一个DIV元素，写上ID

<div id="summernote">Hello Summernote</div>

写入JS初始化插件

$(document).ready(function() {

        $('#summernote').summernote();

    });

最终代码

<!DOCTYPE html>

<html lang="en">

<head>

    <title>

    </title>

    <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.min.js"></script>

    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">

    <script type="text/javascript" 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" rel="stylesheet">

    <link href="~/js/summernote/dist/summernote.css" rel="stylesheet" />

    <script type="text/javascript" src="~/js/summernote/dist/summernote.min.js"></script>

</head>

<body>

    <div id="summernote">Hello Summernote</div>

    <script type="text/javascript">

        $(document).ready(function () {

            $('#summernote').summernote();

        });

    </script>

</body>

</html>

API

初始化Summernote

$('.summernote').summernote();

使用参数初始化

设定高度与焦点

$('.summernote').summernote({

  height: ,                 // 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().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');

  }

});

详细文件参见：http://www.jqcool.net/bootstrap-summernote.html

Bootstrap-基于jquery的bootstrap在线文本编辑器插件Summernote的更多相关文章

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

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

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

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

  3. 基于jquery的bootstrap在线文本编辑器插件Summernote （转）

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

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

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

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

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

  6. javascript 在线文本编辑器

    javascript 在线文本编辑器实现代码. 效果例如以下: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcGhwZmVuZ2h1bw==/font/5 ...

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

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

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

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

  9. 基于jQuery select下拉框美化插件

    分享一款基于jQuery select下拉框美化插件.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下 ...

随机推荐

  1. Python中类的运算符重载

    这篇文章仅仅是总结性质的,待以后有时间的时候会针对比较难理解的部分补充一些例子. 构造和析构 __init__ __del__ 函数调用 __call__ 打印操作 __str__ __repr__ ...

  2. Java中double类型的数据精确到小数点后两位

    Java中double类型的数据精确到小数点后两位 多余位四舍五入,四种方法 一: double f = 111231.5585;BigDecimal b = new BigDecimal(f); d ...

  3. int 占一个机器字长

    int与short int是不一样的. C++标准规定,int占一个机器字长.在32位系统中int占32位,也就是4个字节, 而在老式的16位系统中,int占16位,即2个字节. 而C++标准中只限制 ...

  4. bzoj 1576: [Usaco2009 Jan]安全路经Travel 树链剖分

    1576: [Usaco2009 Jan]安全路经Travel Time Limit: 10 Sec  Memory Limit: 64 MB Submit: 665  Solved: 227[Sub ...

  5. IEEE会议排名（转载）

    不知道谁整理的,我就下了个word.所以就标注不了,引用的哪的了. Rank 1: SIGCOMM: ACM Conf on Comm Architectures, Protocols & A ...

  6. 利用MSF溢出攻击讲解

    msf的强大之处也就不做探讨了,虽然这些东西网上很多.但我想说说我的感受. 这次的演示是在BT5中远程攻击一台win2003 sp2 metasploit是4.3的 需要说明的一点是 现在的BT5中不 ...

  7. ECMall关于数据查询缓存的问题

    刚接触Ecmall的二次开发不久,接到一个任务.很常见的任务,主要是对数据库进行一些操作,其中查询的方法我写成这样: 01 function get_order_data($goods_id) 02 ...

  8. Java运算符（一）equals方法与“==”

    超类Object的equals只是比较两者之间的引用对象是否相同,这一点跟操作符“==”是一样的. 在基本数据类型中,“==”用于比较两者之间的值(内容)是否相等. 在引用类型中,“==”用于比较两者 ...

  9. CAS单点登录配置[4]：客户端配置

    本节介绍一下客户端如何配置,客户端配置没有服务端那么复杂... 客户端Tomcat配置 1 首先确认证书文件已经拷贝到Tomcat的目录下,我们新建两个客户端的web应用,分别命名为Client1,C ...

  10. 《ruby编程语言》笔记 1

    赋值: ruby支持并行赋值,即允许在赋值表达式中出现多余一个值和多于一个的变量: x,y=1,2a,b=b,ax,y,z=[1,2,3] (python同样可以正常上面的语句). Methods i ...