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

特点：

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

极易安装

开源

自定义初化选项

支持快捷键

适用于各种后端程序言语

使用方法

使用HTML5文档

1
2
3
4
<!DOCTYPE html>
<html>
...
</html>

引入核心文件，Summernote需要几个JS库的支持，所以得先引入其它库

1
2
3
4
5
6
7
8
9
<!-- 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

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

写入JS初始化插件

1
2
3
$(document).ready(function() {
        $('#summernote').summernote();
    });

API

初始化Summernote

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

使用参数初始化

设定高度与焦点

1
2
3
4
5
6
7
$('.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时，打开页面后焦点定位到编辑器中。

自定义工具栏

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

预设参数

类型

方法
picture Insert a picture
link Insert a hyperlink
video Insert a video
table Insert a table
hr Insert a horizontal rule
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
ul Make an un-ordered list
ol Make an ordered list
paragraph Set text alignment
height Set height of text
fullscreen Toggle fullscreen editing mode
codeview Toggle wysiwyg and html editing mode
undo Undo
redo Redo
help Show help dialog

极简模式Air-mode

1
2
3
4
5
6
7
8
9
$('.summernote').summernote({
  airPopover: [
    ['color', ['color']],
    ['font', ['bold', 'underline', 'clear']],
    ['para', ['ul', 'paragraph']],
    ['table', ['table']],
    ['insert', ['link', 'picture']]
  ]
});

释放Summernote

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

取值与赋值

1
2
3
4
5
6
//取值
var sHTML = $('.summernote').code();
//同一页面多个summernote时，取第二个的值
var sHTML = $('.summernote').eq(1).code();
//赋值
$('.summernote').code(sHTML);

事件

oninit

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

onenter

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

onfocus

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

onblur

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

onkeyup

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

onkeydown

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

onpaste

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

onImageUpload

可以重写图片上传句柄

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

onChange

IE9-10: DOMCharacterDataModified, DOMSubtreeModified, DOMNodeInserted

Chrome, FF: input

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

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

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

转载于:https://www.cnblogs.com/xingyue1988/p/6622172.html

基于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. java html文本编辑器,基于Java WebHTML在线文本编辑器解决方案.doc

    基于Java WebHTML在线文本编辑器解决方案 基于Java WebHTML在线文本编辑器解决方案 摘要:FckEditor作为众多优秀HTML在线文本编辑器之一,以其支持多语言的优势而受到众多国 ...

  4. 14款前端常用的富文本编辑器插件

    富文本编辑器是一种可内嵌于浏览器,所见即所得的文本编辑器.它提供类似于Office Word 的编辑功能,方便那些不太懂html用户使用,富文本编辑器的应用非常广泛,它的历史与图文网页诞生的历史几乎一 ...

  5. 14款web前端常用的富文本编辑器插件

    富文本编辑器是一种可内嵌于浏览器,所见即所得的文本编辑器.它提供类似于Office Word 的编辑功能,方便那些不太懂html用户使用,富文本编辑器的应用非常广泛,它的历史与图文网页诞生的历史几乎一 ...

  6. 【精心挑选】10款基于 jQuery 的图片360度旋转插件

    之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考.图片旋转展示是一种 ...

  7. 【实践】简洁大方的summernote 富文本编辑器插件的用发——导入篇

    首先在这里吐槽一下,网上不少教程实在太坑人,错误的代码也敢发上来真的是误人子弟,这篇文章是我踩了无数个坑写上来的,可能也会有不足之处所以自己以后可能也会进行更正. 好吧,先说说最近的情况,忙着学校的期 ...

  8. 精心挑选10款基于 jQuery 的图片360度旋转插件

    之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考.图片旋转展示是一种 ...

  9. 在线文本编辑器-ueditor实践

    2019独角兽企业重金招聘Python工程师标准>>> 1.在线文本编辑器的作用? UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户 ...

最新文章

  1. jinfo 的相关使用 || 两个经典的参数： -Xms -Xmx
  2. 博士申请 | 上海财经大学语言智能实验室招收2022年秋季入学博士生
  3. 反转！奥斯卡般演技的果小云水果店耍了全世界！
  4. Eclipse中JBOSS莫名其妙自动关闭
  5. 案例研究设计与方法-罗伯_旭进口重新设计-用户体验案例研究
  6. java流的传递方式是_java中数据的传递方式到底是怎样的！
  7. 《springcloud超级入门》Spring Boot简介《五》
  8. python 函数结果缓存一段时间的装饰器
  9. 使用PHPExcel实现Excel文件的导入和导出(模板导出)
  10. A股数据采集、策略制定
  11. 【限时免费】真实数据操练，经典算法分析，实战NLP领域，只等你来！
  12. centos7卸载docker_新手快速入门Docker，轻松掌握Docker安装与使用
  13. C11中auto的使用
  14. 批量翻译软件免费【2022最新版】
  15. Idea插件开发-开发自己的第一款idea插件
  16. Oracle varchar2类型
  17. 马哥linux视频笔记,马哥linux学习笔记(示例代码)
  18. html5打印样式没有加载,cad打印样式不见了（cad没有打印样式表）
  19. python中matplotlib画图导入到word中如何保证分辨率
  20. Gym 100015H Hidden Code

热门文章

  1. visio中UML在活动图中指示判定
  2. 谈谈Unicode编码，简要解释UCS、UTF、BMP、BOM等名词
  3. 课外扩展：使用RADIUS来集中管理***服务器（2）
  4. LeetCode_Convert Sorted Array to Binary Search Tree（Java实现）
  5. 【正一专栏】读《艾思奇哲学文选第六卷》
  6. LaTeX参考文献中遇到错误：Missing $ inserted. [\printbibliography[heading=bibintoc]]
  7. 接上，优化滚动的效率
  8. 天线开路短路检测原理_变频空调通讯电路原理与元件级维修
  9. 怎么写显示商品图片_shopee商品描述怎么写,shopee商品排名靠前的是
  10. Customize a Scheduling Policy