http://www.jqcool.net/demo/201407/bootstrap-summernote/

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

更多参数请查看实例与官方文档

转载请注明：jQ酷 » 基于jquery的bootstrap在线文本编辑器插件Summernote

下载地址：本站下载 | 百度云 | 官方下载

Jquery的bootstrap在线文本编辑器插件Summernote的更多相关文章

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

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

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

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

  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. Bootstrap 可视化HTML编辑器，summernote

    Bootstrap 可视化HTML编辑器之summernote,用其官网上的介绍就是"Super Simple WYSIWYG editor",不过在我看来,与bootstrap中 ...

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

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

  7. javascript 在线文本编辑器

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

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

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

  9. Textarea - 百度富文本编辑器插件UEditor

    UEditor各种实例演示 Ueditor 是百度推出的一款开源在线 HTML 编辑器. 主要特点: 轻量级:代码精简,加载迅速. 定制化:全新的分层理念,满足多元化的需求.采用三层架构:1. 核心层 ...

随机推荐

  1. （2.1）servlet线程安全问题

    本文参考链接:http://www.yesky.com/334/1951334.shtml 摘 要:介绍了Servlet多线程机制,通过一个实例并结合Java 的内存模型说明引起Servlet线程不安 ...

  2. 微软 Dynamics AX 学习步骤

    第一步:了解到AX的架构,AOT结构,了解AOT中表,窗体,类,job,菜单,菜单项的基础开发.知道代码可以写在那里,每个对象以及对象内部的具体设置.如果你不了解类,继承,这些,那么就需要找一下讲述类 ...

  3. 加密解密(2)＊客户端，服务器，CA(Certificate Authority)，公钥，私钥，证书，签名，验证

    加密解密(2)*客户端,服务器,CA(Certificate Authority),公钥,私钥,证书,签名,验证 各角色比喻 客户端:通常为请求方,要验证服务器的身份. 服务器:通常为响应方,有时也要 ...

  4. 域名地址默认跳转到www(301重定向)

    要做这个操作之前,你首先必须肯定要有一个域名..... 然后域名指向了某一个外网主机地址,能正常访问网站 IIS7之后版本的看客继续往下看,IIS7之前的版本,请止步,我没有对之前的版本做过 首先确认 ...

  5. 将宿主机东西拷贝到dokcer容器中去

    1,获取容器名称或者id : docker ps 2,获取整个容器的id,其实键盘tag就可以补全的. docker inspect -f  '{{.Id}}'  步骤A获取的名称或者id 3,在主机 ...

  6. extern C的作用详解

    extern "C"的主要作用就是为了能够正确实现C++代码调用其他C语言代码.加上extern "C"后,会指示编译器这部分代码按C语言的进行编译,而不是C+ ...

  7. 《第一行代码》学习笔记15－UI（4）

    1.ListView允许用户通过手指上下滑动的方式将屏幕外的数据滚动到屏幕内,同时屏幕上原有的数据则会滚动出屏幕. 2.数组中的数据无法直接传递给ListView,得借助适配器来完成.此处使用Arra ...

  8. jdbc oracle 连接字符串

    1.普通SID方式 jdbc:oracle:thin:username/password@x.x.x.1:1521:SID 2.普通ServerName方式 jdbc:Oracle:thin:user ...

  9. poj1159 dp(滚动数组优化）

    H - 简单dp 例题扩展 Crawling in process... Crawling failed Time Limit:3000MS     Memory Limit:65536KB     ...

  10. android 开发中判断网络是否连接的代码

    在android的开发中,尤其是与访问网络有关的开发,都要判断一下手机是否连接上了网络,下面是一个判断是否连接网络的嗲吗片段: package cn.com.karl.util; import com ...