所见即所得的富文本编辑器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刷新框架子页面的七种方法代码
Nov 20 Javascript
JavaScript 学习笔记(十二) dom
Jan 21 Javascript
javascript实现TreeView 无刷新展开的实例代码
Jul 13 Javascript
JS 实现导航栏悬停效果(续2)
Sep 24 Javascript
浏览器兼容console对象的简要解决方案分享
Oct 24 Javascript
jQuery focus和blur事件的应用详解
Jan 26 Javascript
JavaScript数字和字符串转换示例
Mar 26 Javascript
js 实现的可折叠留言板(附源码下载)
Jul 01 Javascript
使用javaScript实现鼠标拖拽事件
Apr 03 Javascript
Javascript获取某个月的天数
May 30 Javascript
详解webpack打包后如何调试的方法步骤
Nov 07 Javascript
layui 阻止图片上传的实例(before方法)
Sep 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
通过文字传递创建的图形按钮
2006/10/09 PHP
一些PHP写的小东西
2006/12/06 PHP
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
php中{}大括号是什么意思
2013/12/01 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
Yii2.0实现生成二维码功能实例
2017/10/24 PHP
JS函数实现动态添加CSS样式表文件
2012/12/15 Javascript
firefox浏览器不支持innerText的解决方法
2013/08/07 Javascript
javascript一元操作符(递增、递减)使用示例
2013/08/07 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
2013/09/10 Javascript
js输入框邮箱自动提示功能代码实现
2013/12/10 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
2015/05/12 Javascript
Javascript实现字数统计
2015/07/03 Javascript
javascript实现动态导入js与css等静态资源文件的方法
2015/07/25 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
2019/03/06 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
Python编程之string相关操作实例详解
2017/07/22 Python
Python开发最牛逼的IDE——pycharm
2018/08/01 Python
纯用NumPy实现神经网络的示例代码
2018/10/24 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2019/07/09 Python
详解python命令提示符窗口下如何运行python脚本
2020/09/11 Python
python FTP编程基础入门
2021/02/27 Python
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
2016/04/26 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
具有防紫外线功能的高性能钓鱼服装:Hook&Tackle
2018/08/16 全球购物
编程用JAVA解析XML的方式
2013/07/07 面试题
我的动漫时代的创业计划书范文
2014/01/27 职场文书
一年级学生评语大全
2014/04/21 职场文书
幼儿园校园小喇叭广播稿
2014/10/17 职场文书
群众路线教育实践活动学习心得体会
2014/10/30 职场文书
夫妻双方自愿离婚协议书怎么写
2014/12/01 职场文书
草房子读书笔记
2015/06/29 职场文书
旅游安全责任协议书
2016/03/22 职场文书
SQL Server表分区降低运维和维护成本
2022/04/08 SQL Server