极力推荐一款小巧玲珑的可视化编辑器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 相关文章推荐
javascript不同页面传值的改进版
Sep 30 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
Oct 13 Javascript
jQuery控制输入框只能输入数值的小例子
Mar 20 Javascript
多种方法判断Javascript对象是否存在
Sep 22 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
Dec 04 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
Apr 11 Javascript
js实现input框文字动态变换显示效果
Aug 19 Javascript
Javascript技术难点之apply,call与this之间的衔接
Dec 04 Javascript
angularJS Provider、factory、service详解及实例代码
Sep 21 Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 Javascript
Javascript中document.referrer隐藏来源的方法
Jan 16 Javascript
Vue.js中对css的操作(修改)具体方式详解
Oct 30 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读注册表
2006/10/09 PHP
在Windows版的PHP中使用ADO
2006/10/09 PHP
鸡肋的PHP单例模式应用详解
2013/06/03 PHP
PHP实现对站点内容外部链接的过滤方法
2014/09/10 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
详解JavaScript时间格式化
2015/12/23 Javascript
对象转换为原始值的实现方法
2016/06/06 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
2016/07/06 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
vue+element-ui实现表格编辑的三种实现方式
2018/10/31 Javascript
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
js实现随机点名功能
2020/12/23 Javascript
[01:10]DOTA2次级职业联赛 - EP战队宣传片
2014/12/01 DOTA
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
Python中用函数作为返回值和实现闭包的教程
2015/04/27 Python
使用Mixin设计模式进行Python编程的方法讲解
2016/06/21 Python
python3+mysql查询数据并通过邮件群发excel附件
2018/02/24 Python
wxPython的安装与使用教程
2018/08/31 Python
python去掉 unicode 字符串前面的u方法
2018/10/21 Python
python 图像平移和旋转的实例
2019/01/10 Python
python如何实现代码检查
2019/06/28 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
解决Tensorflow占用GPU显存问题
2020/02/03 Python
Anaconda使用IDLE的实现示例
2020/09/23 Python
全球领先的在线cosplay服装商店:RoleCosplay
2020/01/18 全球购物
如何转换一个字符串到enum值
2014/04/12 面试题
四好少年事迹材料
2014/01/12 职场文书
大学班级干部的自我评价分享
2014/02/10 职场文书
关于感恩的演讲稿200字
2014/08/26 职场文书
幼儿园小班个人总结
2015/02/12 职场文书
毕业生个人自荐书
2015/03/05 职场文书
2015年科研工作总结范文
2015/05/13 职场文书
导游词之任弼时故居
2020/01/07 职场文书
拒绝盗图!教你怎么用python给图片加水印
2021/06/04 Python