Highly recommend a small and exquisite visual editor Bootstrap-wysiwyg_javascript skills

Let's take a look at the official description of the function of the editor.

1, on the Mac and Wndows platform can automatically for common operation binding standard hotkey

2, can drag and drop into the picture, support picture upload (also can get photos on the mobile device)

3, speech recognition input (Chrome browser only)

4. Allow custom toolbars; Do not generate additional tags; support Web site make full use of the excellent features of Bootstrap, Font awesome and other tools libraries

5. No mandatory style everything is up to you.

6, browser-dependent standard features, no non-standard code, toolbars and keyboard features can be customized, and can perform any browser-supported commands

7, do not create a separate frame, backup text area and so on to keep the editor as simple as possible, and only run in a div

8. (optional) clear trailing spaces; clear empty div and span

9, must run in the modern browser (in Chrome 26, Firefox 19, Safari 6 on the test, users reported that they can work on the IE10)

10. Support mobile device browser (tested on iOS 6 ipad/iphone and Android 4.1.1 Chrome)

Note:WYSIWYG and WYSIHTML5 are two different editors. WYSIWYG is a kind of enhanced version of WYSIHTML5, which is quite similar. So everyone can use according to their own needs.
WYSIWYG official website: http://mindmup.github.io/bootstrap-wysiwyg/
WYSIWYG Chinese website: http://www.bootcss.com/p/bootstrap-wysiwyg//
WYSIHTML5 Official website: http://jhollingworth.github.io/bootstrap-wysihtml5/
Since WYSIWYG is a WYSIHTML5 version of the WYSIWYG, I would like to talk about the use of the WYSIHTML5.

Use steps
1, the introduction of the following JS and CSS files. Here I would like to make a statement: The official website is only a general use, and the following documents must be introduced to be effective, so this site is focused on practical use, these details can not be ignored.

 <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, add a section of JS code, because the code is too much, here is not listed, this site has been sorted out the source code, please refer to demo.html source code
.........
3, in the body tag to add the following format HTML code, in this need to note that the editor is not encapsulated, but directly to the code written in the HTML page. The entire editor can be divided into two parts, a top toolbar and a text edit box.

1) Top toolbar: is a div.btn-toolbar containing multiple div.btn-group. Each tool button is a div.btn-group. In each div.btn-group we can configure the prompt text to display Chinese.

<div class= "Btn-toolbar" data-role= "Editor-toolbar" data-target= "#editor" > 
  <div class= "Btn-group" > </div> .....
  <div class= "Btn-group" >
  </div>
</div> 

There is also a HTML5 voice input tool here. The code is as follows:

<input type= "text" data-edit= "InsertText" id= "voicebtn" "X-webkit-speech=" ">

2) Content text box:div#editor

<div id= "Editor" >
  content
</div>

The above is a simple introduction to BOOTSTRAP-WYSIWYG, see the effect of it

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.

If you want to further study, you can click here to learn, and then attach a wonderful topic: Bootstrap Learning Course

In fact, WYSIWG to build a visual editor only need to define some div, and edit part only need a editor div can be done, I hope this brief Bootstrap-wysiwyg visual editor introduction, really help everyone.