先來(lái)看看官方對(duì)這款編輯器的相關(guān)功能描述吧。

1、在Mac和Wndows平臺(tái)上能夠自動(dòng)針對(duì)常用操作綁定標(biāo)準(zhǔn)熱鍵

2、可以通過(guò)拖拽插入圖片；支持圖片上傳（也可以獲取移動(dòng)設(shè)備上的照片）

3、語(yǔ)音識(shí)別輸入（僅限Chrome瀏覽器）

4、允許自定義工具條；不生成額外標(biāo)簽；支持網(wǎng)站充分利用Bootstrap、Font Awesome等工具庫(kù)的優(yōu)秀特性

5、沒(méi)有強(qiáng)制規(guī)定的樣式一切都由你做主

6、依賴瀏覽器的標(biāo)準(zhǔn)特性，沒(méi)有非標(biāo)準(zhǔn)代碼；工具條和鍵盤功能均可定制，并且能夠執(zhí)行任何瀏覽器支持的命令

7、不會(huì)自己創(chuàng)建一個(gè)單獨(dú)的frame、備份文本區(qū)等本編輯器盡量保持簡(jiǎn)單，并僅僅運(yùn)行在一個(gè)DIV內(nèi)

8、（可選）清除尾部空格；清除空的div和span

9、必須運(yùn)行在現(xiàn)代瀏覽器上（在Chrome 26、Firefox 19、Safari 6上經(jīng)過(guò)測(cè)試，用戶報(bào)告稱可以在IE10上工作）

10、支持移動(dòng)設(shè)備瀏覽器（在IOS 6 Ipad/Iphone 和 Android 4.1.1 Chrome上測(cè)試過(guò)）

注意：wysiwyg 和 wysihtml5 是兩款不同的編輯器。 wysiwyg 是對(duì) wysihtml5 的一種加強(qiáng)版，比較相似。所以大家可以根據(jù)自己的需要去使用。
wysiwyg 官網(wǎng)：http://mindmup.github.io/bootstrap-wysiwyg/
wysiwyg 中文網(wǎng)站：http://www.bootcss.com/p/bootstrap-wysiwyg//
wysihtml5 官網(wǎng)：http://jhollingworth.github.io/bootstrap-wysihtml5/
由于 wysiwyg 是對(duì) wysihtml5 的加強(qiáng)版，那么我就來(lái)講一下 wysiwyg 的用法，wysihtml5類似。

使用步驟
1、引入以下的js和css文件。在此我想聲明一下：官網(wǎng)講的只是一個(gè)大致的使用，而以下的文件必須要引入才會(huì)生效，所以本站是注重實(shí)際運(yùn)用的，這些細(xì)節(jié)是不能忽略的。

 <link  rel="stylesheet">
<link  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代碼，由于代碼過(guò)多，在這里就不列出來(lái)了，本站已經(jīng)將源碼予以整理，請(qǐng)參照 demo.html 的源代碼
.........
3、在body標(biāo)簽中加入以下格式的html代碼，在此需要注意的是，該編輯器并未封裝，而是直接把代碼寫在了html頁(yè)面中。整個(gè)編輯器可以分為兩部分，頂部工具欄和文本編輯框。

1）頂部工具欄：是一個(gè)包含多個(gè) div.btn-group 的 div.btn-toolbar。每一個(gè)工具按鈕即是一個(gè) div.btn-group 。在每個(gè) 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> 

在這里還有一個(gè) html5 的語(yǔ)音輸入工具。代碼如下：

 <input type="text" data-edit="inserttext" id="voiceBtn" x-webkit-speech="">

2）內(nèi)容文本框：div#editor

<div id="editor">
  內(nèi)容
</div>

上面就是對(duì)bootstrap-wysiwyg的簡(jiǎn)單介紹，看看效果吧

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附一個(gè)精彩的專題：Bootstrap學(xué)習(xí)教程

其實(shí)wysiwg搭建可視化編輯器只需要定義一些div，而編輯部分只需要一個(gè)id為editor的div即可搞定，希望這篇簡(jiǎn)短的bootstrap-wysiwyg可視化編輯器介紹，真正的幫助到大家。

最新評(píng)論