最近在有几个网站的项目,需要用到富文本编辑器,服务器端采用的是PHP语言,之前知道国外有几款比较好,如TinyMCE。但是由于没有接触过,估计配置起来需要一点精力。于是百度了一下,找到了百度自家的富文本编辑器UEditor。看了一下,还不错,功能非常齐全,于是就用到项目中。
关于UEditor
UEditor是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 UEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。UEditor 使用 JavaScript 编写,可以无缝地与 Java、.NET、PHP、ASP 等程序集成,比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。
UEditor的项目主页为:http://ueditor.baidu.com/,可以在项目主页下载完整源码包。
关于在项目网站已有的介绍,本文简单略过。本文主要讲述我在UEditor的安装与使用过程中遇到的一些问题,及需要注意的事项,特别是文件上传中的路径问题。如果你连网站路径或者说网站目录这些基本概念都不清楚,建议你不要继续看下去了。
安装与部署
第一步:下载UEditor到相应的目录。(后续路径请视自己的情况修改)
第二步:引入入口js文件。在需要使用的页面头部引入。
<script type="text/javascript" src="ueditor/editor_config.js"></script>
<script type="text/javascript" src="ueditor/editor_all.js"></script>
第三步:使用js创建编辑器实例及其DOM容器。(注意使用textarea的id初始化)
<textarea name="content" id=" content ">这里写你的初始化内容</textarea>
<script type="text/javascript">
UE.getEditor(' content ')
</script>
第四步(重要):修改editor_config.js文件,主要是URL变量,在最上面加上以下内容。(根据自己的路径写)
window.UEDITOR_HOME_URL = "/kx/share/ueditor/";
注意:如果将该路径写错了,将导致无法加载编辑器。
OK,经过以上四步即可完成配置,并且默认情况下,上传文件功能均可正常运行。
自定义配置
默认情况下,可以在项目下载页进行配置,但是没有手工写来的简便。可以在创建编辑器实例的时候,进行初始化配置。也就在是“安装与部署”的第三步,利用js创建实例的时候,传入json格式的配置参数即可。
例如,我的配置如下:
UE.getEditor('content',
{toolbars:[["source",'|',"undo","redo",'|',"bold","italic","underline","strikethrough",'|', 'insertorderedlist', 'insertunorderedlist', '|',"superscript","subscript",'|',"justifyleft","justifycenter","justifyright","justifyjustify",'|',"indent","rowspacingbottom","rowspacingtop","lineheight","|",'selectall', 'cleardoc'],["fontfamily","fontsize", '|',"forecolor","backcolor", '|',"pasteplain",'removeformat', 'formatmatch',"autotypeset",'|',"insertimage",'music', 'insertvideo',"attachment",'|',"link","unlink","spechars",'|',"inserttable","deletetable"],['gmap', 'insertframe','highlightcode', 'template','background',"|",'horizontal', 'date', 'time', '|', 'print', 'searchreplace', 'preview', "fullscreen"]]
,initialFrameWidth:750 //初始化编辑器宽度,默认1000
,initialFrameHeight:400 //初始化编辑器高度,默认320
,initialContent:'' //初始化编辑器的内容,也可以通过textarea/script给值,看官网例子
,wordCount:true //是否开启字数统计
,maximumWords:10000 //允许的最大字符数
,autoHeightEnabled:false // 是否自动长高,默认true
,elementPathEnabled:false //左下角显示元素路径
,autoFloatEnabled:false //工具栏浮动
,textarea:"content"
,initialStyle:'body{font-size:14px}' //编辑器内部样式,可以用来改变字体等
});
如果需要更多的配置,可以参看editor_config.js文件,里面罗列了所有可配置的参数及说明,并且有了默认的参数。当然你也可以直接修改editor_config.js文件,不过不推荐,还是建议初始化的时候进行自定义配置。
修改上传路径
PHP版本的上传,官方写的很烂。默认把文件上传到了ueditor\php的子目录下,很糟糕,对于网站迁移很不利,特别是更换成其他的编辑器。
下面讲述如何将图像上传到网站的根目录下(对于文件上传也一样修改),这里我把UEditor放在如下的目录/kx/share/ueditor/,网站访问的地址是127.0.0.1/kx/,其实是一个二级目录。
打开ueditor\php\imageUp.php, 找到
"savePath" => ($path == "1" ? "upload/" : "upload1/"),
改为
"savePath" => ($path == "1" ? "../../../upload/" : "../../../upload1/"),
注意:这里的upload1是另一个上传目录,在上传的时候可以通过html网页的option选,虽然比较灵活,但是我觉得比较鸡肋,一看就是程序员写的半成品。哎,百度的程序员也不过如此啊。
这样修改以后,就可以将文件上传到网站根目录了,其实也不是最好的办法,因为会出现很多冗余。如上传一个文件后,它的地址为:/kx/share/ueditor/php/../../../upload/20130501/201305011130205278.zip。可以看到,是从根目录遍历,但是先到下面ueditor所在的子目录,再回溯到上层目录,多走了一道路,重复了,所以说不是最佳的解决方法,但是不影响使用。
注意这里修改以后,还需要修改图片“在线管理”的路径,否则,无法在编辑器中进行历史图片的查看。打开ueditor\php\imageManager.php, 找到
$paths = array('upload/','upload1/');
改为
$paths = array('../../../upload/','../../../upload1/');
特别说明:图片路径不能含有中文,否则不能显示。
同样需要修改“图片远程抓取”的路径。打开ueditor\php\getRemoteImage.php,找到
"savePath" => "upload/" , //保存路径
改为
"savePath" => "../../../upload/" , //保存路径
注意,这里远程抓取的图片保存在了upload根目录下,要想保存在upload的子目录下,例如每个月份的文件夹下,则需要找到以下代码
//创建保存位置
$savePath = $config[ 'savePath' ];
改为:
//创建保存位置
$savePath = $config[ 'savePath' ].date( "Ym" )."/";
这是最简便的修改方法,具有通用性,如果想做到完美,可以再进行细致的修改,这里不便赘述。
修改上传的文件夹和文件名
默认情况下,会为每天上传文件新建一个文件夹,如20130501。这样,如果上传频繁的话,导致子目录非常多,不是很合理,于是改为按照每月新建上传的文件夹。打开ueditor\php\Uploader.class.php,在靠近最后找到
$pathStr .= date( "Ymd" );
改为
$pathStr .= date( "Ym" );
另外默认是按照unix时间戳重命名上传的文件名,不够直观,改成直接使用自然时间格式显示。同样,打开ueditor\php\Uploader.class.php文件,找到:
return $this->fileName = time() . rand( 1 , 10000 ) . $this->getFileExt();
改为
return $this->fileName = date("YmdHis") . rand( 1 , 10000 ) . $this->getFileExt();
注意,这后面还有一个随机数,防止同一时间上传的重复
OK,经过以上修改,基本算是比较合理了。强烈提醒,在网站迁移的时候,一定要注意编辑器的路径配置,本机与服务器路径一定相同,否则很可能造成文件路径错误。
每次来博主这里都能学到新的东西,赞一个!希望越来越多好的文章
LZ修改上传路径的做法比百度强?
每个人有自己的方法,我比较习惯于我的这个
博主,你的代码高亮是编辑器自带的,还是代码高亮插件,是什么的??求博主分享下,谢谢博主...
代码高亮完全是由CSS控制的,你搜索下,具体的我也不记得了。有时间我再写篇文章分享下
不是使用的什么插件吗?
没有用插件,只导入一个CSS,当然,代码的css要引入什么class有一个程序。就是在本地使用是个程序,把代码编程含有css的class的html代码。
谢谢博主了,有点略显高端,没怎么懂,期待博主的分享文章...
ueditor 初始化内容 怎么搞呢?
用JS加载完编辑器以后,有初始化函数。
我用的是TP框架。提交过去的数据被框架转义了,已经找到解决办法了。感谢博主回答。
我是无语了。对于不是很专业的学生来说,这下该怎么办了