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......')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'
window.UEDITOR_HOME_URL = "/static/UE/"
<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"
};
},
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 wirdDie 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/myBlogDas 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!
