首页 > 代码库 > 百度富文本编辑器ueditor使用总结

百度富文本编辑器ueditor使用总结

最近做的项目用到了ueditor这个东东,但是他的一些配置文档对初次使用者来说很难以理解,故作此总结

 

1.ueditor 官方地址:http://ueditor.baidu.com/website/index.html

   开发文档地址:http://ueditor.baidu.com/website/document.html

   下载地址:http://ueditor.baidu.com/website/download.html (这里可选开发版,或MINI版)

 

2. 从官网上下载完整源码包,解压到任意目录,解压后的源码目录结构如下所示:

     _examples:编辑器完整版的示例页面

    dialogs:弹出对话框对应的资源和js文件

    themes:样式图片和样式文件   PHP/jsp/.net:涉及到服务器端操作的后台文件,根据你选择的不同后台版本,这里也会不同,这里我们选择php

    third-party:第三方插件(包括代码高亮,源码编辑等组件)

    editor_all.js:_src目录下所有文件的打包文件(用于发布版本)

    editor_api.js: API接口配置文件(开发版本)

    editor_all_min.js:editor_all.js文件的压缩版,建议在正式部署时才采用

    editor_config.js:编辑器的配置文件,建议和编辑器实例化页面置于同一目录

 

3.编辑器的实例化页面,导入编辑器需要的三个入口文件,示例代码如下:

 

[javascript] view plain copy
 
  1. <script type="text/javascript" charset="utf-8" src=http://www.mamicode.com/"../umeditor.config.js"></script>  
  2.   
  3.     <!--使用版-->  
  4.     <!--<script type="text/javascript" charset="utf-8" src=http://www.mamicode.com/"../umeditor.all.js"></script>-->  
  5.   
  6.     <!--开发版-->  
  7.     <script type="text/javascript" charset="utf-8" src=http://www.mamicode.com/"editor_api.js"></script>  
  8.     <script type="text/javascript" src=http://www.mamicode.com/"../lang/zh-cn/zh-cn.js"></script>  

 

 

4.然后在编辑器的实例化页面中创建编辑器实例及其DOM容器,示例代码如下:

 

[javascript] view plain copy
 
  1. <textarea name="后台取值的key" id="myEditor">这里写你的初始化内容</textarea>  
  2. <script type="text/javascript">  
  3.     var editor = new UE.ui.Editor();  
  4.     editor.render("myEditor");  
  5.     //1.2.4以后可以使用一下代码实例化编辑器  
  6.     //UE.getEditor(‘myEditor‘)  
  7. </script>  


5.在editor_config.js中查找URL变量配置编辑器在你项目中的路径。

 

官网示例:

 

[javascript] view plain copy
 
  1. //强烈推荐以这种方式进行绝对路径配置  
  2. URL= window.UEDITOR_HOME_URL||"/UETest/ueditor/";  


我的配置:

 

 

