bootstrap-wysiwyg这个坑

卢深
2023-12-01

但是用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();
};




转载于:https://www.cnblogs.com/shiyh/p/10437066.html

 类似资料: