最近公司需要做一个文本编辑器，由于我们使用的bootstrap的框架，所以选择了使用bootstrap-wysiwyg的轻量级的插件，研究这个插件花费了我一些时间，接下来记录我走过的坑，希望对大家有用：
1.需要在index.html页面引入的css文件：
<link href="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
<link href="index.css" rel="stylesheet">这是官方文档上引用的css文件，都是网络获取的，你可以下载到你本地，这加载更快；
2.需要在index.html页面引入的js文件：
<script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<!--键盘事件-->
<script src="https://mindmup.s3.amazonaws.com/lib/jquery.hotkeys.js"></script>
<script src="http://cdn.bootcss.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="bootstrap-wysiwyg.js"></script>3.在你需要添加文本编辑器的html地方加上一下代码：
<div style="height: 50px;"></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 +'" style="font-family:\''+ 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" in document.createElement("input")) {
var editorOffset = $('#editor').offset();
$('#voiceBtn').css('position','absolute').offset({top: editorOffset.top, left: editorOffset.left+$('#editor').innerWidth()-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文件：
/* http://github.com/mindmup/bootstrap-wysiwyg */
/*global jQuery, $, FileReader*/
/*jslint browser:true*/
(function ($) {
'use strict';
/*转码图片*/
var readFileIntoDataUrl = function (fileInfo) {
var loader = $.Deferred(), //jq延迟对象
fReader = new FileReader();
fReader.onload = function (e) {
loader.resolve(e.target.result);
};
fReader.onerror = loader.reject; //拒绝
fReader.onprogress = loader.notify;
fReader.readAsDataURL(fileInfo); //转码图片
return loader.promise(); //返回promise
};
/*清空内容*/
$.fn.cleanHtml = function () {
var html = $(this).html();
return html && html.replace(/(
|\s|
<\/div>| )*$/, '');
};
$.fn.wysiwyg = function (userOptions) {
var editor = this, //设置ui-jq='设置的插件别名的dom元素'(此句注释可忽略，是针对我的项目结构写的)
selectedRange,
options,
toolbarBtnSelector,
//更新工具栏
updateToolbar = function () {
if (options.activeToolbarClass) {
$(options.toolbarSelector).find(toolbarBtnSelector).each(function () {
var command = $(this).data(options.commandRole);
//判断光标所在位置以确定命令的状态，为真则显示为激活
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 || '');
document.execCommand(command, 0, args);
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.stopPropagation();
}
});
});
},
//获取当前range对象
getCurrentRange = function () {
var sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
return sel.getRangeAt(0); //从当前selection对象中获得一个range对象。
}
},
//保存
saveSelection = function () {
selectedRange = getCurrentRange();
},
//恢复
restoreSelection = function () {
var selection = window.getSelection(); //获取当前既获区，selection是对当前激活选中区（即高亮文本）进行操作
if (selectedRange) {
try {
//移除selection中所有的range对象，执行后anchorNode、focusNode被设置为null，不存在任何被选中的内容。
selection.removeAllRanges();
} catch (ex) {
document.body.createTextRange().select();
document.selection.empty();
}
//将range添加到selection当中，所以一个selection中可以有多个range。
//注意Chrome不允许同时存在多个range，它的处理方式和Firefox有些不同。
selection.addRange(selectedRange);
}
},
//插入文件（这里指图片） 这里插入文件之后需要把文件转化为base64编码，然后通过readFileIntoDataUrl转码成图片
insertFiles = function (files) {
editor.focus();
//遍历插入（应为可以多文件插入）
$.each(files, function (idx, fileInfo) {
//只可插入图片文件
if (/^image\//.test(fileInfo.type)) {
// 如果想对照片做一些操作，可以在照片转码之前，把照片放入你需要的数组中，这个只是本项目中需要
//转码图片
$.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", fileInfo.type);
}
});
},
//TODO 暂不了解用意
markSelection = function (input, color) {
restoreSelection();
//确定命令是否被支持，返回true或false
if (document.queryCommandSupported('hiliteColor')) {
document.execCommand('hiliteColor', 0, color || 'transparent');
}
saveSelection();
input.data(options.selectionMarker, color);
},
//绑定工具栏相应工具事件
bindToolbar = function (toolbar, options) {
//给所有工具栏上的控件绑定点击事件
toolbar.find(toolbarBtnSelector).click(function () {
restoreSelection();
editor.focus(); //获取焦点
//设置相应配置的工具execCommand
execCommand($(this).data(options.commandRole));
//保存
saveSelection();
});
//对[data-toggle=dropdown]进行单独绑定点击事件处理 字体大小
toolbar.find('[data-toggle=dropdown]').click(restoreSelection);
//对input控件进行单独处理，webkitspeechchange为语音事件
toolbar.find('input[type=text][data-' + options.commandRole + ']').on('webkitspeechchange change', function () {
var newValue = this.value; //获取input 的value
this.value = ''; //清空value防止冲突
restoreSelection();
if (newValue) {
editor.focus();//获取焦点
//设置相应配置的工具execCommand
execCommand($(this).data(options.commandRole), newValue);
}
saveSelection();
}).on('focus', function () { //获取焦点
var input = $(this);
if (!input.data(options.selectionMarker)) {
markSelection(input, options.selectionColor);
input.focus();
}
}).on('blur', function () { //失去焦点
var input = $(this);
if (input.data(options.selectionMarker)) {
markSelection(input, false);
}
});
toolbar.find('input[type=file][data-' + options.commandRole + ']').change(function () {
restoreSelection();
if (this.type === 'file' && this.files && this.files.length > 0) {
insertFiles(this.files);
}
saveSelection();
this.value = '';
});
},
//初始化拖放事件
initFileDrops = function () {
editor.on('dragenter dragover', false)
.on('drop', function (e) {
var dataTransfer = e.originalEvent.dataTransfer;
e.stopPropagation();
e.preventDefault();
if (dataTransfer && dataTransfer.files && dataTransfer.files.length > 0) {
insertFiles(dataTransfer.files);
}
});
};
//合并传入的配置对象userOptions和默认的配置对象config
options = $.extend({}, $.fn.wysiwyg.defaults, userOptions);
//设置查找字符串：a[data-edit] button[data-edit] input[type=button][data-edit]
toolbarBtnSelector = 'a[data-' + options.commandRole + '],button[data-' + options.commandRole + '],input[type=button][data-' + options.commandRole + ']';
//设置热键 容器有[data-role=editor-toolbar]属性的dom元素
bindHotkeys(options.hotKeys);
//是否允许拖放 允许则配置拖放
if (options.dragAndDropImages) {initFileDrops();}
//配置工具栏
bindToolbar($(options.toolbarSelector), options);
//设置编辑区域为可编辑状态并绑定事件mouseup keyup mouseout
editor.attr('contenteditable', true)
.on('mouseup keyup mouseout', function () {
saveSelection();
updateToolbar();
});
//编辑区域绑定图片点击事件
//TODO 这是我自己添加的，因为有时要对图片进行一些操作
editor.on('mousedown','img', function (e) {
e.preventDefault();
}).on('click', 'img', function (e) {
var $img = $(e.currentTarget);
console.log($img);
e.preventDefault();
e.stopPropagation();
});
//window绑定touchend事件
$(window).bind('touchend', function (e) {
var isInside = (editor.is(e.target) || editor.has(e.target).length > 0),
currentRange = getCurrentRange(),
clear = currentRange && (currentRange.startContainer === currentRange.endContainer && currentRange.startOffset === currentRange.endOffset);
if (!clear || isInside) {
saveSelection();
updateToolbar();
}
});
return this;
};
//配置参数
$.fn.wysiwyg.defaults = {
hotKeys: { //热键 应用hotkeys.js jquery插件
'ctrl+b meta+b': 'bold',
'ctrl+i meta+i': 'italic',
'ctrl+u meta+u': 'underline',
'ctrl+z meta+z': 'undo',
'ctrl+y meta+y meta+shift+z': 'redo',
'ctrl+l meta+l': 'justifyleft',
'ctrl+r meta+r': 'justifyright',
'ctrl+e meta+e': 'justifycenter',
'ctrl+j meta+j': 'justifyfull',
'shift+tab': 'outdent',
'tab': 'indent'
},
toolbarSelector: '[data-role=editor-toolbar]',
commandRole: 'edit',
activeToolbarClass: 'btn-info',
selectionMarker: 'edit-focus-marker',
selectionColor: 'darkgrey',
dragAndDropImages: true, //是否支持拖放，默认为支持
fileUploadError: function (reason, detail) { console.log("File upload error", reason, detail); }
};
}(window.jQuery));
解读源码是为了更好的理解插件的使用方法，如果想看原文的解析可以查看此链接（点击打开链接）
7.我们项目中照片上传原理为，在发送这个编辑器的内容之前，先上传照片，照片上传成功之后，再把每次服务器返回来的地址一个一个替换了文本编辑器里的照片文件：
// 照片路径保存
var uploadFiles = [];
// 监听选取照片的按钮<input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" />，
// 把每次选取的照片文件放入数组中
$("#descripitionImg").change(function(){
$.each(this.files,function(index,fileObj){
uploadFiles.push(fileObj);
});
});
// 转码照片为base64的字符串
var readFileIntoDataUrl = function (fileInfo) {
var loader = $.Deferred(),
fReader = new FileReader();
fReader.onload = function (e) {
loader.resolve(e.target.result);
};
fReader.onerror = loader.reject;
fReader.onprogress = loader.notify;
fReader.readAsDataURL(fileInfo);
return loader.promise();
};
function uploadImgs(index){
// 使用FormData对象上传文件
// 这里上传使用递归上传，上传一个再次调用函数本身，再次上传，知道全部上传完成
var formData = new FormData();
if(0 >= index){
// 再次上传文本编辑器里的内容
}else{
//console.log('执行照片提交。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。');
index -=1;
formData.append(uploadFiles[index].name,uploadFiles[index]);
var xhr = new XMLHttpRequest();
xhr.open("POST",FILEUPLOAD_URL2,true);
xhr.send(formData);
xhr.onload = function(data){
// 判断图片是否存在
var imgTag = [];
readFileIntoDataUrl(uploadFiles[index]).done(function (dataUrl) {
imgTag = $("#editor").find("img[src='" + dataUrl + "']");
if (imgTag.length > 0) {
// 图片存在, 上传当前文件.
// uploadImage方法为你的上传图片方法.
var url = JSON.parse(data.currentTarget.response).resMsg;
imgTag.attr("src", url);
// 重新调用函数
uploadImgs(index);
}
});
}
}
}
总结：
1.引入插件文件；
2.把文本编辑器的样式和控制部分行为的js代码写到自己代码中；
3.解读源码，了解编辑器是怎么用的；
4.上传文件和编辑器内容
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
