因爲對summernote不滿意，所以用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}③添加自己想要的功能
我想這估計也是這個框架小巧的原因，初始化沒有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，是個div，用新的屬性：contenteditable=“true”，使得div可以編輯，所以獲得編輯框的內容就跟平時獲取代碼的方法一樣，由於引入了jq，所以就直接用
$('#editor').html();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();
};然後就可以進行上傳，並且顯示出來了。爲了研究這個圖片上傳，研究了半天，時間上來說，不值，但是總算是找了解決辦法吧，以後就用這個來做固定的文本編輯器了。