百度编辑器ueditor的使用

最新推荐文章于 2021-01-12 13:31:33 发布

siqilou

最新推荐文章于 2021-01-12 13:31:33 发布

阅读量3.8k

点赞数

分类专栏：编辑器文章标签： ueditor 百度编辑器 iframe div 编辑器

本文链接：https://blog.csdn.net/siqilou/article/details/39322939

版权

编辑器专栏收录该内容

3 篇文章 0 订阅

订阅专栏

关于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都不同，成功解决编辑器第二次不显示的问题。