我们来看看官方对这个编辑器相关功能的描述。

1.在Mac和Wndows平台上，标准热键可以自动绑定进行常用操作。

2.您可以通过拖动插入图片；支持照片上传(或在移动设备上获取照片)。

3.语音识别输入(仅限Chrome浏览器)

4.允许自定义工具栏；不要生成额外的标签；支持网站充分利用Bootstrap、Font Awesome等工具库的优秀功能。

5.没有强制风格。一切都取决于你。

6.依靠浏览器的标准功能，没有非标准代码；并且可以执行浏览器支持的任何命令。

7、不会创建单独的框架、备份文本区等。这个编辑器尽可能简单，只在DIV中运行。

8.(可选)清除尾随空格；清除空div和span。

9.它必须在现代浏览器上运行(在Chrome 26、Firefox 19、Safari 6上测试过，用户报告它可以在IE10上工作)。

10.支持移动设备浏览器(在IOS 6 Ipad/Iphone和Android 4.1.1 Chrome上测试)。

注意：所见即所得和所见即所得是两个不同的编辑器。Wysiwyg是wysihtml5的增强版本，两者非常相似。所以大家可以根据自己的需要来使用。所见即所得官网：http://mindmup.github.io/bootstrap-wysiwyg/wysiwyg中文网：http://www.bootcss.com/p/bootstrap-wysiwyg//. wyshitml5官网：http://jhollingworth.github.io/bootstrap-wysihtml5/既然所见即所得是wyshitml5的增强版，那我就说说所见即所得的用法，和wyshitml5差不多。

使用步骤1。导入以下js和css文件。在此，我想声明：官网所说的只是粗略的使用，以下文件必须介绍后才能生效。所以这个网站注重实际使用，这些细节是不能忽视的。

link href=' http://netdna . bootstrapcdn.com/Twitter-bootstrap dn/2 . 3 . 1/CSS/bootstrap-combined . no-icons . min . CSS ' rel='样式表' link href=' http://netdna . bootstrapcdn.com/font-awesome/3 . 0 . 2/CSS/font-awesome . CSS ' rel='样式表' Script src=' http 3360http://Ajax . googleapi.com/Ajax/libs请参考demo.html的源代码.3.将以下格式的html代码添加到body标记中。这里需要注意的是，编辑器不是封装的，而是直接在html页面中编写代码。整个编辑器可以分为两部分，顶部工具栏和文本编辑框。

1)顶部工具栏：是一个包含多个div.btn-group的div . BTN-工具栏。每个工具按钮都是一个div.btn-group。在每个div.btn-group中，我们可以将提示文本配置为显示中文。

div class=' BTN-工具栏'数据-角色='编辑器-工具栏'数据-目标=' #编辑器' div class=' BTN-组'/div..这里还有一个html5语音输入工具。代码如下：

输入类型='text '数据-编辑=' insert text ' id=' voice Btn ' x-web kit-语音=' '

2)内容文本框：div #编辑器。

Div id='editor '内容/div以上是对bootstrap-wysiwyg的简单介绍。让我们看看效果。

这就是本文的全部内容。希望对大家的学习有帮助，希望大家多多支持我们。

如果你还想深入学习，可以点击这里学习，然后附上一个精彩的话题给你：Bootstrap学习教程。

实际上，所见即所得只需要定义一些div来构建一个可视化编辑器，而编辑部分只需要一个id为editor的div。希望这个对bootstrap-wysiwyg可视化编辑器的简单介绍真的对大家有所帮助。