一、關(guān)于UEditor
? ? ? ?首先得向大家介紹一下UEditor，由于我也是第一次使用，對他也不是特表了解，在此我就引用百度百科的一段話：UEditor是由百度WEB前端研發(fā)部開發(fā)的所見即所得的開源富文本編輯器，具有輕量、可定制、用戶體驗優(yōu)秀等特點。開源基于BSD協(xié)議，所有源代碼在協(xié)議允許范圍內(nèi)可自由修改和使用。百度UEditor的推出，可以幫助不少網(wǎng)站開發(fā)者在開發(fā)富文本編輯器所遇到的難題，節(jié)約開發(fā)者因開發(fā)富文本編輯器所需要的大量時間，有效降低了企業(yè)的開發(fā)成本（以上內(nèi)容，來自于百度百科）。
? ? ? ?說了一大堆，簡單來說，就是由百度WEB前端研發(fā)部開發(fā)的富文本編輯器，可以引用到web頁面使用，開源免費，允許二次開發(fā)，其功能就像Word，能夠?qū)Υ罅课淖诌M行排版，有所不同的是，排版格式能夠和HTML以及css兼容，是很多后臺文章編輯的首選工具插件。
二、UEditor的下載
? ? 介紹說完了，我們就得來看看UEditor的下載了，官方網(wǎng)站：http://ueditor.baidu.com/website/額。。。關(guān)于如何下載，我想不需要我多說了，如果這都不會的話，我還是勸你轉(zhuǎn)行吧。。。有一點需要說明的是，由于UEditor官方并不支持nodejs，目前只支持PHP、ASP、JSP三種，我們就先下載PHP版本的，后期對他進行修改和配置，使他支持nodejs。
三、創(chuàng)建nodejs+express項目
在這里我就不去手動創(chuàng)建項目框架了，直接使用webstrom創(chuàng)建一個名為test的項目。建好的項目結(jié)構(gòu)如下：
四、引用UEditor
關(guān)于項目結(jié)構(gòu)我就不多說了，直接開始引用UEditor，首先將我們下載好的PHP版本的UEditor解壓，如果不出問題的話，應(yīng)該如下圖：
第一步、我們需要做的是在public文件夾下新建一個名為ueditor的文件夾，并將解壓的UEditor的所有文件拷貝到ueditor之下，如下圖：
第二步、將ueditor文件夾下的PHP文件夾名稱修改為nodejs。修改之后如下圖：
第三步、在頁面當(dāng)中引用UEditor，來到views文件夾下的index.ejs，首先在head標簽當(dāng)中應(yīng)用UEditor的js文件，代碼：
然后在需要使用UEditor的地方寫上：
不知道為什么簡書沒法張貼代碼，我就已截圖形式上傳，寫完這行代碼，最后在js里面是實例化：最終代碼如下：
這個時候，我們啟動項目，在瀏覽器輸入http://localhost:3000/，進入首頁，查看效果如圖：
五、后臺配置
現(xiàn)在的UEditor表面上看起來沒什么問題，當(dāng)我們打開F12審查元素就會發(fā)現(xiàn)程序報錯，這是由于UEditor會自動檢測后臺配置，如果后臺配置有問題，上傳功能將無法使用，接下來就開始后臺配置。
首先在app.js里面輸入如下代碼：
需要注意的是標記位置：第一個標記相信大家都能看到，設(shè)置靜態(tài)資源路徑，第二個主要是設(shè)置圖片保存位置，我們設(shè)置的是/images/ueditor/，所以我們需要在public下的images文件夾里面新建一個ueditor文件路徑：
最后我們打開路徑為：\public\ueditor下的ueditor.config.js文件，找到圖中標記代碼：
修改為下圖標記位置所示：
來到項目更目錄：利用npm安裝ueditor模塊：
重啟服務(wù)，刷新頁面，測試功能。
到此我們就完成了整個配置過程，如有疑問，請聯(lián)系我，謝謝！??！
QQ：2412372691
