使用bootstrap-wysiwyg富文本編輯器
bootstrap-wysiwyg的介紹：http://www.bootcss.com/p/bootstrap-wysiwyg/ 。
bootstrap-wysiwyg的GitHub地址： https://github.com/mindmup/bootstrap-wysiwyg/ 。
如果下載了bootstrap-wysiwyg，如何使用bootstrap-wysiwyg其實(shí)可以參考index.html。
創(chuàng)新互聯(lián)公司是一家專(zhuān)業(yè)提供尼元陽(yáng)企業(yè)網(wǎng)站建設(shè),專(zhuān)注與成都網(wǎng)站建設(shè)、網(wǎng)站制作、html5、小程序制作等業(yè)務(wù)。10年已為尼元陽(yáng)眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專(zhuān)業(yè)的建站公司優(yōu)惠進(jìn)行中。
1.樣式
bootstrap-wysiwyg允許自定義工具條,本文使用bootstrap3實(shí)現(xiàn)樣式，字體圖標(biāo)使用Font Awesome。
工具條使用bootstrap3的組件按鈕工具欄<div class="btn-toolbar">。
如果上傳圖片的樣式有些小問(wèn)題，別著急，后面的js代碼會(huì)解決。
代碼：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="fontawesome/css/font-awesome.min.css"/>
<style>
.editor-container {/* 編輯器容器樣式 */
padding: 10px 20px 25px;
margin-bottom: 10px;
background-color: #eeeeee;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.btn-toolbar {
font-size: 0;
margin-top: 10px;
margin-bottom: 10px;
}
#editor {/* 編輯框樣式 */
max-height: 400px;
height: 400px;
background-color: white;
border-collapse: separate;
border: 1px solid rgb(204, 204, 204);
padding: 4px;
box-sizing: content-box;
-webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
overflow: scroll;
outline: none;
}
.btn-toolbar .btn{
/* 工具條里按鈕樣式，這個(gè)樣式其實(shí)是.btn-default的樣式，
Button按鈕之所以沒(méi)有直接加上.btn-default樣式是因?yàn)榘粹o選中后wysiwyg會(huì)給選中的按鈕加.btn-info樣式，
.btn-default和.btn-info同時(shí)存在樣式會(huì)沖突 */
color: #333;
background-color: #fff;
border-color: #ccc;
}
.btn-toolbar .btn-info {
/* 這個(gè)樣式其實(shí)是.btn-info的樣式，重寫(xiě)一遍是為了提高優(yōu)先級(jí)，
否則.btn-info的樣式會(huì)被.btn-toolbar .btn覆蓋，這個(gè)樣式要寫(xiě)在.btn-toolbar .btn之下 */
color: #fff;
background-color: #5bc0de;
border-color: #46b8da;
}
</style>
</head>
<body>
<div class="editor-container">
<div class="btn-toolbar" role="toolbar" data-role="editor-toolbar"
data-target="#editor">
<div class="btn-group" role="group">
<button type="button" class="btn dropdown-toggle"
data-toggle="dropdown" title="Font">
<i class="icon-font"></i><b class="caret"></b>
</button>
<ul class="dropdown-menu">
</ul>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn dropdown-toggle"
data-toggle="dropdown" title="Font Size">
<i class="icon-text-height"></i>?<b class="caret"></b>
</button>
<ul class="dropdown-menu">
<li><a data-edit="fontSize 5"><font size="5">Huge</font></a></li>
<li><a data-edit="fontSize 3"><font size="3">Normal</font></a></li>
<li><a data-edit="fontSize 1"><font size="1">Small</font></a></li>
</ul>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn" data-edit="bold"
title="Bold (Ctrl/Cmd+B)">
<i class="icon-bold"></i>
</button>
<button type="button" class="btn" data-edit="italic"
title="Italic (Ctrl/Cmd+I)">
<i class="icon-italic"></i>
</button>
<button type="button" class="btn" data-edit="strikethrough"
title="Strikethrough">
<i class="icon-strikethrough"></i>
</button>
<button type="button" class="btn" data-edit="underline"
title="Underline (Ctrl/Cmd+U)">
<i class="icon-underline"></i>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn" data-edit="insertunorderedlist"
title="Bullet list">
<i class="icon-list-ul"></i>
</button>
<button type="button" class="btn" data-edit="insertorderedlist"
title="Number list">
<i class="icon-list-ol"></i>
</button>
<button type="button" class="btn" data-edit="outdent"
title="Reduce indent (Shift+Tab)">
<i class="icon-indent-left"></i>
</button>
<button type="button" class="btn" data-edit="indent"
title="Indent (Tab)">
<i class="icon-indent-right"></i>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn" data-edit="justifyleft"
title="Align Left (Ctrl/Cmd+L)">
<i class="icon-align-left"></i>
</button>
<button type="button" class="btn" data-edit="justifycenter"
title="Center (Ctrl/Cmd+E)">
<i class="icon-align-center"></i>
</button>
<button type="button" class="btn" data-edit="justifyright"
title="Align Right (Ctrl/Cmd+R)">
<i class="icon-align-right"></i>
</button>
<button type="button" class="btn" data-edit="justifyfull"
title="Justify (Ctrl/Cmd+J)">
<i class="icon-align-justify"></i>
</button>
</div>
<div class="btn-group" role="group">
<div class="btn-group" role="group">
<button type="button" class="btn dropdown-toggle"
data-toggle="dropdown" title="Hyperlink">
<i class="icon-link"></i>
</button>
<div class="dropdown-menu">
<div class="input-group" >
<input class="form-control" placeholder="URL" type="text"
data-edit="createLink" /> <span class="input-group-btn">
<button class="btn" type="button">Add</button>
</span>
</div>
</div>
</div>
<button type="button" class="btn" data-edit="unlink"
title="Remove Hyperlink">
<i class="icon-cut"></i>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn"
title="Insert picture (or just drag & drop)" id="pictureBtn">
<i class="icon-picture"></i>
</button>
<input type="file" data-role="magic-overlay"
data-target="#pictureBtn" data-edit="insertImage" />
</div>
<div class="btn-group" role="group">
<button type="button" class="btn" data-edit="undo"
title="Undo (Ctrl/Cmd+Z)">
<i class="icon-undo"></i>
</button>
<button type="button" class="btn" data-edit="redo"
title="Redo (Ctrl/Cmd+Y)">
<i class="icon-repeat"></i>
</button>
</div>
</div>
<div id="editor"></div>
</div>
</body>
</html>2.功能
本文只實(shí)現(xiàn)了一些基本的功能。
添加js依賴(lài)。
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript"
src="bootstrap-wysiwyg/external/jquery.hotkeys.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript"
src="bootstrap-wysiwyg/bootstrap-wysiwyg.js"></script>添加js代碼。
<script>
$(function() {
// 初始化工具條
initToolbarBootstrapBindings();
$('#editor').wysiwyg();
});
// 初始化工具條
function initToolbarBootstrapBindings() {
// 字體樣式
var fonts = [ 'Serif', 'Sans', 'Arial', 'Arial Black', 'Courier',
'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact',
'Lucida Grande', 'Lucida Sans', 'Tahoma', 'Times',
'Times New Roman', 'Verdana' ],
fontTarget = $('[title=Font]').siblings('.dropdown-menu');
$.each(fonts,function(idx, fontName) {
fontTarget.append($('<li><a href="#" data-edit="fontName ' + fontName
+'" >' + fontName + '</a></li>'));
});
$('button[title]').tooltip({
container : 'body'
});
// .dropdown-menu下的input事件
$('.dropdown-menu input').click(function() {
return false;
})
.change(function() {
$(this).parent('.dropdown-menu').siblings('.dropdown-toggle').dropdown('toggle');
})
.keydown('esc', function() {
this.value = '';
$(this).change();
});
// [data-role=magic-overlay]的樣式
$('[data-role=magic-overlay]').each(function() {
var overlay = $(this), target = $(overlay.data('target'));
overlay.css('opacity', 0).css('position', 'absolute')
.offset(target.offset()).width(target.outerWidth())
.height(target.outerHeight());
});
};
</script>3.使用
獲取富文本編輯器的內(nèi)容，和獲取普通div內(nèi)容一樣。$("#editor").html();
獲取清除HTML標(biāo)簽后的內(nèi)容：$("#editor").cleanHtml();
附上效果圖：
項(xiàng)目下載地址：
https://gitee.com/luckiness/bootstrap-wysiwyg-demo
分享名稱(chēng)：使用bootstrap-wysiwyg富文本編輯器
文章起源：http://muchs.cn/article2/ijcsoc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、網(wǎng)站改版、手機(jī)網(wǎng)站建設(shè)、面包屑導(dǎo)航、外貿(mào)建站、標(biāo)簽優(yōu)化
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
- 網(wǎng)站域名注冊(cè)-域名注冊(cè)應(yīng)該注意哪些事項(xiàng)？ 2016-11-09
- 公司域名注冊(cè)解決方案 2021-08-18
- 域名注冊(cè)與域名解析 2016-08-31
- 域名注冊(cè)需要哪些注意事項(xiàng)？ 2016-05-31
- 域名注冊(cè)常見(jiàn)問(wèn)題解答 2022-09-19
- 重慶網(wǎng)絡(luò)公司: 低價(jià)不是網(wǎng)站建設(shè)和域名注冊(cè)的最優(yōu)選擇 2015-05-11
- 域名注冊(cè)的注冊(cè)陷阱，如保跳出域名注冊(cè)陷阱 2022-06-19
- 注冊(cè)域名應(yīng)該選擇企業(yè)還是個(gè)人？ 2016-08-19
- 網(wǎng)站空間虛擬主機(jī)空間虛擬主機(jī)配置域名注冊(cè)云服務(wù)器 2016-11-05
- 注冊(cè)域名會(huì)遇到哪些問(wèn)題？如何域名注冊(cè)？ 2021-02-26
- 建站或注冊(cè)域名前填寫(xiě)資料進(jìn)行備案！ 2016-12-12
- 淺析域名注冊(cè)時(shí)間與網(wǎng)站排名？ 2016-10-28