热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

这篇文章主要为大家分享一款所见即所得的富文本编辑器bootstrap-wysiwyg,并详细告诉大家文本编辑器bootstrap-wysiwyg的使用方法,感兴趣的小伙伴们可以参考一下

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

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

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

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




 




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

 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($('
  • '+fontName + '
  • ')); }); $('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); } $('
    '+ 'File upload error '+msg+'
    ').prependTo('#alerts'); }; initToolbarBootstrapBindings(); $('#editor').wysiwyg({ fileUploadError: showErrorAlert} );

    最后是HTML代码:

     
    
     
    输入内容…

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

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


    推荐阅读
    • 使用chrome编辑器实现网页截图功能的方法
      本文介绍了在chrome浏览器中使用编辑器实现网页截图功能的方法。通过在地址栏中输入特定命令,打开控制台并调用命令面板,用户可以方便地进行网页截图操作。 ... [详细]
    • PHP编程能开发哪些应用?
      导读:很多朋友问到关于PHP编程能开发哪些应用的相关问题,本文编程笔记就来为大家做个详细解答,供大家参考,希望对大家有所帮助!一起来看看吧!本文目录一览: ... [详细]
    • Python瓦片图下载、合并、绘图、标记的代码示例
      本文提供了Python瓦片图下载、合并、绘图、标记的代码示例,包括下载代码、多线程下载、图像处理等功能。通过参考geoserver,使用PIL、cv2、numpy、gdal、osr等库实现了瓦片图的下载、合并、绘图和标记功能。代码示例详细介绍了各个功能的实现方法,供读者参考使用。 ... [详细]
    • PDF内容编辑的两种小方法,你知道怎么操作吗?
      本文介绍了两种PDF内容编辑的方法:迅捷PDF编辑器和Adobe Acrobat DC。使用迅捷PDF编辑器,用户可以通过选择需要更改的文字内容并设置字体形式、大小和颜色来编辑PDF文件。而使用Adobe Acrobat DC,则可以通过在软件中点击编辑来编辑PDF文件。PDF文件的编辑可以帮助办公人员进行文件内容的修改和定制。 ... [详细]
    • 深入理解CSS中的margin属性及其应用场景
      本文主要介绍了CSS中的margin属性及其应用场景,包括垂直外边距合并、padding的使用时机、行内替换元素与费替换元素的区别、margin的基线、盒子的物理大小、显示大小、逻辑大小等知识点。通过深入理解这些概念,读者可以更好地掌握margin的用法和原理。同时,文中提供了一些相关的文档和规范供读者参考。 ... [详细]
    • 本文介绍了响应式页面的概念和实现方式,包括针对不同终端制作特定页面和制作一个页面适应不同终端的显示。分析了两种实现方式的优缺点,提出了选择方案的建议。同时,对于响应式页面的需求和背景进行了讨论,解释了为什么需要响应式页面。 ... [详细]
    • 本文介绍了一个免费的asp.net控件,该控件具备数据显示、录入、更新、删除等功能。它比datagrid更易用、更实用,同时具备多种功能,例如属性设置、数据排序、字段类型格式化显示、密码字段支持、图像字段上传和生成缩略图等。此外,它还提供了数据验证、日期选择器、数字选择器等功能,以及防止注入攻击、非本页提交和自动分页技术等安全性和性能优化功能。最后,该控件还支持字段值合计和数据导出功能。总之,该控件功能强大且免费,适用于asp.net开发。 ... [详细]
    • ECMA262规定typeof操作符的返回值和instanceof的使用方法
      本文介绍了ECMA262规定的typeof操作符对不同类型的变量的返回值,以及instanceof操作符的使用方法。同时还提到了在不同浏览器中对正则表达式应用typeof操作符的返回值的差异。 ... [详细]
    • Unity3D引擎的体系结构和功能详解
      本文详细介绍了Unity3D引擎的体系结构和功能。Unity3D是一个屡获殊荣的工具,用于创建交互式3D应用程序。它由游戏引擎和编辑器组成,支持C#、Boo和JavaScript脚本编程。该引擎涵盖了声音、图形、物理和网络功能等主题。Unity编辑器具有多语言脚本编辑器和预制装配系统等特点。本文还介绍了Unity的许可证情况。Unity基本功能有限的免费,适用于PC、MAC和Web开发。其他平台或完整的功能集需要购买许可证。 ... [详细]
    • 本文整理了常用的CSS属性及用法,包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等,方便开发者查阅和使用。 ... [详细]
    • css元素可拖动,如何使用CSS禁止元素拖拽?
      一、用户行为三剑客以下3个CSS属性:user-select属性可以设置是否允许用户选择页面中的图文内容;user-modify属性可以设置是否允许输入 ... [详细]
    • php课程Json格式规范需要注意的小细节
      JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScriptProgramming ... [详细]
    • 文章目录简介HTTP请求过程HTTP状态码含义HTTP头部信息Cookie状态管理HTTP请求方式简介HTTP协议(超文本传输协议)是用于从WWW服务 ... [详细]
    • 最近在学Python,看了不少资料、视频,对爬虫比较感兴趣,爬过了网页文字、图片、视频。文字就不说了直接从网页上去根据标签分离出来就好了。图片和视频则需要在获取到相应的链接之后取做下载。以下是图片和视 ... [详细]
    • Scrapy 爬取图片
      1.创建Scrapy项目scrapystartprojectCrawlMeiziTuscrapygenspiderMeiziTuSpiderhttps:movie.douban.c ... [详细]
    author-avatar
    冷漠自逍遥2602897565
    这个家伙很懒,什么也没留下!
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有