先來看看官方對這款編輯器的相關功能描述吧。

1、在Mac和Wndows平臺上能夠自動針對常用操作綁定標準熱鍵

2、可以通過拖拽插入圖片；支持圖片上傳（也可以獲取移動設備上的照片）

3、語音識別輸入（僅限Chrome瀏覽器）

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

5、沒有強制規(guī)定的樣式一切都由你做主

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

7、不會自己創(chuàng)建一個單獨的frame、備份文本區(qū)等本編輯器盡量保持簡單，并僅僅運行在一個DIV內

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

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

10、支持移動設備瀏覽器（在IOS 6 Ipad/Iphone 和 Android 4.1.1 Chrome上測試過）

注意：wysiwyg 和 wysihtml5 是兩款不同的編輯器。 wysiwyg 是對 wysihtml5 的一種加強版，比較相似。所以大家可以根據(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 是對 wysihtml5 的加強版，那么我就來講一下 wysiwyg 的用法，wysihtml5類似。

使用步驟
1、引入以下的js和css文件。在此我想聲明一下：官網(wǎng)講的只是一個大致的使用，而以下的文件必須要引入才會生效，所以本站是注重實際運用的，這些細節(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代碼，由于代碼過多，在這里就不列出來了，本站已經(jīng)將源碼予以整理，請參照 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可視化編輯器介紹，真正的幫助到大家。

最新評論