So konfigurieren Sie Ueditor mit nodejs+mongodb+vue

In diesem Artikel wird hauptsächlich der Beispielcode für die Konfiguration von ueditor im Front- und Backend von nodejs+mongodb+vue vorgestellt. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

Als ich an einem persönlichen Blog-Projekt arbeitete, brauchte ich eine Rich-Text-Box-Eingabekomponente, um mit dem Hintergrund zu interagieren, aber es gab keine offizielle Konfiguration für NodeJS, also habe ich die Informationen überprüft und selbst recherchiert habe es schließlich auf das System angewendet.

1. Backend-Konfiguration

Zuerst habe ich dieses Projekt gefunden: https://github.com/netpi/ueditor, Sie können ueditor über seine Öffnung verwenden Quellcode Auf dem Knoten ist die ungefähre Methode wie folgt:

1. Installieren Sie zuerst die Abhängigkeiten:

npm install ueditor --save

2. Konfigurieren Sie die Knoteneinstellungen

//引入接口文件
const api = require('./api');
//引入文件模块
const fs = require('fs');
//引入处理路径模块
const path = require('path');
//引入处理post数据模块
var bodyParser = require('body-parser');

//引入express
const express = require('express');
const app = express();
//引入ueditor
const ueditor = require("ueditor")

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))

//更改限定大小
app.use(bodyParser.json({ limit: '50mb' }));
app.use(bodyParser.urlencoded({ limit: '50mb', extended: true }));
// parse application/json
app.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......')

Was hier zu beachten ist ist, dass ueditor erforderlich ist, sodass das Plug-in in node_module installiert werden muss. Sie müssen lediglich einen neuen öffentlichen Ordner in diesem Verzeichnis erstellen, um die in den Hintergrund zurückgegebenen Daten zu speichern Darüber hinaus müssen Sie auch die Konfigurationsdatei config.json einführen

2. Front-End-Konfiguration

Vues Front-End-Konfiguration erfordert das Herunterladen und Platzieren der Ueditor-Datei im Verzeichnis. Ich habe es im statischen Ordner abgelegt und in die Datei „ueditor“ eingefügt:

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'

Es ist erwähnenswert, dass das Verzeichnis in der Datei ueditor.config.js konfiguriert werden muss das Verzeichnis, in dem das Plug-in abgelegt ist:

window.UEDITOR_HOME_URL = "/static/UE/"

Dann konfigurieren Sie es in der Komponente

Meine UE.vue-Komponente:

<template>
 <script :id=id type="text/plain"></script>
</template>

<script>
 export default {
  name: &#39;UE&#39;,
  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>

Einführungsmethode:

<UE :defaultMsg=defaultMsg :config=config :id=ue1 ref="ue"></UE>

data() {
  return {
   defaultMsg: "",
   image: "",
   config: {
    initialFrameWidth: null,
    initialFrameHeight: 350
   },
   ue1: "ue1"
  };
 },

Anschließend können Sie die Grundfunktionen von ueditor erfolgreich konfigurieren

3.Front-End- und Back-End-Anfrage-Proxy

In der Vue-Entwicklungsumgebung können Sie die Proxytabelle von Webpack so einstellen, dass sie den Back-End-Anforderungs-Proxy weiterleitet, und Sie können die Datei-Upload-Funktion problemlos debuggen. Auf die gleiche Weise müssen die Dateien nach der Vue-Erstellung einen Knoten als Proxy verwenden Dateien an denselben Port wie das Backend senden, bevor Sie den Backend-Port anfordern.

Das Obige habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

Probleme im Zusammenhang mit der Dateiladeoptimierung in js

So erstellen Sie ein kleines Programm-Backend im Node.js-Dienst

So führen Sie die Ueditor- und Knotenhintergrundkonfiguration mit Vue ein

Das obige ist der detaillierte Inhalt vonSo konfigurieren Sie Ueditor mit nodejs+mongodb+vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!