bootstrap-wysiwyg这个坑
来源:互联网 发布:淘宝小号哪里买的安全 编辑:程序博客网 时间:2024/05/17 22:25
因为对summernote不满意,所以用bootstrap-wysiwyg写了一个编辑器,但是用wysiwyg也是费了我不少的精力,特别是在图片上传上,下面做一些总结。
1、引入文件
wysiwyg号称只有5kb,但是实际上是将其他的依赖文件在cdn上用外链链接进来了,有以下几个文件:
css:
①bootstrap-combined.no-icons.min.css
②bootstrap-responsive.min.css
③font-awesome.css
重点来了,font-awesome要去官网下载3.0.2的版本才能使用,最新的版本不行,其他的版本不行,font文件夹也要用3.0.2的,不然会报错,找不到文件,编辑器的图片出不来。
js:
①jquery.min.js
②jquery.hotkey.js
③bootstrap.min.js
④bootstrap-wysiwyg.js
第一个是jq的文件,就不说了,第二个是wysiwyg热键的配置文件,还支持拖拽上传文件,第三个不说,第四个是wysiwyg的库文件。
2、使用方法
①初始化
$('#editor). wysiwyg();②设置编辑框样式
#editor {overflow:scroll; max-height:300px}这里的overflow要设置,其他的随便写,默认的宽跟外部div的宽度一直,也就是100%
③添加自己想要的功能
我想这估计也是这个框架小巧的原因,初始化没有dom的添加,只能自己手工打上去,不过还好,官网介绍中也说到,可以直接把代码拉下来,我也就没费那么多心思去研究了,把代码拉下来,然后把不想要的功能删掉。
<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"> <div class="dropdown-menu input-append"> <input class="span2" placeholder="URL" type="text" data-edit="createLink"/> <button class="btn" type="button">Add</button> </div> </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" accept="images/*" id="descripitionImg" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" multiple style="opacity: 0; position: absolute; top: -10px; left: 0px; width: 100%; height: 100%;cursor: pointer;" /> </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> </div>切记,上面这段代码是放在editor编辑框的上面的,不是放在editor那个div的里面的,我刚开始就放进去了,怎么都出不来效果。好了,基本工作做好了。
④获取编辑框的内容
看了editor,是个div,用新的属性:contenteditable=“true”,使得div可以编辑,所以获得编辑框的内容就跟平时获取代码的方法一样,由于引入了jq,所以就直接用
$('#editor').html();来获取代码,保存进数据库。官网介绍,还有个清除编辑框的方法,是$('#editor').cleanHtml();
3、遇到的问题以及解决
看中wysiwyg是因为这个框架比较小巧,但是实际上将所有的引用文件放到自己的服务器还是不少的。另外这个文件支持添加图片,可以预览,但是坑爹的是,这个框架没有写上传文件的方法,只能自己去找源码修改。于是百度,有三四个答案,看自己的需求跟他们对不上,于是想着自己改,看到有个答案是说,框架内的第一个函数,只要返回图片的链接就可以,于是就找到第一个函数,函数为readFileIntoDataUrl,这个函数只要返回上传图片的链接,就可以在编辑框中显示出上传的图片了。我用的是base64进行上传,然后将函数修改为:
var readFileIntoDataUrl = function (fileInfo) {var loader = $.Deferred(),fReader = new FileReader(),img = '';fReader.onload = function (e) {img = e.target.result;$.ajax({ url: '服务器接口', type: 'post', async: false, dataType: 'json', data: {请求的数据}, success: function(data){ if(data.responseCode == 1){loader.resolve(服务器返回的图片的地址); }else if(data.responseCode == 0){ alert('上传失败'); } } }); };fReader.onerror = loader.reject;fReader.onprogress = loader.notify;fReader.readAsDataURL(fileInfo);return loader.promise();};
然后就可以进行上传,并且显示出来了。为了研究这个图片上传,研究了半天,时间上来说,不值,但是总算是找了解决办法吧,以后就用这个来做固定的文本编辑器了。
- bootstrap-wysiwyg这个坑
- 可视化编辑器-bootstrap-wysiwyg
- 富文本之BootStrap-wysiwyg
- bootstrap-wysiwyg--富文本编辑器使用教程
- WYSIWYG
- Bootstrap -- 富文本编辑器bootstrap-wysiwyg的使用方法
- Bootstrap wysiwyg,将富文本数据保存到mysql
- bootstrap-wysiwyg中JS控件富文本的用法
- bootstrap-wysiwyg: 迷你的Bootstrap的所见即所得的HTML富文本编辑器
- 小而巧的bootstrap-wysiwyg 可以将任何一个div变成富文本编辑器
- WYSIWIS WYSIWYG ...
- bootstrap-wysiwyg中JS控件富文本中的图片由本地上传到服务器(阿里云、七牛、自己的数据库)
- 再谈WYSIWYG编辑器
- TinyMCE - Javascript WYSIWYG Editor
- Online WYSIWYG HTML Editor
- WYSIWYG--fck(摘)
- Building-a-WYSIWYG-HTML-Editor
- WYSIWYG Web Editors - The List
- 【Python】Python_learning6:Python中的sort排序函数之序列排序-从小到大&从大到小
- linux下的静态库依赖
- Android自定义ViewGroup实战-----流式布局
- openPTSP的运行及修改
- KODI16.1编译:
- bootstrap-wysiwyg这个坑
- C#项目中操作Excel文件——使用NPOI库
- 第十二章 异常处理 概念和基本使用
- 读书笔记之《重构》第二章
- 位运算
- 大数据Spark “蘑菇云”行动第34课:在IDEA中开发Spark实战
- SpringMVC后台接受前台传值的方法
- MSSQL、MySQL 数据库删除大批量千万级百万级数据的优化
- Java获取当前时间的年月日方法