Bootstrap--富⽂本编辑器bootstrap-wysiwyg的使⽤⽅法
最近公司需要做⼀个⽂本编辑器，由于我们使⽤的bootstrap的框架，所以选择了使⽤bootstrap-wysiwyg的轻量级的插件，研究这个插件花费了我⼀些时间，接下来记录我⾛过的坑，希望对⼤家有⽤：
1.需要在index.html页⾯引⼊的css⽂件：
<link href="twitter.github/bootstrap/assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<link href="netdna.bootstrapcdn/twitter-bootstrap/2.3.1/-icons.min.css" rel="stylesheet">
<link href="netdna.bootstrapcdn/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="netdna.bootstrapcdn/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
<link href="index.css" rel="stylesheet">
这是官⽅⽂档上引⽤的css⽂件，都是⽹络获取的，你可以下载到你本地，这加载更快；
2.需要在index.html页⾯引⼊的js⽂件：
<script src="cdn.bootcss/jquery/1.9.1/jquery.min.js"></script>
<!--键盘事件-->
<script src="mindmup.s3.amazonaws/lib/jquery.hotkeys.js"></script>
<script src="cdn.bootcss/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="bootstrap-wysiwyg.js"></script>
3.在你需要添加⽂本编辑器的html地⽅加上⼀下代码：
<div ></div>
<!--这⾥加上是为了让提⽰信息显⽰不然会被遮挡-->
<div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" title="Font"><i class="icon-font"></i><b class="caret"></b></a>
<ul class="dropdown-menu"> </ul>
</div>
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" title="Font Size"><i class="icon-text-height"></i> <b class="caret"></b></a> <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">
<a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="icon-bold"></i></a> <!--加粗-->
<a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="icon-italic"></i></a><!-- 斜体-->
<a class="btn" data-edit="strikethrough" title="Strikethrough"><i class="icon-strikethrough"></i></a><!-- 删除线-->
<a class="btn" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i class="icon-underline"></i></a><!-- 下划线-->
</div>
<div class="btn-group">
<a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="icon-list-ul"></i></a><!-- 加点-->
<a class="btn" data-edit="insertorderedlist" title="Number list"><i class="icon-list-ol"></i></a><!-- 数字排序-->
<a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="icon-indent-left"></i></a><!-- 减少缩进-->
<a class="btn" data-edit="indent" title="Indent (Tab)"><i class="icon-indent-right"></i></a><!--增加缩进-->
</div>
<div class="btn-group">
<a class="btn" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)"><i class="icon-align-left"></i></a><!--左对齐-->
<a class="btn" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"><i class="icon-align-center"></i></a><!--居中-->
<a class="btn" data-edit="justifyright" title="Align Right (Ctrl/Cmd+R)"><i class="icon-align-right"></i></a><!--右对齐-->
<a class="btn" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)"><i class="icon-align-justify"></i></a><!--垂直对齐-->
</div>
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" title="Hyperlink"><i class="icon-link"></i></a><!-- 链接-->
<div class="dropdown-menu input-append">
<input class="span2" placeholder="URL" type="text" data-edit="createLink"/>
<button class="btn" type="button">Add</button>
</div>
<a class="btn" data-edit="unlink" title="Remove Hyperlink"><i class="icon-cut"></i></a>
</div>
<div class="btn-group">
<a class="btn" title="Insert picture (or just drag & drop)" id="pictureBtn"><i class="icon-picture"></i></a>
<input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" />
</div>
<div class="btn-group">
<a class="btn" data-edit="undo" title="Undo (Ctrl/Cmd+Z)"><i class="icon-undo"></i></a><!--撤销-->
<a class="btn" data-edit="redo" title="Redo (Ctrl/Cmd+Y)"><i class="icon-repeat"></i></a><!--恢复-->
</div>
<input type="text" data-edit="inserttext" id="voiceBtn" x-webkit-speech="">
</div>
<div id="editor">
Go ahead…
</div>
我们实际上是在这个id=‘editor’的div中编辑，你要获取器内容，直接获取其的 $('#editor').html() ，要清除内容则使⽤$('#editor').cleanHtml()；
显⽰在页⾯上的样式应该是这样的：
4.到这⾥需要在js代码中加上这样的代码：
<script>
$(function(){
易语言代码解析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 data-edit="fontName ' + fontName +'" >'+fontName + '</a></li>'));
});
$('a[title]').tooltip({container:'body'});
$('.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]').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());
});
$('#voiceBtn').hide();
if ("onwebkitspeechchange" ateElement("input")) {
var editorOffset = $('#editor').offset();
$('#voiceBtn').css('position','absolute').offset({top: p, left: editorOffset.left+$('#editor').in
nerWidth()-35});
} else {
$('#voiceBtn').hide();
}
};
function showErrorAlert (reason, detail) {
var msg='';
if (reason==='unsupported-file-type') {
msg = "Unsupported format " +detail;
} else {
console.log("error uploading file", reason, detail);
}
$('<div class="alert"> <button type="button" class="close" data-dismiss="alert">×</button>'+
'<strong>File upload error</strong> '+msg+' </div>').prependTo('#alerts');
};
initToolbarBootstrapBindings();
$('#editor').wysiwyg({ fileUploadError: showErrorAlert} );
});
</script>
6.到这⾥这个简单的⽂本编辑就可以⽤了，但是我们怎么上传数据，包括⽂件上传，在我们的项⽬中，我们的需求是把editor的div中的内容全部上传到服务器，在服务器⽣成Html⽂件的，⽽照⽚或者⽂件上传是在这个内容上传之前先上传到服务的，因为⽂章的中的照⽚地址要是照⽚上传到服务器的地址，这⾥我们就需要做⼀些改动了，在这之前我们先需要解读⼀下关于引⼊的bootstrap-wysiwyg.js⽂件：
/* github/mindmup/bootstrap-wysiwyg */
/*global jQuery, $, FileReader*/
/*jslint browser:true*/
(function ($) {
(function ($) {
weex flutter'use strict';
/*转码图⽚*/
var readFileIntoDataUrl = function (fileInfo) {
var loader = $.Deferred(), //jq延迟对象
fReader = new FileReader();
};
return loader.promise(); //返回promise
};
/*清空内容*/
$.fn.cleanHtml = function () {
var html = $(this).html();
return html && place(/(
|\s|
jquery下载的文件怎么使用<\/div>| )*$/, '');
};
$.fn.wysiwyg = function (userOptions) {
var editor = this, //设置ui-jq='设置的插件别名的dom元素'(此句注释可忽略，是针对我的项⽬结构写的) selectedRange,
options,
toolbarBtnSelector,
//更新⼯具栏
updateToolbar = function () {
if (options.activeToolbarClass) {
$(lbarSelector).find(toolbarBtnSelector).each(function () {
var command = $(this).data(optionsmandRole);
//判断光标所在位置以确定命令的状态，为真则显⽰为激活
if (document.queryCommandState(command)) {
$(this).addClass(options.activeToolbarClass);
} else {
$(this).removeClass(options.activeToolbarClass);
}
});
}
},
//插⼊内容
execCommand = function (commandWithArgs, valueArg) {
var commandArr = commandWithArgs.split(' '),
command = commandArr.shift(),
args = commandArr.join(' ') + (valueArg || '');
updateToolbar();
},
//⽤jquery.hotkeys.js插件监听键盘
bindHotkeys = function (hotKeys) {
$.each(hotKeys, function (hotkey, command) {
editor.keydown(hotkey, function (e) {
if (editor.attr('contenteditable') && editor.is(':visible')) {
e.preventDefault();
e.stopPropagation();
execCommand(command);
}
}).keyup(hotkey, function (e) {
if (editor.attr('contenteditable') && editor.is(':visible')) {
e.preventDefault();
e.preventDefault();
e.stopPropagation();
}
});
});
},
//获取当前range对象
getCurrentRange = function () {
var sel = Selection();
if (RangeAt && sel.rangeCount) {
RangeAt(0); //从当前selection对象中获得⼀个range对象。
}
},
//保存
saveSelection = function () {
selectedRange = getCurrentRange();
},
//恢复
restoreSelection = function () {
var selection = Selection(); //获取当前既获区，selection是对当前激活选中区（即⾼亮⽂本）进⾏操作shipconstructor
if (selectedRange) {
try {
//移除selection中所有的range对象，执⾏后anchorNode、focusNode被设置为null，不存在任何被选中的内容。
} catch (ex) {
ateTextRange().select();
pty();
}
//将range添加到selection当中，所以⼀个selection中可以有多个range。
//注意Chrome不允许同时存在多个range，它的处理⽅式和Firefox有些不同。
selection.addRange(selectedRange);
}
},
//插⼊⽂件（这⾥指图⽚）这⾥插⼊⽂件之后需要把⽂件转化为base64编码，然后通过readFileIntoDataUrl转码成图⽚ insertFiles = function (files) {
editor.focus();
//遍历插⼊（应为可以多⽂件插⼊）
$.each(files, function (idx, fileInfo) {
//只可插⼊图⽚⽂件
if (/^image\//.pe)) {
// 如果想对照⽚做⼀些操作，可以在照⽚转码之前，把照⽚放⼊你需要的数组中，这个只是本项⽬中需要免费制作个人简历的网站
//转码图⽚
$.when(readFileIntoDataUrl(fileInfo))
.done(function (dataUrl) {
execCommand('insertimage', dataUrl); //插⼊图⽚dom及src属性值
})
.fail(function (e) {
options.fileUploadError("file-reader", e);
});
} else {
//⾮图⽚⽂件会调⽤config的错误函数
options.fileUploadError("unsupported-file-type", pe);
}
});
},
//TODO 暂不了解⽤意
markSelection = function (input, color) {
restoreSelection();
/
/确定命令是否被⽀持，返回true或false
if (document.queryCommandSupported('hiliteColor')) {
}
saveSelection();
input.data(options.selectionMarker, color);
},
//绑定⼯具栏相应⼯具事件
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论