Informationen zum Code zum Konfigurieren von ueditor im Front- und Backend von 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. Ich werde ihn jetzt als Referenz verwenden.

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 lautet die ungefähre Methode wie folgt:

1. Installieren Sie zuerst die Abhängigkeiten:

npm install ueditor --save

2 🎜>

//引入接口文件
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......')

Hier ist zu beachten, dass das Plug-in in node_module installiert wurde, da ueditor erforderlich war, sodass keine zusätzlichen Dateien kopiert werden müssen. Sie müssen sie nur in dieses Verzeichnis kopieren. Erstellen Sie einen neuen öffentlichen Ordner, um die an das Backend zurückgegebenen Daten zu speichern. Außerdem müssen Sie die Konfigurationsdatei config.json

2. Front-End einführen Konfiguration

Die Front-End-Konfiguration von Vue erfordert das Herunterladen von ueditor. Die Datei wird im Verzeichnis abgelegt, ich habe sie im statischen Ordner abgelegt und die ueditor-Datei in die Vue-Eintragsdatei eingeführt:

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 Was benötigt wird, ist, dass das Verzeichnis in der Datei ueditor.config.js als das Verzeichnis konfiguriert werden muss, in dem das Plug-In platziert wird:

window.UEDITOR_HOME_URL = "/static/UE/"

Dann konfigurieren Sie es einfach 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"
  };
 },

Sie können die Grundfunktionen von ueditor erfolgreich konfigurieren

3. Front- und Backend-Anfrage-Proxy

In der Vue-Entwicklungsumgebung können Sie die Proxytabelle des Webpacks so einstellen, dass der Backend-Anfrage-Proxy weitergeleitet wird, und Sie können die Datei-Upload-Funktion problemlos debuggen , Dateien nach dem Vue-Build müssen Node verwenden, um statische Dateien an denselben Port wie das Backend weiterzuleiten, bevor der Port angefordert wird

Die Länge ist begrenzt und der Artikel ist möglicherweise nicht klar genug Sie können den Code meines Projekts sehen: https://github.com/cheer4chai/myBlog

Das Obige ist der gesamte Inhalt des Artikels. Ich hoffe, er wird für das Lernen aller hilfreich sein. Für weitere verwandte Inhalte zahlen Sie bitte Achtung auf die chinesische PHP-Website!

Verwandte Empfehlungen:

node.js verwendet Streams, um eine Lese- und Schreibsynchronisation sowie die Funktion des gleichzeitigen Lesens und Schreibens zu erreichen

Über die Art und Weise, wie Ajax domänenübergreifend in JQuery umgeht

Angular2 und NodeJS implementieren die Funktion des Bild-Uploads

Das obige ist der detaillierte Inhalt vonInformationen zum Code zum Konfigurieren von ueditor im Front- und Backend von nodejs+mongodb+vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!