当前位置:首页 » HTML/CSS

百度ueditor使用教程,ueditor使用方法

2012-04-24 19:53 本站整理 浏览(16125)

今天在不经意中看到百度出了一款HTML在线编辑器ueditor,百度ueditor编辑器功能确实很强大,不过就是有一点不足:太大了,之前豆芽用的Fckeditor也才百度ueditor的一半大小,现在豆芽一直都在使用的kindeditor甚至仅几百KB!


 


这里豆芽出个简单的ueditor使用教程,帮助大家ueditor使用方法。


 


先下载百度ueditor完整包,如果你网站服务器端语言是PHP的话,你可以删除一些个文件。像server文件夹下的upload文件夹下的asp、jsp、net文件夹都可以删除,server文件夹下的submit文件夹下的net文件夹也可以删除,还有其他像_examples文件夹都可以删除,如果你还想减轻百度ueditor编辑器大小的话甚至可以删除一些表情图片。


百度ueditor使用教程以及ueditor使用方法


 


好,在你想包含ueditor编辑器的文件头部<head></head>之间插入以下3行代码,载入ueditor需要的三个入口文件。


 


代码如下:


<script type="text/javascript" src="./ueditor/editor_config.js"></script>
<script type="text/javascript" src="./ueditor/editor_all.js"></script>
<link rel="stylesheet" href="./ueditor/themes/default/ueditor.css"/>

然后在你需要显示ueditor编辑器的地方插入如下代码:


<div id="myEditor"></div>
<script type="text/javascript">
	var editor = new baidu.editor.ui.Editor();
	editor.render("myEditor");
</script>

其中ueditor编辑器将在id为myEditor的div块里显示。


好啦,刷新你的页面可以完美的显示ueditor了。


 


小问题:


有些童鞋反应说无法弹出dialog窗口和表情图片等,就是点击插入图片的图片无法显示。


原因:这是由于配置文件里的路径不正确造成的,豆芽刚开始测试的时候也遇到了同样的问题。


解决办法:


打开editor_congif.js文件,在前几行有一行定义URL的js代码,我的做法是注释掉它的,在下一行添加如下申明代码:


var URL = "./ueditor/";

注意:我的ueditor相对于加载ueditor的页面是同级的,这个大家写好相对当前显示ueditor的相对路径即可。