Nodejs之編輯器ueditor

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依賴的文件，修改以下:

運行app.js，打開後 http://localhost:3000 ，便可看到文本編輯框界面。

 

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