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

    2014-08-19 分类: jquery 633阅读 0评论

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

    特点：

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

    极易安装

    开源

    自定义初化选项

    支持快捷键

    适用于各种后端程序言语

    使用方法

    使用html5文档

    1 <!DOCTYPE html>
2 <html>
3 ...
4 </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();

    使用参数初始化

    设定高度与焦点

    复制代码
    1 $('.summernote').summernote({
2 height: 300, // set editor height
3 minHeight: null, // set minimum height of editor
4 maxHeight: null, // set maximum height of editor
5 focus: true, // set focus to editable area after initializing summernote});
    复制代码

    设定高度后，如果内容高度超过设定高度将出现滚动条，如果没有设定高度则一直往下挣开。设定focus为true时，打开页面后焦点定位到编辑器中。

    自定义工具栏

    复制代码
     1 $('.summernote').summernote({
 2 toolbar: [
 3 //[groupname, [button list]]
 4 ['style', ['bold', 'italic', 'underline', 'clear']],
 5 ['font', ['strikethrough']],
 6 ['fontsize', ['fontsize']],
 7 ['color', ['color']],
 8 ['para', ['ul', 'ol', 'paragraph']],
 9 ['height', ['height']],
10 ]
11 });
    复制代码

     

    预设参数

    类型按钮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 $('.summernote').summernote({
2 airPopover: [
3 ['color', ['color']],
4 ['font', ['bold', 'underline', 'clear']],
5 ['para', ['ul', 'paragraph']],
6 ['table', ['table']],
7 ['insert', ['link', 'picture']]
8 ]
9 });
    复制代码

    释放Summernote

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

    取值与赋值

    复制代码
    //取值
var sHTML = $('.summernote').code();
//同一页面多个summernote时，取第二个的值
var sHTML = $('.summernote').eq(1).code();
//赋值
$('.summernote').code(sHTML);
    复制代码

    事件

    oninit

    复制代码
    1 $('#summernote').summernote({
2 oninit: function() {
3 console.log('Summernote is launched');
4 }
5 });
    复制代码

    onenter

    复制代码
    1 $('#summernote').summernote({
2 onenter: function(e) {
3 console.log('Enter/Return key pressed');
4 }
5 });
    复制代码

    onfocus

    复制代码
    1 $('#summernote').summernote({
2 onfocus: function(e) {
3 console.log('Editable area is focused');
4 }
5 });
    复制代码

    onblur

    复制代码
    1 $('#summernote').summernote({
2 onblur: function(e) {
3 console.log('Editable area loses focus');
4 }
5 });
    复制代码

    onkeyup

    复制代码
    1 $('#summernote').summernote({
2 onkeyup: function(e) {
3 console.log('Key is released:', e.keyCode);
4 }
5 });
    复制代码

    onkeydown

    复制代码
    1 $('#summernote').summernote({
2 onkeydown: function(e) {
3 console.log('Key is pressed:', e.keyCode);
4 }
5 });
    复制代码

    onpaste

     1 $('#summernote').summernote({  2 onpaste: function(e) { 3 console.log('Called event paste'); 4 } 5 }); 

    onImageUpload

    可以重写图片上传句柄

    复制代码
    1 $('#summernote').summernote({
2 onImageUpload: function(files, editor, $editable) {
3 console.log('image upload:', files, editor, $editable);
4 }
5 });
    复制代码

    onChange

    IE9-10: DOMCharacterDataModified, DOMSubtreeModified, DOMNodeInserted

    Chrome, FF: input

    复制代码
    1 $('#summernote').summernote({
2 onChange: function(contents, $editable) {
3 console.log('onChange:', contents, $editable);
4 }
5 });
    复制代码

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

    复制代码
    1 <!-- include summernote-ko-KR -->
2  <script src="lang/summernote-ko-KR.js"></script>
3  $(document).ready(function() {
4  $('#summernote').summernote({
5  lang: 'ko-KR' // default: 'en-US'
6  });
7  });
    复制代码

     

    下载地址：百度网盘 | 官方下载

    文章原地址：基于jquery的bootstrap在线文本编辑器插件Summernote

    网页插件
    posted @   webnote  阅读(633)  评论(0)  编辑  收藏  举报
    我要评论

    编辑推荐：
    · ASP.NET Core 模型验证消息的本地化新姿势
    · 对象命名为何需要避免'-er'和'-or'后缀
    · SQL Server如何跟踪自动统计信息更新?
    · AI与.NET技术实操系列：使用Catalyst进行自然语言处理
    · 分享一个我遇到过的“量子力学”级别的BUG。
    阅读排行：
    · C# 中比较实用的关键字，基础高频面试题！
    · .NET 10 Preview 2 增强了 Blazor 和.NET MAUI
    · 为什么AI教师难以实现
    · 如何让低于1B参数的小型语言模型实现 100% 的准确率
    · AI Agent爆火后，MCP协议为什么如此重要！
    点击右上角即可分享
    微信分享提示