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


Posted in Javascript onMay 27, 2016

本文教大家如何使用bootstrap-wysiwyg文本编辑器,充分发挥编辑器的优势,希望大家可以有所收获。

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

主要特性:
  超小5kb
  自动的热键支持(MAC和windows)
  拖放的插入图片,支持图片上传(支持手机拍照)
  支持声音输入(chrome支持)
  允许自定义的工具条,可以使用所有的bootstrap内容,字体
  不使用任何强制的样式
  …………………………

其实不止这些,需要大家自己去探索,加油吧!

使用其实很简单的,倒入bootstrap相关CSS,JS,jQuery,还有bootstrap-wysiwyg的JS,如下:

<link href="bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="bootstrap-responsive.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="index.css" type="text/css"> </link>
<script src="jquery1.9.1.min.js" type="text/javascript"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-wysiwyg.js" type="text/javascript"></script>
<script src="external/jquery.hotkeys.js" type="text/javascript"></script>

定义相关菜单项目属性和方法:

function initToolbarBootstrapBindings() {
  var fonts = ['Serif', 'Sans', 'Arial', 'Arial Black', 'Courier', 
   'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande', 'Lucida Sans', 'Tahoma', 'Times',
   'Times New Roman', 'Verdana'],
   fontTarget = $('[title=Font]').siblings('.dropdown-menu');
  $.each(fonts, function (idx, fontName) {
   fontTarget.append($('<li><a data-edit="fontName ' + fontName +'" style="font-family:\''+ fontName +'\'">'+fontName + '</a></li>'));
  });
  $('a[title]').tooltip({container:'body'});
  $('.dropdown-menu input').click(function() {return false;})
  .change(function () {$(this).parent('.dropdown-menu').siblings('.dropdown-toggle').dropdown('toggle');})
  .keydown('esc', function () {this.value='';$(this).change();});

  $('[data-role=magic-overlay]').each(function () { 
  var overlay = $(this), target = $(overlay.data('target')); 
  overlay.css('opacity', 0).css('position', 'absolute').offset(target.offset()).width(target.outerWidth()).height(target.outerHeight());
  });
  if ("onwebkitspeechchange" in document.createElement("input")) {
  var editorOffset = $('#editor').offset();
  $('#voiceBtn').css('position','absolute').offset({top: editorOffset.top, left: editorOffset.left+$('#editor').innerWidth()-35});
  } else {
  $('#voiceBtn').hide();
  }
 };
 function showErrorAlert (reason, detail) {
 var msg='';
 if (reason==='unsupported-file-type') { msg = "Unsupported format " +detail; }
 else {
 console.log("error uploading file", reason, detail);
 }
 $('<div class="alert"> <button type="button" class="close" data-dismiss="alert">×</button>'+ 
 '<strong>File upload error</strong> '+msg+' </div>').prependTo('#alerts');
 };
 initToolbarBootstrapBindings(); 
 $('#editor').wysiwyg({ fileUploadError: showErrorAlert} );

最后是HTML代码:

