百度UEditor编辑器使用教程与使用方法(图文)

* window.UMEDITOR_HOME_URL = "/xxxx/xxxx/";
*/ 
/**
* @author wusuopubupt
* @date 2013-10-24
* 
* set window.UMEDITOR_HOME_URL = "/ueditor/";
* 
* */ 
window.UMEDITOR_HOME_URL = "/ueditor/"; //注意就是这里！ 
var URL = window.UMEDITOR_HOME_URL || (function(){ 
function PathStack() { 

/**
* 开发版本的文件导入
*/ 
(function (){ 
var paths = [ 
'editor.js', 
'core/browser.js', 
'core/utils.js', 
'core/EventBase.js', 
'core/dtd.js', 
'core/domUtils.js', 
'core/Range.js', 
'core/Selection.js', 
'core/Editor.js', 
'core/filterword.js', 
'core/node.js', 
'core/htmlparser.js', 
'core/filternode.js', 
'plugins/inserthtml.js', 
'plugins/image.js', 
'plugins/justify.js', 
'plugins/font.js', 
'plugins/link.js', 
'plugins/print.js', 
'plugins/paragraph.js', 
'plugins/horizontal.js', 
'plugins/cleardoc.js', 
'plugins/undo.js', 
'plugins/paste.js', 
'plugins/list.js', 
'plugins/source.js', 
'plugins/enterkey.js', 
'plugins/preview.js', 
'plugins/basestyle.js', 
'plugins/video.js', 
'plugins/selectall.js', 
'plugins/removeformat.js', 
'plugins/keystrokes.js', 
'plugins/dropfile.js', 
'ui/widget.js', 
'ui/button.js', 
'ui/toolbar.js', 
'ui/menu.js', 
'ui/dropmenu.js', 
'ui/splitbutton.js', 
'ui/colorsplitbutton.js', 
'ui/popup.js', 
'ui/scale.js', 
'ui/colorpicker.js', 
'ui/combobox.js', 
'ui/buttoncombobox.js', 
'ui/modal.js', 
'ui/tooltip.js', 
'ui/tab.js', 
'ui/separator.js', 
'ui/scale.js', 
'adapter/adapter.js', 
'adapter/button.js', 
'adapter/fullscreen.js', 
'adapter/dialog.js', 
'adapter/popup.js', 
'adapter/imagescale.js', 
'adapter/autofloat.js', 
'adapter/source.js', 
'adapter/combobox.js' 
], 
/**
* @author wusuopubupt
* @date 2013-10-24
* 
* modified baseURL = '/ueditor/src/'; 
*/ 
baseURL = '/ueditor/src/'; 
for (var i=0,pi;pi = paths[i++];) { 
document.write('<script type="text/javascript" src="/UploadFiles/2021-04-02/'+ baseURL + pi +'">

可以看到，这里有一项：baseURL，就是JS文件的路由，这里要根据ueditor_api.js文件的实际路径去配置！
6、文件上传问题：
打开ueditor.config.js，可以看到如下配置：
//图片上传配置区
,imageUrl:URL+"php/imageUp.php" //图片上传提交地址
//,imagePath:URL + "php/" //图片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置
,imagePath:"http://test.mathandcs.com/"
,imageFieldName:"upfile" //图片数据的key,若此处修改，需要在后台对应文件修改对应参数

这里的imageURL是图片上传所调用的php文件的地址，而imagePath则是为新上传的图片生成的图片地址的host部分；
再打开ueditor/php/下的imageUp.php文件，有配置如下：



$config = array( 
"savePath" => "/var/www/store/upload/" , //存储文件夹 
"maxSize" => 1000 , //允许的文件最大尺寸，单位KB 
"allowFiles" => array( ".gif" , ".png" , ".png" , ".jpeg" , ".bmp" ) //允许的文件格式 
); 
//上传文件目录 
//$Path = "upload/"; 
$Path = "/var/www/store/upload/"; 


这里需要把上传文件到服务器的目的地址（上传文件保存文件）savePath修改成你指定的文件地址。
由于相对路径和绝对路径的问题，生成的地址有可能是错的，这时就要hack一下生成图片URL的JS文件：
ueditor/dialogs/image/image.js 中修改：

/**
* @author wusuopubupt
* @date 2013-10-24
* @return url modified
* */
var reg = /\/var\/www\/test\/upload\//;
url = url.replace(reg,"");
var $img = $("<img src='" + editor.options.imagePath + url + "' class='edui-image-pic' />"),
$item = $("<div class='edui-image-item edui-image-upload-item'><div class='edui-image-close'></div></div>").append($img);
这里的正则的规则要根据具体情况来定！
至此，Ueditor便在我的环境中配置成功了。