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
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM