百度编辑器ueditor的使用

    关于ueditor的加载使用,官网上有示例(点击打开链接),非常简单。但这里还是会稍作赘述,此处主要是分享使用div加载渲染生成编辑器时,页面只显示一次的问题。(项目原来是用iframe加载,因此不会出现这个问题)

1、在官网下载ueditor,我这里使用的是ueditor1_3_6-src版本,目录结构如下

2、将ueditor放置到项目中


这里要特别注意editor_api.js中的路径改写,推荐改写成绝对路径(我这里是相对路径),它的目的就是要找到ueditor下的_src目录,因为编辑器所用的js都会在这个目录下


3、页面引入ueditor的js

<script src="../../ueditor/ueditor.config.js" type="text/javascript"></script>
<script src="../../ueditor/editor_api.js" type="text/javascript"></script>

4、定义ueditor加载的位置和容器

<div class="tab-content">
<!-- <textarea  id="editor" name="editor"  rows="20" cols="100" ></textarea> -->
<script type="text/plain" id="editor" name="editor"></script><!--两种方式都可以-->
</div>
5、通过js方式加载渲染出编辑器

         //初始化编辑器,去掉插入图片,视频等功能按钮
	 editor = new UE.getEditor('editor',{initialFrameWidth : "99.7%",initialFrameHeight: 300,
		 autoClearinitialContent:false,wordCount:false,elementPathEnabled:false,autoFloatEnabled:false,
		 toolbars:[['fullscreen', 'source', '|', 'undo', 'redo', '|',
	                'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
	                'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
	                'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
	                'directionalityltr', 'directionalityrtl', 'indent', '|',
	                'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
	                'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
	                //'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe','insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
	                'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
	                'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
	                'print', 'preview', 'searchreplace', 'help', 'drafts']]});
整个编辑器是高度可定制的,各种属性可以从ueditor.config.js中找到。我这里为了避免上传错误,将图片、视频上传什么的屏蔽掉了(关于上传,在ueditor.config.js将路径配置对就好了)

     下面来分享下我遇到的问题及解决办法。

     通过上面的步骤,我成功的将ueditor部署到项目中,但是问题来了,页面的编辑器只有刷新才能渲染出来,也就是说所有页面编辑器只出现一次,查看控制台,并没有发现js或者路径错误,而且郁闷的是,以前做过的项目中也是这么用的,怎么就不行了呢?一定是js加载有问题(心想)?然后一对比,终于找到原因。以前做的项目页面是用的iframe标签,因此当我点击一个iframe中的链接时,它会在另一个iframe中刷新加载页面,所以不会出现我刚刚的问题。但是目前做的项目页面是用div做的,为了达到iframe的效果,页面是这样被加载的

/**
*加载页面  填充到div中
**/
function loadModal(src){	
	$("#t-right").empty();//清除div
	var _html  = [];
	$.get(src,function(data){ 
		var html = data;
		if(html.indexOf("<body>")>=0){//如果有body
			html = data.split('<body>')[1].split('</body>')[0];
		}
		$("#t-right").html(html); 
	},'html');
}
它的原理是将一个完整的html页面截取<body></body>内的html元素,然后填充到右侧的div中,左侧菜单栏中加载url就是用这个function

<a onClick="javaScript:loadModal('XXX.html')" target="mainIfr" class="not-next">菜单一</a>
这样用div的好处就是避免了用iframe的缺点,即由于iframe标签是将页面隔开的,虽便于维护,但不利于搜素引擎的蜘蛛程序抓取页面信息,因此希望总是被搜索引擎找到的网站应该用div来构造页面布局。好了,扯远了。

    这样用div加载出来的页面,它所有的js不刷新时,只加载一次。第一次时,ueditor正常加载并显示出来了,但是第二次为什么就显示不出来呢?用console.debug(editor)打印到控制台,这才知道,页面中每个ueditor都有一个uid,uid从0开始,由于用div的方式加载页面,页面不会刷新,所以uid每次都是0,这才出现了第二次显示不出来的情况。终于找到原因了,那怎么解决呢?既然每一个ueditor编辑器对应一个uid,那么只要在下次加载编辑器之前把前面的销毁掉就可以了,查看ueditor官方api,果然有destroy()方法,于是,解决方案出来了。

/**
*加载页面  填充到div中
**/
function loadModal(src){	
	//如果填充到div的内容中有编辑器,销毁已有编辑器,否则页面将渲染不出编辑器
	if($("#editor").length!=0){
		UE.getEditor('editor').destroy();
	}
	$("#t-right").empty();//清除div
	var _html  = [];
	$.get(src,function(data){ 
		var html = data;
		if(html.indexOf("<body>")>=0){//如果有body
			html = data.split('<body>')[1].split('</body>')[0];
		}
		$("#t-right").html(html); 
	},'html');
}
    原理是每次填充div内容时,都去检查是否有editor,有的话就销毁,这样做之后,console.debug(editor)每次打印出来的uid都不同,成功解决编辑器第二次不显示的问题。



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值