极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg

先来看看官方对这款编辑器的相关功能描述吧。

1、在Mac和Wndows平台上能够自动针对常用操作绑定标准热键

2、可以通过拖拽插入图片；支持图片上传（也可以获取移动设备上的照片）

3、语音识别输入（仅限Chrome浏览器）

4、允许自定义工具条；不生成额外标签；支持网站充分利用Bootstrap、Font Awesome等工具库的优秀特性

5、没有强制规定的样式一切都由你做主

6、依赖浏览器的标准特性，没有非标准代码；工具条和键盘功能均可定制，并且能够执行任何浏览器支持的命令

7、不会自己创建一个单独的frame、备份文本区等本编辑器尽量保持简单，并仅仅运行在一个DIV内

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

9、必须运行在现代浏览器上（在Chrome 26、Firefox 19、Safari 6上经过测试，用户报告称可以在IE10上工作）

10、支持移动设备浏览器（在IOS 6 Ipad/Iphone 和 Android 4.1.1 Chrome上测试过）

注意：wysiwyg 和 wysihtml5 是两款不同的编辑器。 wysiwyg 是对 wysihtml5 的一种加强版，比较相似。所以大家可以根据自己的需要去使用。
wysiwyg 官网：http://mindmup.github.io/bootstrap-wysiwyg/
wysiwyg 中文网站：http://www.bootcss.com/p/bootstrap-wysiwyg//
wysihtml5 官网：http://jhollingworth.github.io/bootstrap-wysihtml5/
由于 wysiwyg 是对 wysihtml5 的加强版，那么我就来讲一下 wysiwyg 的用法，wysihtml5类似。

使用步骤
1、引入以下的js和css文件。在此我想声明一下：官网讲的只是一个大致的使用，而以下的文件必须要引入才会生效，所以本站是注重实际运用的，这些细节是不能忽略的。

 <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、加入一段js代码，由于代码过多，在这里就不列出来了，本站已经将源码予以整理，请参照 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可视化编辑器介绍，真正的帮助到大家。

赞 (0)