[javascript] view plain copy
 
  1. (function () {  
  2.     /** 
  3.      * 编辑器资源文件根路径。它所表示的含义是:以编辑器实例化页面为当前路径,指向编辑器资源文件(即dialog等文件夹)的路径。 
  4.      * 鉴于很多同学在使用编辑器的时候出现的种种路径问题,此处强烈建议大家使用"相对于网站根目录的相对路径"进行配置。 
  5.      * "相对于网站根目录的相对路径"也就是以斜杠开头的形如"/myProject/umeditor/"这样的路径。 
  6.      * 如果站点中有多个不在同一层级的页面需要实例化编辑器,且引用了同一UEditor的时候,此处的URL可能不适用于每个页面的编辑器。 
  7.      * 因此,UEditor提供了针对不同页面的编辑器可单独配置的根路径,具体来说,在需要实例化编辑器的页面最顶部写上如下代码即可。当然,需要令此处的URL等于对应的配置。 
  8.      * window.UMEDITOR_HOME_URL = "/xxxx/xxxx/"; 
  9.      */  
  10.       
  11.     /** 
  12.      * @author wusuopubupt 
  13.      * @date 2013-10-24 
  14.      *  
  15.      * set window.UMEDITOR_HOME_URL = "/ueditor/"; 
  16.      *  
  17.      * */  
  18.     window.UMEDITOR_HOME_URL = "/ueditor/";  //注意就是这里!  
  19.       
  20.     var URL = window.UMEDITOR_HOME_URL || (function(){  
  21.   
  22.         function PathStack() {  



6.如果用editor_api.js (也就是不用editor.all.js)开发时,打开editor_api.js,代码如下

 

 

[javascript] view plain copy
 
  1. /** 
  2.  * 开发版本的文件导入 
  3.  */  
  4. (function (){  
  5.     var paths  = [  
  6.             ‘editor.js‘,  
  7.             ‘core/browser.js‘,  
  8.             ‘core/utils.js‘,  
  9.             ‘core/EventBase.js‘,  
  10.             ‘core/dtd.js‘,  
  11.             ‘core/domUtils.js‘,  
  12.             ‘core/Range.js‘,  
  13.             ‘core/Selection.js‘,  
  14.             ‘core/Editor.js‘,  
  15.             ‘core/filterword.js‘,  
  16.             ‘core/node.js‘,  
  17.             ‘core/htmlparser.js‘,  
  18.             ‘core/filternode.js‘,  
  19.             ‘plugins/inserthtml.js‘,  
  20.             ‘plugins/image.js‘,  
  21.             ‘plugins/justify.js‘,  
  22.             ‘plugins/font.js‘,  
  23.             ‘plugins/link.js‘,  
  24.             ‘plugins/print.js‘,  
  25.             ‘plugins/paragraph.js‘,  
  26.             ‘plugins/horizontal.js‘,  
  27.             ‘plugins/cleardoc.js‘,  
  28.             ‘plugins/undo.js‘,  
  29.             ‘plugins/paste.js‘,  
  30.             ‘plugins/list.js‘,  
  31.             ‘plugins/source.js‘,  
  32.             ‘plugins/enterkey.js‘,  
  33.             ‘plugins/preview.js‘,  
  34.             ‘plugins/basestyle.js‘,  
  35.             ‘plugins/video.js‘,  
  36.             ‘plugins/selectall.js‘,  
  37.             ‘plugins/removeformat.js‘,  
  38.             ‘plugins/keystrokes.js‘,  
  39.             ‘plugins/dropfile.js‘,  
  40.             ‘ui/widget.js‘,  
  41.             ‘ui/button.js‘,  
  42.             ‘ui/toolbar.js‘,  
  43.             ‘ui/menu.js‘,  
  44.             ‘ui/dropmenu.js‘,  
  45.             ‘ui/splitbutton.js‘,  
  46.             ‘ui/colorsplitbutton.js‘,  
  47.             ‘ui/popup.js‘,  
  48.             ‘ui/scale.js‘,  
  49.             ‘ui/colorpicker.js‘,  
  50.             ‘ui/combobox.js‘,  
  51.             ‘ui/buttoncombobox.js‘,  
  52.             ‘ui/modal.js‘,  
  53.             ‘ui/tooltip.js‘,  
  54.             ‘ui/tab.js‘,  
  55.             ‘ui/separator.js‘,  
  56.             ‘ui/scale.js‘,  
  57.             ‘adapter/adapter.js‘,  
  58.             ‘adapter/button.js‘,  
  59.             ‘adapter/fullscreen.js‘,  
  60.             ‘adapter/dialog.js‘,  
  61.             ‘adapter/popup.js‘,  
  62.             ‘adapter/imagescale.js‘,  
  63.             ‘adapter/autofloat.js‘,  
  64.             ‘adapter/source.js‘,  
  65.             ‘adapter/combobox.js‘  
  66.         ],  
  67.         /** 
  68.          * @author wusuopubupt 
  69.          * @date 2013-10-24 
  70.          *  
  71.          * modified  baseURL = ‘/ueditor/src/‘;  
  72.          */  
  73.         baseURL = ‘/ueditor/src/‘;   
  74.     for (var i=0,pi;pi = paths[i++];) {  
  75.         document.write(‘<script type="text/javascript" src="http://www.mamicode.com/‘+ baseURL + pi +‘"></script>‘);  
  76.     }  
  77. })();  


可以看到,这里有一项:baseURL,就是JS文件的路由,这里要根据ueditor_api.js文件的实际路径去配置!
    
  7.文件上传问题:

 

打开ueditor.config.js,可以看到如下配置:

 

[javascript] view plain copy
 
  1. //图片上传配置区  
  2.        ,imageUrl:URL+"php/imageUp.php"             //图片上传提交地址  
  3.        //,imagePath:URL + "php/"                     //图片修正地址,引用了fixedImagePath,如有特殊需求,可自行配置  
  4.        ,imagePath:"http://test.mathandcs.com/"  
  5.        ,imageFieldName:"upfile"                   //图片数据的key,若此处修改,需要在后台对应文件修改对应参数  


这里的imageURL是图片上传所调用的php文件的地址,而imagePath则是为新上传的图片生成的图片地址的host部分;

 

再打开ueditor/php/下的imageUp.php文件,有配置如下:

 

[php] view plain copy
 
  1. $config = array(  
  2.         "savePath" => "/var/www/store/upload/" ,             //存储文件夹  
  3.         "maxSize" => 1000 ,                   //允许的文件最大尺寸,单位KB  
  4.         "allowFiles" => array( ".gif" , ".png" , ".jpg" , ".jpeg" , ".bmp" )  //允许的文件格式  
  5.     );  
  6.     //上传文件目录  
  7.     //$Path = "upload/";  
  8.     $Path = "/var/www/store/upload/";  


   这里需要把上传文件到服务器的目的地址(上传文件保存文件)savePath修改成你指定的文件地址。

 

由于相对路径和绝对路径的问题,生成的地址有可能是错的,这时就要hack一下生成图片URL的JS文件:

ueditor/dialogs/image/image.js 中修改:

 

[javascript] view plain copy
 
  1. /** 
  2.                  * @author wusuopubupt 
  3.                  * @date 2013-10-24 
  4.                  * @return url modified 
  5.                  * */  
  6.                 var reg = /\/var\/www\/test\/upload\//;  
  7.                 url = url.replace(reg,"");  
  8.                   
  9.                 var $img = $("<img src=http://www.mamicode.com/‘" + editor.options.imagePath + url + "‘ class=‘edui-image-pic‘ />"),  
  10.                     $item = $("<div class=‘edui-image-item edui-image-upload-item‘><div class=‘edui-image-close‘></div></div>").append($img);  


这里的正则的规则要根据具体情况来定!

 

 

至此,Ueditor便在我的环境中配置成功了。

更多详细的文档请参考ueditor官网DOC:http://ueditor.baidu.com/website/document.html

百度富文本编辑器ueditor使用总结