极力推荐一款小巧玲珑的可视化编辑器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 相关文章推荐
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
Aug 15 Javascript
ASP中用Join和Array,可以加快字符连接速度的代码
Aug 22 Javascript
异步加载script的代码
Jan 12 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
Oct 21 Javascript
基于jQuery实现美观且实用的倒计时实例代码
Dec 30 Javascript
JS获取鼠标坐标位置实例分析
Jan 20 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
Dec 02 Javascript
javascript数据类型详解
Feb 07 Javascript
如何利用ES6进行Promise封装总结
Feb 11 Javascript
vue使用swiper实现中间大两边小的轮播图效果
Nov 24 Javascript
JavaScript实现tab栏切换效果
Mar 16 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
所见即所得的富文本编辑器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和AJAX创建RSS聚合器的代码
2007/03/13 PHP
安装PHP可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
分享8个最佳的代码片段在线测试网站
2013/06/29 PHP
兼容PHP和Java的des加密解密代码分享
2014/06/26 PHP
php实现给图片加灰色半透明效果的方法
2014/10/20 PHP
用php代码限制国内IP访问我们网站
2015/09/26 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
javascript 循环读取JSON数据的代码
2010/07/17 Javascript
基于javascript实现图片左右切换效果
2016/01/25 Javascript
浅谈javascript alert和confirm的美化
2016/12/15 Javascript
详解nodejs异步I/O和事件循环
2017/06/07 NodeJs
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
vue使用xe-utils函数库的具体方法
2018/03/06 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
2018/07/11 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
Vue实现购物车实例代码两则
2020/05/30 Javascript
Python实现的凯撒密码算法示例
2018/04/12 Python
python实现word文档批量转成自定义格式的excel文档的思路及实例代码
2020/02/21 Python
python3用urllib抓取贴吧邮箱和QQ实例
2020/03/10 Python
django的模型类管理器——数据库操作的封装详解
2020/04/01 Python
python如何调用php文件中的函数详解
2020/12/29 Python
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
2013/06/06 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
阿拉伯世界最大的电子卖场:Souq埃及
2016/08/01 全球购物
俄罗斯香水和化妆品在线商店:Aroma-butik
2020/02/28 全球购物
总裁岗位职责
2013/12/04 职场文书
中专毕业生自我鉴定
2014/02/02 职场文书
领导干部考察材料
2014/02/08 职场文书
辞旧迎新演讲稿
2014/09/15 职场文书
领导班子专题民主生活会情况想汇报
2014/09/30 职场文书
2015年导购员工作总结
2015/04/25 职场文书
创业计划书介绍
2019/04/24 职场文书
pytorch中的numel函数用法说明
2021/05/13 Python
mysql升级到5.7时,wordpress导数据报错1067的问题
2021/05/27 MySQL
MySQL中的隐藏列的具体查看
2021/09/04 MySQL
Python matplotlib多个子图绘制整合
2022/04/13 Python