本文教大家如何使用bootstrap-wysiwyg文本编辑器,充分发挥编辑器的优势,希望大家可以有所收获。
主要特性: 超小5kb 自动的热键支持(MAC和windows) 拖放的插入图片,支持图片上传(支持手机拍照) 支持声音输入(chrome支持) 允许自定义的工具条,可以使用所有的bootstrap内容,字体 不使用任何强制的样式 …………………………
使用其实很简单的,倒入bootstrap相关CSS,JS,jQuery,还有bootstrap-wysiwyg的JS,如下:
$('[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());
});
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">×'+
'
File upload error
'+msg+'};
initToolbarBootstrapBindings();
$('#editor').wysiwyg({ fileUploadError: showErrorAlert} );