1. 程式人生 > >nodejs express製作後臺引入富文字編輯器

nodejs express製作後臺引入富文字編輯器

需求

由於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/即可