使用bootstrap-wysiwyg富文本編輯器
阿新 • • 發佈：2018-09-06
如果 rep function contain java def style rgb color bootstrap-wysiwyg的介紹：http://www.bootcss.com/p/bootstrap-wysiwyg/ 。
bootstrap-wysiwyg的GitHub地址： https://github.com/mindmup/bootstrap-wysiwyg/ 。
如果下載了bootstrap-wysiwyg，如何使用bootstrap-wysiwyg其實可以參考index.html。
代碼：
bootstrap-wysiwyg的GitHub地址： https://github.com/mindmup/bootstrap-wysiwyg/ 。
如果下載了bootstrap-wysiwyg，如何使用bootstrap-wysiwyg其實可以參考index.html。
1.樣式
bootstrap-wysiwyg允許自定義工具條,本文使用bootstrap3實現樣式，字體圖標使用Font Awesome。
工具條使用bootstrap3的組件按鈕工具欄<div class="btn-toolbar">。
代碼：
<!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{ /* 工具條裏按鈕樣式，這個樣式其實是.btn-default的樣式， Button按鈕之所以沒有直接加上.btn-default樣式是因為按鈕選中後wysiwyg會給選中的按鈕加.btn-info樣式， .btn-default和.btn-info同時存在樣式會沖突 */ color: #333; background-color: #fff; border-color: #ccc; } .btn-toolbar .btn-info { /* 這個樣式其實是.btn-info的樣式，重寫一遍是為了提高優先級， 否則.btn-info的樣式會被.btn-toolbar .btn覆蓋，這個樣式要寫在.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" style="margin: 0 5px; min-width: 200px;"> <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.功能
本文只實現了一些基本的功能。
添加js依賴。
<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
+‘" style="font-family:\‘‘+ 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.使用
獲取富文本編輯器的內容，和獲取普通div內容一樣。$("#editor").html();
獲取清除HTML標簽後的內容：$("#editor").cleanHtml();
附上效果圖：
項目下載地址：
https://gitee.com/luckiness/bootstrap-wysiwyg-demo
使用bootstrap-wysiwyg富文本編輯器