最近做的項目用到了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.編輯器的實例化頁面，導入編輯器需要的三個入口文件，示例代碼如下：

1. <script type="text/javascript" charset="utf-8" src="../umeditor.config.js"></script>
3. <!--使用版-->
4. <!--<script type="text/javascript" charset="utf-8" src="../umeditor.all.js"></script>-->
6. <!--開發版-->
7. <script type="text/javascript" charset="utf-8" src="editor_api.js"></script>
8. <script type="text/javascript" src="../lang/zh-cn/zh-cn.js"></script>

4.然後在編輯器的實例化頁面中創建編輯器實例及其DOM容器，示例代碼如下：

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變量配置編輯器在你項目中的路徑。

官網示例：

1. //強烈推薦以這種方式進行絕對路徑配置
2. URL= window.UEDITOR_HOME_URL||"/UETest/ueditor/";

我的配置：

1. (function () {
2. /**
3. * 編輯器資源文件根路徑。它所表示的含義是：以編輯器實例化頁面為當前路徑，指向編輯器資源文件（即dialog等文件夾）的路徑。
4. * 鑒於很多同學在使用編輯器的時候出現的種種路徑問題，此處強烈建議大家使用"相對於網站根目錄的相對路徑"進行配置。
5. * "相對於網站根目錄的相對路徑"也就是以斜杠開頭的形如"/myProject/umeditor/"這樣的路徑。
6. * 如果站點中有多個不在同一層級的頁面需要實例化編輯器，且引用了同一UEditor的時候，此處的URL可能不適用於每個頁面的編輯器。
7. * 因此，UEditor提供了針對不同頁面的編輯器可單獨配置的根路徑，具體來說，在需要實例化編輯器的頁面最頂部寫上如下代碼即可。當然，需要令此處的URL等於對應的配置。
8. * window.UMEDITOR_HOME_URL = "/xxxx/xxxx/";
9. */
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/"; //註意就是這裏！
20. var URL = window.UMEDITOR_HOME_URL || (function(){
22. function PathStack() {

6.如果用editor_api.js （也就是不用editor.all.js）開發時,打開editor_api.js,代碼如下

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="‘+ baseURL + pi +‘"></script>‘);
76. }
77. })();

可以看到，這裏有一項：baseURL，就是JS文件的路由，這裏要根據ueditor_api.js文件的實際路徑去配置！

7.文件上傳問題：

打開ueditor.config.js，可以看到如下配置：

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文件，有配置如下：

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 中修改：

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,"");
9. var $img = $("<img src=‘" + 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使用總結