jquery是前端框架嗎，Bootstrap-基于jquery的bootstrap在線文本編輯器插件Summernote-小白筆記-匯編語言學習筆記

jquery是前端框架嗎，Bootstrap-基于jquery的bootstrap在線文本編輯器插件Summernote

2023-10-07 阅读 24 评论 0

摘要：?Summernote是一個基于jquery的bootstrap超級簡單WYSIWYG在線編輯器。Summernote非常的輕量級，大小只有30KB，支持Safari,Chrome,Firefox、Opera、Internet Explorer 9 +(IE8支持即將到來)。特點：世界上最好的WYSIWYG在線編輯器 jquery是前端框架嗎

?Summernote是一個基于jquery的bootstrap超級簡單WYSIWYG在線編輯器。Summernote非常的輕量級，大小只有30KB，支持Safari,Chrome,Firefox、Opera、Internet Explorer 9 +(IE8支持即將到來)。

特點：

世界上最好的WYSIWYG在線編輯器

jquery是前端框架嗎。極易安裝

開源

自定義初化選項

支持快捷鍵

適用于各種后端程序言語

bootstrap分頁插件？使用方法

下載地址：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>

easyui和bootstrap，寫入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();

jquery 下拉框、使用參數初始化

設定高度與焦點

$('.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

jquery easyui、極簡模式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');}
});

bootstrap js、onenter

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

詳細文件參見：http://www.jqcool.net/bootstrap-summernote.html

原文链接：https://hbdhgg.com/1/123598.html

发表评论: