nodejs express製作後臺引入富文字編輯器
阿新 • • 發佈:2019-01-07
需求
由於ueditor官方沒有nodejs後臺的版本,所以只有通過別的大神開發的版本使用了。故寫個教程,留作以後備用。
下載ueditor
引入ueditor
先在express的public資料夾內建立一個ueditor目錄,用於存放所有的解壓出來的程式碼,由於本人懶,沒有刪除裡面沒有的檔案,請大家自行刪除。然後在模板頁面中引入三個檔案,分別是:
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>
<script type ="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/ueditor/lang/zh-cn/zh-cn.js"></script>
然後在需要顯示編輯器的地方放入:
<script id="editor" type="text/plain" style="width:100%;height:500px;"></script>
最後在js裡面例項化:
var ue = UE.getEditor('editor');
開啟頁面,檢視效果。
但是你開啟控制檯,會發現,給你提示
配置nodejs ueditor相關
上面的報錯是因為我們沒有配置ueditor的nodejs相關,接著我們就處理nodejs的問題。
我們在基友網站上面找到了一個叫netpi大神的解決方案,github地址:https://github.com/netpi/ueditor
製作了nodejs端的服務配置。具體操作:
首先安裝模組
npm install ueditor --save
安裝成功以後,按照大神的案例配置,在express裡面的app.js裡面配置
var bodyParser = require('body-parser')
var ueditor = require("ueditor")
app.use(bodyParser.urlencoded({
extended: true
}))
app.use(bodyParser.json());
// /ueditor 入口地址配置 https://github.com/netpi/ueditor/blob/master/example/public/ueditor/ueditor.config.js
// 官方例子是這樣的 serverUrl: URL + "php/controller.php"
// 我們要把它改成 serverUrl: URL + 'ue'
app.use("/ueditor/ue", ueditor(path.join(__dirname, 'public'), function(req, res, next) {
// ueditor 客戶發起上傳圖片請求
if(req.query.action === 'uploadimage'){
// 這裡你可以獲得上傳圖片的資訊
var foo = req.ueditor;
console.log(foo.filename); // exp.png
console.log(foo.encoding); // 7bit
console.log(foo.mimetype); // image/png
// 下面填寫你要把圖片儲存到的路徑 ( 以 path.join(__dirname, 'public') 作為根路徑)
var img_url = 'yourpath';
res.ue_up(img_url); //你只要輸入要儲存的地址 。儲存操作交給ueditor來做
}
// 客戶端發起圖片列表請求
else if (req.query.action === 'listimage'){
var dir_url = 'your img_dir'; // 要展示給客戶端的資料夾路徑
res.ue_list(dir_url) // 客戶端會列出 dir_url 目錄下的所有圖片
}
// 客戶端發起其它請求
else {
res.setHeader('Content-Type', 'application/json');
// 這裡填寫 ueditor.config.json 這個檔案的路徑
res.redirect('/ueditor/ueditor.config.json')
}}));
將上面的圖片儲存的資料夾路徑自行修改,根目錄是public資料夾。
修改ueditor的配置
最後找到public/ueditor/ueditor.config.js檔案,將裡面的URL + “php/controller.php”修改成為URL + ‘ue’
而ueditor.config.json這個檔案的配置,在php檔案裡面,從裡面拿出來修改下名字將檔案放在public/ueditor/即可