富文本插件bootstrap

bootstrap-wysiwyg 为Bootstrap定制的微型所见即所得（What you see is what you get）富文本编辑器（官方地址：http://www.bootcss.com/p/bootstrap-wysiwyg/）.

关于

这个jQuery Bootstrap小插件（5KB, < 200 行代码）可以将任何一个DIV转变成一个WYSIWYG富文本编辑器，灵感来自于 CLEditor 和 bootstrap-wysihtml5. 下面是他的主要特色：

在Mac和Wndows平台上能够自动针对常用操作绑定标准热键可以通过拖拽插入图片；支持图片上传（也可以获取移动设备上的照片）语音识别输入（仅限Chrome浏览器）允许自定义工具条；不生成额外标签；支持网站充分利用Bootstrap、Font Awesome等工具库的优秀特性没有强制规定的样式 – 一切都由你做主依赖浏览器的标准特性，没有非标准代码；工具条和键盘功能均可定制，并且能够执行任何浏览器支持的命令不会自己创建一个单独的frame、备份文本区等 – 本编辑器尽量保持简单，并仅仅运行在一个DIV内（可选）清除尾部空格；清除空的div和span必须运行在现代浏览器上（在Chrome 26、Firefox 19、Safari 6上经过测试，用户报告称可以在IE10上工作）支持移动设备浏览器（在IOS 6 Ipad/Iphone 和 Android 4.1.1 Chrome上测试过）。

上面是官网上的简介，话不多说，进入我们的主题，使用bootstrap-wysiwyg，下方代码为个人Demo：首先需要的样式/JS：

定义菜单栏

其中title的提示可自定义化，如字体大小我用了中文，其他的用了英语，注意编码。

  Huge Normal Small Add

最后调用我们的bootstrap-wysiwyg方法：

$(function(){ //定义字体样式 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()); }); $(‘#voiceBtn’).hide(); // 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(); // } }; //菜单栏绑定调用 initToolbarBootstrapBindings(); //插件调用 $(‘#editor’).wysiwyg(); window.prettyPrint && prettyPrint(); });

至此一个简单的Demo就好了：

image.png

附上源码链接: https://pan.baidu.com/s/1a3NNl3sbiNi_4A6pKbghhg 提取码: k7tw