nodejs+mongodb+vue前後台配置ueditor

標籤：mongod   resolve   data   alt   install   有關   blog   cti   安裝   

筆者在做一個個人部落格項目的時候需要一個富文字框輸入組件與後台進行互動，但是官方配置裡面沒有關於nodejs的，於是自己查閱資料研究了一下，最後終於應用到了系統中。

一、後台配置

首先是找到了這個項目：https://github.com/netpi/ueditor，可以通過他開源的代碼將ueditor應用的node上面，大概方法如下：

1.先安裝依賴： 

npm install ueditor --save

2. 配置Node設定

//引入介面檔案const api = require(‘./api‘);//引入檔案模組const fs = require(‘fs‘);//引入處理路徑模組const path = require(‘path‘);//引入處理post資料模組var bodyParser = require(‘body-parser‘);//引入expressconst express = require(‘express‘);const app = express();//引入ueditorconst ueditor = require("ueditor")// parse application/x-www-form-urlencodedapp.use(bodyParser.urlencoded({ extended: false }))//更改限定大小app.use(bodyParser.json({ limit: ‘50mb‘ }));app.use(bodyParser.urlencoded({ limit: ‘50mb‘, extended: true }));// parse application/jsonapp.use(bodyParser.json())app.use(api)app.use("/ueditor/ue", ueditor(path.join(__dirname, ‘public‘), function(req, res, next) {    //用戶端上傳檔案設定    var imgDir = ‘/img/ueditor/‘    var ActionType = req.query.action;    if (ActionType === ‘uploadimage‘ || ActionType === ‘uploadfile‘ || ActionType === ‘uploadvideo‘) {        var file_url = imgDir; //預設圖片上傳地址        /*其他上傳格式的地址*/        if (ActionType === ‘uploadfile‘) {            file_url = ‘/file/ueditor/‘; //附件        }        if (ActionType === ‘uploadvideo‘) {            file_url = ‘/video/ueditor/‘; //視頻        }        res.ue_up(file_url); //你只要輸入要儲存的地址 。儲存操作交給ueditor來做        res.setHeader(‘Content-Type‘, ‘text/html‘);    }    //  用戶端發起圖片列表請求    else if (req.query.action === ‘listimage‘) {        var dir_url = imgDir;        res.ue_list(dir_url); // 用戶端會列出 dir_url 目錄下的所有圖片    }    // 用戶端發起其它請求    else {        // console.log(‘config.json‘)        res.setHeader(‘Content-Type‘, ‘application/json‘);        res.redirect(‘../nodejs/config.json‘);    }}));//處理靜態檔案 todo// 訪問靜態資源檔案 這裡是訪問所有dist目錄下的靜態資源檔案app.use(express.static(path.resolve(__dirname, ‘public/‘)))app.use(‘/ueditor‘, function(req, res) {    res.render(‘views/‘);});//監聽8888連接埠app.listen(8888);console.log(‘sucess listen......‘)

　　這裡需要注意的是因為已經require了ueditor，所以該外掛程式已經安裝到了node_module內，所以不需要再拷貝額外的檔案了，只需要需要在這個目錄下面建立public檔案夾存放返回給背景資料，另外，還需要引入設定檔config.json

二、前台配置

vue的前台配置需要下載ueditor的檔案放在目錄中，我將其放在了static檔案夾中，在vue入口檔案中引入ueditor的檔案：

import ‘../static/UE/ueditor.config.js‘import ‘../static/UE/ueditor.all.min.js‘import ‘../static/UE/lang/zh-cn/zh-cn.js‘import ‘../static/UE/ueditor.parse.min.js‘

值得一提的是需要將ueditor.config.js檔案中的目錄配置為放置該外掛程式的目錄：

window.UEDITOR_HOME_URL = "/static/UE/"

 

然後在組件中配置好就可以了

我的UE.vue組件：

<template>  <script :id=id type="text/plain"></script></template><script>  export default {    name: ‘UE‘,    data () {      return {        editor: null      }    },    props: {      defaultMsg: {        type: String      },      config: {        type: Object      },      id: {        type: String      },    },    mounted() {      const _this = this;      this.editor = UE.getEditor(this.id, this.config); // 初始化UE      this.editor.addListener("ready", function () {        _this.editor.setContent(_this.defaultMsg); // 確保UE載入完成後，放入內容。      });    },    methods: {      getUEContent() { // 擷取內容方法        return this.editor.getContent()      }    },    destroyed() {      this.editor.destroy();    }  }</script>

引入方式：

<UE :defaultMsg=defaultMsg :config=config :id=ue1 ref="ue"></UE>data() {    return {      defaultMsg: "",      image: "",      config: {        initialFrameWidth: null,        initialFrameHeight: 350      },      ue1: "ue1"    };  },

就可以成功配置好ueditor的準系統了

 三、前後台請求代理

在vue dev環境下可以設定webpack的proxyTable將後端請求代理轉寄，就可以輕鬆調試檔案上傳功能了，同理，vue build之後的檔案則需要用Node將靜態檔案代理到和後端同一個連接埠上才可以請求後台連接埠

 

篇幅有限，文章可能講述的不太清晰，具體的可以看我這個項目的代碼：https://github.com/cheer4chai/myBlog

nodejs+mongodb+vue前後台配置ueditor