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


Posted in Javascript onMay 27, 2016

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

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-wysiwyg

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

如果大家还想深入学习,可以点击这里进行学习,再为大家附一个精彩的专题:Bootstrap学习教程

其实wysiwg搭建可视化编辑器只需要定义一些div,而编辑部分只需要一个id为editor的div即可搞定,希望这篇简短的bootstrap-wysiwyg可视化编辑器介绍,真正的帮助到大家。

Javascript 相关文章推荐
js escape,unescape解决中文乱码问题的方法
May 26 Javascript
js两行代码按指定格式输出日期时间
Oct 21 Javascript
jQuery实现的一个自定义Placeholder属性插件
Aug 11 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
Feb 26 Javascript
JavaSacript中charCodeAt()方法的使用详解
Jun 05 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
Jul 27 Javascript
JS非空验证及邮箱验证的实例
Aug 11 Javascript
node.js中fs文件系统目录操作与文件信息操作
Feb 24 Javascript
JS中call()和apply()的功能及用法实例分析
Jun 28 Javascript
微信小程序实现菜单左右联动
May 19 Javascript
JS 数组和对象的深拷贝操作示例
Jun 06 Javascript
详解JVM系列之内存模型
Jun 10 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
May 27 #Javascript
非常酷炫的Bootstrap图片轮播动画
May 27 #Javascript
Bootstrap安装环境配置教程分享
May 27 #Javascript
Bootstrap布局方式详解
May 27 #Javascript
使用Bootstrap框架制作查询页面的界面实例代码
May 27 #Javascript
JS组件Bootstrap Table布局详解
May 27 #Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
May 27 #Javascript
You might like
PHP 和 HTML
2006/10/09 PHP
同时提取多条新闻中的文本一例
2006/10/09 PHP
AMFPHP php远程调用(RPC, Remote Procedure Call)工具 快速入门教程
2010/05/10 PHP
JavaScript操作XML 使用百度RSS作为新闻源示例
2012/02/17 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
javascript常见数字进制转换实例分析
2016/04/21 Javascript
jQuery中text() val()和html()的区别实例详解
2016/06/28 Javascript
artDialog+plupload实现多文件上传
2016/07/19 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
2016/09/02 Javascript
Javascript 判断两个IP是否在同一网段实例代码
2016/11/28 Javascript
Vue.JS入门教程之列表渲染
2016/12/01 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
2017/07/13 Javascript
JS库之wow.js使用方法
2017/09/14 Javascript
JavaScript实现换肤功能
2017/09/15 Javascript
Vue.js 2.5新特性介绍(推荐)
2017/10/24 Javascript
详解React之父子组件传递和其它一些要点
2018/06/25 Javascript
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
jquery实现简单拖拽效果
2020/07/20 jQuery
我所理解的JavaScript中的this指向
2020/09/04 Javascript
pygame学习笔记(4):声音控制
2015/04/15 Python
Python中特殊函数集锦
2015/07/27 Python
python 抓包保存为pcap文件并解析的实例
2019/07/23 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
纯HTML+CSS3制作导航菜单(附源码)
2013/04/24 HTML / CSS
Python文件操作的面试题
2013/06/22 面试题
渡河少年教学反思
2014/02/12 职场文书
开业庆典策划方案
2014/02/18 职场文书
《社戏》教学反思
2014/04/15 职场文书
空气环保标语
2014/06/12 职场文书
小学优秀教师先进事迹材料
2014/12/16 职场文书
大班下学期个人总结
2015/02/13 职场文书
计划生育责任书
2015/05/09 职场文书
天河观后感
2015/06/11 职场文书
解决go在函数退出后子协程的退出问题
2021/04/30 Golang
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