所见即所得的富文本编辑器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连缀语法如何实现
Nov 29 Javascript
node.js中的console.dir方法使用说明
Dec 10 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
Aug 04 Javascript
js图片轮播效果实现代码
Apr 18 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
Nov 25 Javascript
Wireshark基本介绍和学习TCP三次握手
Aug 15 Javascript
jQuery双向列表选择器select版
Nov 01 Javascript
es6 字符串String的扩展(实例讲解)
Aug 03 Javascript
微信小程序实现下拉菜单切换效果
Mar 30 Javascript
webpack HappyPack实战详解
Oct 08 Javascript
vue移动端写的拖拽功能示例代码
Sep 09 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 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 递归效率分析
2009/11/24 PHP
php中explode与split的区别介绍
2012/10/03 PHP
thinkPHP中create方法与令牌验证实例浅析
2015/12/08 PHP
PHP实现登录注册之BootStrap表单功能
2017/09/03 PHP
Js获取事件对象代码
2010/08/05 Javascript
浅谈javascript 函数表达式和函数声明的区别
2016/01/05 Javascript
jQuery实现简单滚动动画效果
2016/04/07 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
jQuery插件实现文件上传功能(支持拖拽)
2020/08/27 Javascript
AngularJs Javascript MVC 框架
2016/06/20 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
基于vue.js中事件修饰符.self的用法(详解)
2018/02/23 Javascript
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
浅谈vue项目打包优化策略
2018/09/29 Javascript
vue中axios请求的封装实例代码
2019/03/23 Javascript
JS学习笔记之闭包小案例分析
2019/05/29 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
2020/10/29 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
[00:52]DOTA2第二届亚洲邀请赛预选赛宣传片
2017/01/13 DOTA
python创建进程fork用法
2015/06/04 Python
详解python中requirements.txt的一切
2017/03/03 Python
Python连接SQLServer2000的方法详解
2017/04/19 Python
Vans(范斯)德国官网:美国南加州的原创极限运动潮牌
2017/05/02 全球购物
优秀班集体获奖感言
2014/02/03 职场文书
委托书范文
2014/04/02 职场文书
学习雷锋演讲稿
2014/05/10 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
青涩记忆观后感
2015/06/18 职场文书
2019年关于小学生课外阅读情况的分析报告
2019/12/02 职场文书
解决python存数据库速度太慢的问题
2021/04/23 Python
Javascript设计模式之原型模式详细
2021/10/05 Javascript
Linux下使用C语言代码搭建一个简单的HTTP服务器
2022/04/13 Servers
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android