ueditor編輯器的使用說明。 最近在找nodejs前台界面可以編輯文字發表文章的工具,后來找到了ueditor,感覺還不錯,就拿來使用了一下,使用過程如下。
1.下載及准備
下載ueditor,官方地址http://ueditor.baidu.com/website/download.html
示例中使用的是1.4.3完整版。
新建項目ueditors並支持ejs模板,
然后修改ejs文件的后綴名為html,
前面文章都有說明,此處不再一一詳解。
2.導入
在package.json中加入依賴包ueditor,並npm install,
將從官網下載好的ueditor包放在public靜態目錄下。
public目錄是開啟端口后默認找到的目錄,
若想放到其他目錄,修改下面這句即可。
app.use(express.static(path.join(__dirname, 'public')));
3.使用
因為只是簡單的示例,這里我們直接從ueditor下的_examples中復制completeDemo.html中的代碼到
我們的views目錄下的index.html文件中。然后修改要導入js文件的src
圖中為我ueditor文件所在的位置,及我的路徑

然后修改ueditor.config.js文件,修改內容如下

URL為編輯器資源文件根路徑,serverUrl為請求后台的路徑,上傳圖片時會用到。
修改editor_api.js文件,editor_api.js是加載所有js依賴的文件,修改如下:

4.配置后台,上傳圖片
打開app.js,修改配置文件

該配置用於接收前台界面上傳單張及多張圖片的請求。
需要在ueditor中創建一個image文件夾,用以保存上傳的圖片。
需要配置config.json文件,直接將php目錄中的config.json復制出來就行。
配置好后重新啟動,應該就能上傳圖片了。
5.注意事項
1.之前在使用時出現的大部分問題,都是導入js文件,路徑出現的問題。碰到這種情況,打開開發者工具,導
入js文件時會發送get請求,查看請求地址在哪,然后調試,一般都能解決。
2.editor_api.js中導入js依賴文件時,是以同步的方式導入,而且document.write也會產生一部分問題,假如你
只使用ueditor,當然沒問題,但是如果你還要在之前導入其它js文件,則之前導入的文件可能會被清空。
3.關於js的同步及異步,以后會另開一篇文章討論。
4.簡單的項目demo地址在:https://github.com/Chen-xy/ueditors