相关推荐

  • 值得分享和收藏的Bootstrap学习教程

    首先先感谢朋友们对小编的支持,关注小编的文章,和小编一起学习进步,一直的陪伴,小编也一定会再接再厉,为大家分享更多精彩的文章. 在分享的过程中遇到了一些问题,这也给了我很大的启发,大家在搜索相关文章时都没有针对此类问题进行的系统整理文章,这也是小编需要在今后进行改进的. 所以本文就吸取这个经验,针对Bootstrap教程进行系统整理,希望对大家的学习有所帮助,便于大家学习. 小编的水平能力都很有限,还望大牛多给一些建议和看法,帮助小编进行改正和提高,如果文中确有不妥之处,还请谅解.希望能和大家共

  • 20分钟轻松创建自己的Bootstrap站点

    20分钟轻松创建自己的Bootstrap站点

    本文的主要目的让你在20分钟内学会使用twitter bootstrap创建一个站点,如何建立站点,下文为大家介绍: 首先需要说的是twitter bootstrap是非常优秀的一个前端开源框架,它为所有的组键都提供了详细的用例,让你能够轻易地通过复制黏贴而附加到你的设计中. 基本的HTML模板 我们需要以一个基本的HTML模板,这样我们能够把所需要的bootstrap文件包含进来.下面就是我们twitter bootstrap项目的开头,复制这些代码到一个文件中并将其命名为index.html

  • JS表格组件神器bootstrap table详解（基础版）

    JS表格组件神器bootstrap table详解（基础版）

    一.Bootstrap Table的引入 关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来. 由于Bootstrap Table是Bootstrap的一个组件,所以它是依赖Bootstrap的,我们首先需要添加Bootstrap的引用. 2.使用我们神奇的Nuget 打开Nuget,搜索这两个包 Bootstrap已经是最新的3.3.5了,我们直接安装即可. 而Bootstrap Table的版本竟然是0.4,这也太坑爹了.所以博主建议Boot

  • 15款最好的Bootstrap在线编辑器

    15款最好的Bootstrap在线编辑器

    以下是 15 款最好的 Bootstrap 编辑器或者是在线编辑工具. 1. Bootstrap Magic 这是一个 Bootstrap 主题生成器,使用最新的 Bootstrap 3 版本和 Angular JS 版本,提供一个鲜活的用户修改预览.它包括了各种各样的导入,一个颜色选择器和智能的预先输入.更神奇的是,Bootstrap 会根据用户的每个选择来重新简历框架,方便用户的下载和使用. 2. BootSwatchr BootSwatchr 是由 Drew Strickiand 独立开发

  • 值得分享的轻量级Bootstrap Table表格插件

    值得分享的轻量级Bootstrap Table表格插件

    基于Bootstrap的轻量级表格插件Bootstrap Table只需简单的配置,就可以拥有强大的支持固定表头.单/复选.排序.分页.搜索及自定义表头等功能,更好的提高开发效率和减少开发时间. 1.插件描述:Bootstrap Table显示数据表格格式,提供了丰富的支持,单选框.复选框.排序.分页等,插件下载. 2.特点: 基于Bootstrap 3开发(同时支持 Bootstrap 2) 响应式界面 固定表头 完全可配置 支持data属性 显示/隐藏列 显示/隐藏表头 使用AJAX获取JS

  • 超漂亮的Bootstrap 富文本编辑器summernote

    超漂亮的Bootstrap 富文本编辑器summernote

    Summernote 是一个简单,灵活,所见即所得(WYSIWYG)的编辑器,基于 jQuery 和 Bootstrap 构建.Summernote 所有主要的操作都支持快捷键,有一个功能强大的 API,它提供了大量的自定义选项的设计(宽,高,有效的项目等等)和功能.对于主要的脚本语言或框架(PHP,Ruby,Django,NodeJS),该项目有提供了集成示例. Bootstrap summernote,用其官网上的介绍就是"Super Simple WYSIWYG editor",

  • 值得分享的Bootstrap Ace模板实现菜单和Tab页效果

    值得分享的Bootstrap Ace模板实现菜单和Tab页效果

    本文分享了项目中使用Ace模板的菜单样式和基于iframe的Tab页效果. 一.效果展示 折腾了好久,终于将菜单样式和Tab页的效果从项目中抽出来了. 1.初始加载出来的效果 2.展开菜单(支持多级展开,后面代码介绍) 3.点击子菜单,以Tab页的形式打开对应的页面 4.支持菜单折叠 5.打开的菜单过多时自动换行显示,折叠后自适应 二.代码示例 有现成的东西用很方便的,总的来说Bootstrap Ace模板的功能还是比较强大的,并且支持各种终端设备.本文主要使用的它的菜单的效果,下面就来看看Ac

  • 20分钟成功编写bootstrap响应式页面 就这么简单

    20分钟成功编写bootstrap响应式页面 就这么简单

    最近发现一个叫 Bootstrap 的好东西,Bootstrap 是现在最流行的响应式 CSS 框架,它以移动设备优先,能够快速适应不同设备.使用它编写响应式页面快捷.方便,而且屏蔽了浏览器差异.使用了 Bootstrap 后,再也无法想象过去使用原始的 CSS 编写网页的悲惨生活了. 经过学习,我发现自己也具备了分分钟开发出一个高大上的页面的能力.本文将会为大家介绍 Bootstrap,并且带领大家一起实现一个响应式页面. 图 1. 移动优先,适应不同设备 一.安装 最简单的方式是直接在网页中

  • 所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解

    所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解

    本文教大家如何使用bootstrap-wysiwyg文本编辑器,充分发挥编辑器的优势,希望大家可以有所收获. 主要特性:   超小5kb   自动的热键支持(MAC和windows)   拖放的插入图片,支持图片上传(支持手机拍照)   支持声音输入(chrome支持)   允许自定义的工具条,可以使用所有的bootstrap内容,字体   不使用任何强制的样式   ---------- 其实不止这些,需要大家自己去探索,加油吧! 使用其实很简单的,倒入bootstrap相关CSS,JS,jQu

  • 20分钟打造属于你的Bootstrap站点

    20分钟打造属于你的Bootstrap站点

    本文的主要目的让你在20分钟内学会使用twitter bootstrap创建一个站点,如何建立站点,下文为大家介绍: 基本的HTML模板  .我们需要以一个基本的HTML模板,这样我们能够把所需要的bootstrap文件包含进来.下面就是我们twitter bootstrap项目的开头,复制这些代码到一个文件中并将其命名为index.html. <!DOCTYPE html> <head> <title>Twitter Bootstrap Tutorial - A re

随机推荐