bootstrap-wysiwyg这个坑

但是用wysiwyg也是费了我不少的精力，特别是在图片上传上，下面做一些总结。

1、引入文件

wysiwyg号称只有5kb，但是实际上是将其他的依赖文件在cdn上用外链链接进来了，有以下几个文件：

css：

①bootstrap-combined.no-icons.min.css

②bootstrap-responsive.min.css

③font-awesome.css

重点来了，font-awesome要去官网下载3.0.2的版本才能使用，最新的版本不行，其他的版本不行，font文件夹也要用3.0.2的，不然会报错，找不到文件，编辑器的图片出不来。

js：

①jquery.min.js

②jquery.hotkey.js

③bootstrap.min.js

④bootstrap-wysiwyg.js

第一个是jq的文件，就不说了，第二个是wysiwyg热键的配置文件，还支持拖拽上传文件，第三个不说，第四个是wysiwyg的库文件。

2、使用方法

①初始化

$('#editor). wysiwyg();
②设置编辑框样式
#editor {overflow:scroll; max-height:300px}
这里的overflow要设置，其他的随便写，默认的宽跟外部div的宽度一直，也就是100%
③添加自己想要的功能

我想这估计也是这个框架小巧的原因，初始化没有dom的添加，只能自己手工打上去，不过还好，官网介绍中也说到，可以直接把代码拉下来，我也就没费那么多心思去研究了，把代码拉下来，然后把不想要的功能删掉。

<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">

<div class="dropdown-menu input-append">
<input class="span2" placeholder="URL" type="text" data-edit="createLink"/>
<button class="btn" type="button">Add</button>
</div>

</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" accept="images/*" id="descripitionImg" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" multiple style="opacity: 0; position: absolute; top: -10px; left: 0px; width: 100%; height: 100%;cursor: pointer;" />
</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>
</div>
切记，上面这段代码是放在editor编辑框的上面的，不是放在editor那个div的里面的，我刚开始就放进去了，怎么都出不来效果。好了，基本工作做好了。
④获取编辑框的内容

看了editor，是个div，用新的属性：contenteditable=“true”，使得div可以编辑，所以获得编辑框的内容就跟平时获取代码的方法一样，由于引入了jq，所以就直接用

$('#editor').html();
来获取代码，保存进数据库。官网介绍，还有个清除编辑框的方法，是$('#editor').cleanHtml();

3、遇到的问题以及解决

看中wysiwyg是因为这个框架比较小巧，但是实际上将所有的引用文件放到自己的服务器还是不少的。另外这个文件支持添加图片，可以预览，但是坑爹的是，这个框架没有写上传文件的方法，只能自己去找源码修改。于是百度，有三四个答案，看自己的需求跟他们对不上，于是想着自己改，看到有个答案是说，框架内的第一个函数，只要返回图片的链接就可以，于是就找到第一个函数，函数为readFileIntoDataUrl，这个函数只要返回上传图片的链接，就可以在编辑框中显示出上传的图片了。我用的是base64进行上传，然后将函数修改为：

var readFileIntoDataUrl = function (fileInfo) {
var loader = $.Deferred(),
fReader = new FileReader(),
img = '';
fReader.onload = function (e) {
img = e.target.result;
$.ajax({
url: '服务器接口',
type: 'post',
async: false,
dataType: 'json',
data: {请求的数据},
success: function(data){
if(data.responseCode == 1){
loader.resolve(服务器返回的图片的地址);
}else if(data.responseCode == 0){
alert('上传失败');
}
}
});
};
fReader.onerror = loader.reject;
fReader.onprogress = loader.notify;
fReader.readAsDataURL(fileInfo);
return loader.promise();
};