<div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
  <div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font"><i class="icon-font"></i><b class="caret"></b></a>
   <ul class="dropdown-menu">
   </ul>
  </div>
  <div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font Size"><i class="icon-text-height"></i> <b class="caret"></b></a>
   <ul class="dropdown-menu">
   <li><a data-edit="fontSize 5"><font size="5">Huge</font></a></li>
   <li><a data-edit="fontSize 3"><font size="3">Normal</font></a></li>
   <li><a data-edit="fontSize 1"><font size="1">Small</font></a></li>
   </ul>
  </div>
  <div class="btn-group">
  <a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="icon-bold"></i></a>
  <a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="icon-italic"></i></a>
  <a class="btn" data-edit="strikethrough" title="Strikethrough"><i class="icon-strikethrough"></i></a>
  <a class="btn" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i class="icon-underline"></i></a>
  </div>
  <div class="btn-group">
  <a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="icon-list-ul"></i></a>
  <a class="btn" data-edit="insertorderedlist" title="Number list"><i class="icon-list-ol"></i></a>
  <a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="icon-indent-left"></i></a>
  <a class="btn" data-edit="indent" title="Indent (Tab)"><i class="icon-indent-right"></i></a>
  </div>
  <div class="btn-group">
  <a class="btn" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)"><i class="icon-align-left"></i></a>
  <a class="btn" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"><i class="icon-align-center"></i></a>
  <a class="btn" data-edit="justifyright" title="Align Right (Ctrl/Cmd+R)"><i class="icon-align-right"></i></a>
  <a class="btn" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)"><i class="icon-align-justify"></i></a>
  </div>
  <div class="btn-group">
 <a class="btn dropdown-toggle" data-toggle="dropdown" title="Hyperlink"><i class="icon-link"></i></a>
  <div class="dropdown-menu input-append">
  <input class="span2" placeholder="URL" type="text" data-edit="createLink"/>
  <button class="btn" type="button">Add</button>
  </div>
  <a class="btn" data-edit="unlink" title="Remove Hyperlink"><i class="icon-cut"></i></a>
  </div>
  
  <div class="btn-group">
  <a class="btn" title="Insert picture (or just drag & drop)" id="pictureBtn"><i class="icon-picture"></i></a>
  <input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" />
  </div>
  <div class="btn-group">
  <a class="btn" data-edit="undo" title="Undo (Ctrl/Cmd+Z)"><i class="icon-undo"></i></a>
  <a class="btn" data-edit="redo" title="Redo (Ctrl/Cmd+Y)"><i class="icon-repeat"></i></a>
  </div>
  <input type="text" data-edit="inserttext" id="voiceBtn" x-webkit-speech="">
 </div>

 <div id="editor">
  输入内容…
 </div>

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

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

Javascript 相关文章推荐
jquery实现智能感知连接外网搜索
May 21 Javascript
浅析Js中的单引号与双引号问题
Nov 06 Javascript
JS不能跨域借助jquery获取IP地址的方法
Aug 20 Javascript
JavaSacript中charCodeAt()方法的使用详解
Jun 05 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
Jun 28 Javascript
纯js实现html转pdf的简单实例(推荐)
Feb 16 Javascript
vue路由跳转时判断用户是否登录功能的实现
Oct 26 Javascript
详解webpack自定义loader初探
Aug 29 Javascript
jQuery使用each遍历循环的方法
Sep 19 jQuery
Vue 框架之动态绑定 css 样式实例分析
Nov 14 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
Aug 23 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
Oct 11 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
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
May 27 #Javascript
You might like
php 的加密函数 md5,crypt,base64_encode 等使用介绍
2012/04/09 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
php实现文件上传及头像预览功能
2017/01/15 PHP
PHP使用Redis实现防止大并发下二次写入的方法
2017/10/09 PHP
PHP中number_format()函数的用法讲解
2019/04/08 PHP
php变量与字符串的增删改查操作示例
2020/05/07 PHP
msn上的tab功能Firefox对childNodes处理的一个BUG
2008/01/21 Javascript
JavaScript Eval 函数使用
2010/03/23 Javascript
javascript制作2048游戏
2015/03/30 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
2016/05/24 Javascript
每日十条JavaScript经验技巧(二)
2016/06/23 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
2017/02/16 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
2017/06/09 jQuery
JavaScript之生成器_动力节点Java学院整理
2017/06/30 Javascript
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
Node.js笔记之process模块解读
2018/05/31 Javascript
在vue-cli中引入lodash.js并使用详解
2019/11/13 Javascript
微信小程序登陆注册功能的实现代码
2019/12/10 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
2020/06/11 Javascript
[30:55]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第二场 11.18
2020/11/18 DOTA
关于Python中Inf与Nan的判断问题详解
2017/02/08 Python
特征脸(Eigenface)理论基础之PCA主成分分析法
2018/03/13 Python
python对象与json相互转换的方法
2019/05/07 Python
python导入坐标点的具体操作
2019/05/10 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
Python迭代器协议及for循环工作机制详解
2020/07/14 Python
一波HTML5 Canvas基础绘图实例代码集合
2016/02/28 HTML / CSS
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
创业融资计划书
2014/04/25 职场文书
2014年数学教师工作总结
2014/12/03 职场文书
创业开店,这样方式更合理
2019/08/26 职场文书
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript