所见即所得的富文本编辑器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 相关文章推荐
自动完成JS类(纯JS, Ajax模式)
Mar 12 Javascript
jquery写个checkbox——类似邮箱全选功能
Mar 19 Javascript
将input file的选择的文件清空的两种解决方案
Oct 21 Javascript
Json序列化和反序列化方法解析
Dec 19 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
Dec 27 Javascript
jquery ajax 局部刷新小案例
Feb 08 Javascript
基于jquery实现的自动补全功能
Mar 12 Javascript
JavaScript中的this机制
Jan 30 Javascript
jquery基本选择器匹配多个元素的实现方法
Sep 05 Javascript
微信小程序 教程之数据绑定
Oct 18 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
Aug 22 Javascript
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
非常酷炫的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日期时间函数的高级应用技巧
2009/05/16 PHP
10个可以简化php开发过程的MySQL工具
2010/04/11 PHP
PHP中使用socket方式GET、POST数据实例
2015/04/02 PHP
JS添加删除一组文本框并对输入信息加以验证判断其正确性
2013/04/11 Javascript
Jquery实现显示和隐藏的4种简单方式
2013/08/28 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
2014/06/24 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
2016/01/07 Javascript
字符串反转_JavaScript
2016/04/28 Javascript
javascript 用函数实现继承详解
2016/05/28 Javascript
微信小程序 教程之数据绑定
2016/10/18 Javascript
手机端js和html5刮刮卡效果
2020/09/29 Javascript
Angularjs单选框相关的示例代码
2017/08/17 Javascript
JS实现闭包中的沙箱模式示例
2017/09/07 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
2018/01/02 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
2018/08/24 Javascript
浅谈webpack4.x 入门(一篇足矣)
2018/09/05 Javascript
VUE实现可随意拖动的弹窗组件
2018/09/25 Javascript
NodeJS使用Range请求实现下载功能的方法示例
2018/10/12 NodeJs
小谈angular ng deploy的实现
2020/04/07 Javascript
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
简单的Python的curses库使用教程
2015/04/11 Python
Python中operator模块的操作符使用示例总结
2016/06/28 Python
基于数据归一化以及Python实现方式
2018/07/11 Python
在python中使用requests 模拟浏览器发送请求数据的方法
2018/12/26 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
使用python求解二次规划的问题
2020/02/29 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
Python使用xlrd实现读取合并单元格
2020/07/09 Python
意大利制造的西装、衬衫和针对男士量身定制的服装:Lanieri
2018/04/08 全球购物
意大利网上药房:Farmacia 33
2020/01/27 全球购物
高三自我鉴定范文
2013/10/19 职场文书
会计电算化个人自我评价
2013/11/17 职场文书
普通员工辞职信
2014/01/17 职场文书
自考生自我评价分享
2014/01/18 职场文书
诚实守信演讲稿
2014/09/01 职场文书
2019员工保密协议书(3篇)
2019/09/23 职场文书