当前位置: 首页 > 工具软件 > wysiwyg-css > 使用案例 >

bootstrap-wysiwyg这个坑

谢泽语
2023-12-01

因为对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();
	};


然后就可以进行上传,并且显示出来了。为了研究这个图片上传,研究了半天,时间上来说,不值,但是总算是找了解决办法吧,以后就用这个来做固定的文本编辑器了。

 类似资料: