最近在有几个网站的项目,需要用到富文本编辑器,服务器端选用的是PHP语言,之前晓得国内有几款比较好,如TinyMCE。但是因为没有接触过,估计配置上去还要一点精力。于是百度了一下,找到了百度自家的富文本编辑器UEditor。看了一下,还不错,功能十分齐备,于是就用到项目中。

  关于UEditor

  UEditor是一套开源的在线HTML编辑器,主要适于使用户在网站上斩获所见即所得编辑疗效,开发人员可以用 UEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。UEditor 使用 JavaScript 编写,可以无缝地与 Java、.NET、PHP、ASP 等程序集成,比较适宜在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。

  UEditor的项目主页为:,可以在项目主页下载完整源码包。

  关于在项目网站已有的介绍,本文简略略过。本文主要述说我在UEditor的安装与使用过程中遇见的一些问题,及须要留意的事项,特别是文件上传中的路径问题。如果你连网站路径或则说网站目录很多基本概念都不清楚,建议你不要继续看下来了。

  安装与布署

  第一步:下载UEditor至相应的目录。(后续路径请视自己的状况更改)

  第二步:引入入口js文件。在须要使用的页面背部引进。

  

  第三步:使用js争创编辑器例子及其DOM容器。(注意使用textarea的id初始化)

   这里写你的初始化内容

      
        UE.getEditor(' content ')   
      

  第四步(重要):修改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][1]的子目录下,很糟糕,对于网站迁移太不利,特别是更换成其他的编辑器。

  下面述说怎样将图象上传至网站的根目录下(对于文件上传也一样更改),这里我把UEditor置于如下的目录/kx/share/ueditor/,网站访问的地址是127.0.0.1/kx/,其实是一个二级目录。

  打开ueditorphpimageUp.php, 找到

   "savePath" => ($path == "1" ? "upload/" : "upload1/"),

  改为

   "savePath" => ($path == "1" ? "../../../upload/" : "../../../upload1/"),

  注意:这里的upload1是另一个上传目录,在上传的时侯可以通过html网页的option选,虽然比较灵活,但是我认为比较鸡肋,一看就是程序员写的半成品。哎,百度的程序员也不过如此啊。

  这样更改之后,就可以将文件上传至网站根目录了,其实也不是最好的方法,因为会出现这些冗余。如上传一个文件后,它的地址为:/kx/share/ueditor/php/../../../upload/20130501/2205278.zip。可以看见,是从根目录递归,但是先至下边ueditor所在的子目录,再回溯至下层目录,多走了一公路,重复了,所以说不是最佳的解决办法,但是不影响使用。

  注意这儿更改之后,还须要更改图片“在线管理”的路径,否则,无法在编辑器中进行历史图片的查看。打开ueditorphpimageManager.php, 找到

   $paths = array('upload/','upload1/');

  改为

   $paths = array('../../../upload/','../../../upload1/');

  特别说明:图片路径不能富含英文,否则不能显示。

  同样须要更改“图片远程抓取”的路径。打开ueditorphpgetRemoteImage.php,找到

   "savePath" => "upload/" , //保存路径

  改为

   "savePath" => "../../../upload/" , //保存路径

  注意,这里远程抓取的图片保存在了upload根目录下,要想保存在upload的子目录下,例如每位上旬的文件夹下,则须要找到以下代码

   //创建保存位置

    $savePath = $config[ 'savePath' ];  

  改为:

   //创建保存位置

    $savePath = $config[ 'savePath' ].date( "Ym" )."/";  

  这是最简便的更改方式,具有通用性,如果想做到完美,可以再进行细腻的更改,这里不便赘言。

  修改上传的文件夹跟文件名

  默认状况下,会为一天上传文件改建一个文件夹,如20130501。这样,如果上传经常的话,导致子目录特别多typecho 富文本编辑器,不是太合理,于是改为根据每月改建上传的文件夹。打开ueditorphpUploader.class.php,在紧靠最后找到

   $pathStr .= date( "Ymd" );

  改为

   $pathStr .= date( "Ym" );

  另外默认是根据unix时间戳重命名上传的文件名,不够直观,改成直接使用自然时间格式显示。同样,打开ueditorphpUploader.class.php文件,找到:

   return $this->fileName = time() . rand( 1 , 10000 ) . $this->getFileExt();

  改为

   return $this->fileName = date("YmdHis") . rand( 1 , 10000 ) . $this->getFileExt();

  注意typecho 富文本编辑器,这上面也有一个随机数,防止同一时间上传的重复

  OK,经过以上更改,基本算是比较合理了。强烈告诫,在网站迁移的时侯,一定要留意编辑器的路径配置,本机与服务器路径一定相似,否则太或许导致文件路径错误。

最后修改:2020 年 12 月 15 日 08 : 13 PM
如果觉得我的文章对你有用,请随意赞赏