Let’s take a look at the official description of the relevant functions of this editor.
1. It can automatically bind standard hotkeys for common operations on Mac and Wndows platforms.
2. You can insert pictures by dragging and dropping; support image upload (you can also get photos on your mobile device)
3. Voice recognition input (Chrome browser only)
4. Allow custom toolbars; no additional tags are generated; support the website to make full use of the excellent features of tool libraries such as Bootstrap, Font Awesome, etc.
5. Everything is up to you if there is no mandatory style
6. Rely on the standard features of the browser, no non-standard code; toolbar and keyboard functions can be customized, and can execute any commands supported by the browser.
7. This editor will not create a separate frame, backup text area, etc., try to keep it simple as possible and run it in a DIV.
8. (Optional) Clear the tail space; clear empty div and span
9. Must run on modern browsers (tested on Chrome 26, Firefox 19, Safari 6, and users report that they can work on IE10)
10. Support mobile browser (tested on IOS 6 Ipad/Iphone and Android 4.1.1 Chrome)
Note: wysiwyg and wysihtml5 are two different editors. wysiwyg is an enhanced version of wysihtml5, which is relatively similar. So you can use it according to your 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 an enhanced version of wysihtml5, let me talk about the usage of wysiwyg, wysihtml5 is similar.
Steps to use
1. Introduce the following js and css files. Here I would like to state that the official website is just a general use, and the following documents must be introduced before they can take effect, so this website focuses on actual application, and these details cannot 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.bootstrappcdn.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 piece of js code. Due to too much code, it will not be listed here. This website has sorted out the source code. Please refer to the source code of demo.html
.........
3. Add the following format html code to the body tag. It should be noted here that the editor is not encapsulated, but directly writes the code into the html page. The entire editor can be divided into two parts, the top toolbar and the text editing box.
1) Top toolbar: is a div.btn-toolbar containing multiple div.btn-groups. Each tool button is a div.btn-group. In each div.btn-group, we can configure the prompt text ourselves to display Chinese.
<div data-role="editor-toolbar" data-target="#editor"> <div> </div>.......... <div> </div></div>
There is also an 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 brief introduction to bootstrap-wysiwyg, let's see the effect
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.
If you still want to study in depth, you can click here to learn and attach a wonderful topic to you: Bootstrap learning tutorial
In fact, wysiwg only needs to define some divs to build a visual editor, while the editing part only needs a div with an id editor to complete it. I hope this brief introduction to bootstrap-wysiwyg visual editor will really help everyone.