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

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: 300,                 // set editor height
 minHeight: null,             // set minimum height of editormaxHeight: 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');}
});

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

Bootstrap-基于jquery的bootstrap在线文本编辑器插件Summernote相关推荐

基于jquery的bootstrap在线文本编辑器插件Summernote
Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...
基于jquery的bootstrap在线文本编辑器插件Summernote （转）
Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...
bootstrap-wysiwyg: 迷你的Bootstrap的所见即所得的HTML富文本编辑器
为什么80%的码农都做不了架构师?>>> 日期:2013-5-1 来源:GBin1.com 在线演示如果你寻找一款boostrap的HTML富文本编辑器的话,这里推荐一款超 ...
node php知乎,基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
最近基于jQuery和Bootstrap框架实现了一个仿知乎动态列表的前端效果,基本实现了和知乎动态列表相同的效果.如下: 1.基本列表项 2.列表项全文展开.折叠(图中为展开第一项) 3.评论项展开 ...
基于 jQuery 与 Bootstrap 简单封装一个表格分页的组件
最近遇到一个需求:页面上的数据可能会有很多条,需要将数据分页展示在表格中.项目用的是 jQuery 和 Bootstrap,本来想直接用 bootstrapTable 插件,但是需要额外引入 js 文 ...
java html文本编辑器,基于Java WebHTML在线文本编辑器解决方案.doc
基于Java WebHTML在线文本编辑器解决方案基于Java WebHTML在线文本编辑器解决方案摘要:FckEditor作为众多优秀HTML在线文本编辑器之一,以其支持多语言的优势而受到众多国 ...
在线文本编辑器-ueditor实践
2019独角兽企业重金招聘Python工程师标准>>> 1.在线文本编辑器的作用? UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户 ...
怎样选择在线文本编辑器
在线文本编辑器就是我们平时在网上写博客,写文章时候用到的,比如这篇文章就是用在线文本编辑器写出来的.下面就讨论下几种常用的在线文本编辑器,以及他们的优点. FCKeditor FCKeditor是一款 ...
Bootstrap和jQuery炫酷音乐播放器插件
下载地址 vpplayer是一款基于jquery和bootstrap的音乐播放器插件,vpplayer音乐播放器小巧灵活,通过简单的配置即可在页面中生成漂亮的音乐播放器界面. dd:

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

Bootstrap-基于jquery的bootstrap在线文本编辑器插件Summernote相关推荐

最新文章

热门文章