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

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

极易安装

开源

自定义初化选项

支持快捷键

适用于各种后端程序言语

引入核心文件，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初始化插件

<p style="margin-top: 0px; margin-bottom: 16px; padding-top: 0px; padding-bottom: 0px; font-size: 16px; font-family: 微软雅黑, Tahoma; line-height: 25.6000003814697px;">$(document).ready(function() {</p><p style="margin-top: 0px; margin-bottom: 16px; padding-top: 0px; padding-bottom: 0px; font-size: 16px; font-family: 微软雅黑, Tahoma; line-height: 25.6000003814697px;">        $('#summernote').summernote();</p><p style="margin-top: 0px; margin-bottom: 16px; padding-top: 0px; padding-bottom: 0px; font-size: 16px; font-family: 微软雅黑, Tahoma; line-height: 25.6000003814697px;">    });</p>

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

预设参数

极简模式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);

  }

});

<span style="color: rgb(85, 85, 85); font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px;">onpaste</span>

$('#summernote').summernote({

  onpaste: function(e) {

    console.log('Called event paste');

  }

});

onImageUpload 可以重写图片上传句柄

IE9-10: DOMCharacterDataModified, DOMSubtreeModifie

Chrome, FF: inputd, DOMNodeInserted

$('#summernote').summernote({

  onChange: function(contents, $editable) {

    console.log('onChange:', contents, $editable);

  }

});

支持18国语言，使用时引入你需要的语言文件，lang值设为你需要的语言

<!-- include summernote-ko-KR -->

<!-- include summernote-ko-KR -->

<script src="lang/summernote-ko-KR.js"></script>

 

$(document).ready(function() {

  $('#summernote').summernote({

    lang: 'ko-KR' // default: 'en-US'

  });

});