先來看看官方對這款編輯器的相關功能描述吧。
1、在Mac和Wndows平台上能夠自動針對常用操作綁定標准熱鍵
2、可以通過拖拽插入圖片；支持圖片上傳（也可以獲取移動設備上的照片）
3、語音識別輸入（僅限Chrome浏覽器）
4、允許自定義工具條；不生成額外標簽；支持網站充分利用Bootstrap、Font Awesome等工具庫的優秀特性
5、沒有強制規定的樣式一切都由你做主
6、依賴浏覽器的標准特性，沒有非標准代碼；工具條和鍵盤功能均可定制，並且能夠執行任何浏覽器支持的命令
7、不會自己創建一個單獨的frame、備份文本區等本編輯器盡量保持簡單，並僅僅運行在一個DIV內
8、（可選）清除尾部空格；清除空的div和span
9、必須運行在現代浏覽器上（在Chrome 26、Firefox 19、Safari 6上經過測試，用戶報告稱可以在IE10上工作）
10、支持移動設備浏覽器（在IOS 6 Ipad/Iphone 和 Android 4.1.1 Chrome上測試過）
注意：wysiwyg 和 wysihtml5 是兩款不同的編輯器。 wysiwyg 是對 wysihtml5 的一種加強版，比較相似。所以大家可以根據自己的需要去使用。
wysiwyg 官網：http://mindmup.github.io/bootstrap-wysiwyg/
wysiwyg 中文網站：http://www.bootcss.com/p/bootstrap-wysiwyg//
wysihtml5 官網：http://jhollingworth.github.io/bootstrap-wysihtml5/
由於 wysiwyg 是對 wysihtml5 的加強版，那麼我就來講一下 wysiwyg 的用法，wysihtml5類似。
使用步驟
1、引入以下的js和css文件。在此我想聲明一下：官網講的只是一個大致的使用，而以下的文件必須要引入才會生效，所以本站是注重實際運用的，這些細節是不能忽略的。
<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/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="https://mindmup.s3.amazonaws.com/lib/jquery.hotkeys.js"></script> <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> <script src="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.js"></script> <link href="index.css" rel="stylesheet"> <script src="bootstrap-wysiwyg.js"></script>
2、加入一段js代碼，由於代碼過多，在這裡就不列出來了，本站已經將源碼予以整理，請參照 demo.html 的源代碼
.........
3、在body標簽中加入以下格式的html代碼，在此需要注意的是，該編輯器並未封裝，而是直接把代碼寫在了html頁面中。整個編輯器可以分為兩部分，頂部工具欄和文本編輯框。
1）頂部工具欄：是一個包含多個 div.btn-group 的 div.btn-toolbar。每一個工具按鈕即是一個 div.btn-group 。在每個 div.btn-group 中我們可以自己配置提示文字而讓其顯示中文。
<div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor"> <div class="btn-group"> </div> .......... <div class="btn-group"> </div> </div>
在這裡還有一個 html5 的語音輸入工具。代碼如下：
<input type="text" data-edit="inserttext" id="voiceBtn" x-webkit-speech="">
2）內容文本框：div#editor
<div id="editor"> 內容 </div>
上面就是對bootstrap-wysiwyg的簡單介紹，看看效果吧
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。
如果大家還想深入學習，可以點擊這裡進行學習，再為大家附一個精彩的專題：Bootstrap學習教程
其實wysiwg搭建可視化編輯器只需要定義一些div，而編輯部分只需要一個id為editor的div即可搞定，希望這篇簡短的bootstrap-wysiwyg可視化編輯器介紹，真正的幫助到大家。