在nodejs中使用富文字編輯器UEditor
阿新 • • 發佈：2018-12-23
最近開發過程中遇到要某個商品新增描述的欄位。由於我們後臺使用的是nodejs開發。在網上找到了一個第三方的外掛UEditor
UEditor 是由百度「FEX前端研發團隊」開發的所見即所得富文字web編輯器，具有輕量，可定製，注重使用者體驗等特點，開源基於MIT協議，允許自由使用和修改程式碼。
使用UEditor（nodejs）
UEditor 官方支援的版本有PHP JSP ASP.NET.
然而有大神netpi在github上貢獻了開源版本的nodejs版UEditor.
使用方法：
1.安裝ueditor模組
npm install ueditor --save2.在自己的nodejs程式中新增ueditor配置
var bodyParser = require('body-parser') var ueditor = require("ueditor") app.use(bodyParser.urlencoded({ extended: true })) app.use(bodyParser.json()); app.use("/ueditor/ue", ueditor(path.join(__dirname, 'public'), function(req, res, next) { // ueditor 客戶發起上傳圖片請求 if(req.query.action === 'uploadimage'){ var foo = req.ueditor; var date = new Date(); var imgname = req.ueditor.filename; var img_url = '/images/ueditor/'; res.ue_up(img_url); //你只要輸入要儲存的地址 。儲存操作交給ueditor來做 } // 客戶端發起圖片列表請求 else if (req.query.action === 'listimage'){ var dir_url = '/images/ueditor/'; res.ue_list(dir_url); // 客戶端會列出 dir_url 目錄下的所有圖片 } // 客戶端發起其它請求 else { res.setHeader('Content-Type', 'application/json'); res.redirect('/ueditor/ueditor.config.json') }}));
3.下載ueditor
但是要注意裡面的配置
4.建立檔案
一般需要引入三個檔案：ueditor.config.js;ueditor.all.min.js;lang/zh-cn/zh-cn.js
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>ueditor demo</title> </head> <body> <!-- 載入編輯器的容器 --> <script id="container" name="content" type="text/plain"> 這裡寫你的初始化內容 </script> <!-- 配置檔案 --> <script type="text/javascript" src="ueditor.config.js"></script> <!-- 編輯器原始碼檔案 --> <script type="text/javascript" src="ueditor.all.js"></script> <!-- 例項化編輯器 --> <script type="text/javascript"> var ue = UE.getEditor('container'); </script> </body> </html>
這個時候開啟你的瀏覽器看上面那個網頁，你就可以看到富文字編輯器啦！
遇到的問題：
我在程式中吧UEditor放到一個模態框裡面，但是執行之後的UEditor字型顏色無法選擇，還有字型無法選擇，最後除錯了下發現是UEditor 的css和bootstrap的css有衝突，原因是#edui_fixedlayer的z-index出現了問題，調小點就可以
<style>
#edui_fixedlayer{
z-index: 2000 !important;
}
</style>