node.js integriert Baidu UE editor_node.js

Zusammenfassung:
Ich bin vor kurzem dabei, meinen eigenen Blog zu erstellen. Vielleicht habe ich für eine Weile keine Zeit zum Bloggen, aber ich muss die guten Dinge trotzdem mit allen teilen. Eine Blog-Website muss über einen Editor zum Bearbeiten von Artikeln verfügen, daher habe ich einige Informationen online überprüft. Der Hintergrund der meisten Editoren basiert auf Java, PHP, ASP usw., und nur wenige basieren auf node.js. Ich wollte ursprünglich Markdown zum Schreiben von Artikeln verwenden, aber der Stil war schwierig anzupassen, also habe ich mich schließlich für den ueditor von Baidu entschieden. Auf der offiziellen Website gibt es keinen Code, der auf node.js basiert. Aber zum Glück habe ich auf Github ein ähnliches gefunden, also werde ich es mit Ihnen teilen. Wenn Sie vorhaben, node.js zum Entwickeln Ihres eigenen Blogs zu verwenden, können Sie darauf verweisen.

Referenz herunterladen:

Gehen Sie zuerst zur offiziellen Website von ueditor, um den Code herunterzuladen. Nach dem Entpacken habe ich die Datei in das öffentliche Verzeichnis umbenannt. Fügen Sie dann diese drei Zeilen

zur Kopfzeile der gewünschten Seite hinzu

Code kopieren Der Code lautet wie folgt:

<script><br> var ue = UE.getEditor('editor');<br> </script>

Backend-Änderung:

Das heruntergeladene basiert auf PHP. Jetzt ändern wir es in eines, das auf node.js basiert. Löschen Sie zunächst die nicht verwendeten PHP-Dateien, erstellen Sie dann einen neuen Ordner nodejs und erstellen Sie in diesem Verzeichnis eine neue Datei config.json mit folgendem Inhalt:

Code kopieren Der Code lautet wie folgt:

/* Konfiguration im Zusammenhang mit der Front-End- und Back-End-Kommunikation, nur mehrzeilige Kommentare sind zulässig */
{
/* Bildkonfigurationselemente hochladen */
„imageActionName“: „uploadimage“, /* führt den Aktionsnamen aus, um das Bild hochzuladen */
„imageFieldName“: „upfile“, /* Name des übermittelten Bildformulars */
"imageMaxSize": 2048000, /* Upload-Größenbeschränkung, Einheit B */
"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* Anzeige des Bildformats hochladen */
„imageCompressEnable“: true, /* Ob Bilder komprimiert werden sollen, der Standardwert ist true */
"imageCompressBorder": 1600, /* Längste Seitenbeschränkung für Bildkomprimierung */
„imageInsertAlign“: „none“, /* Die eingefügte Bild-Floating-Methode */
„imageUrlPrefix“: „“, /* Bildzugriffspfad-Präfix */
"imagePathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* Speicherpfad hochladen, Sie können den Speicherpfad und das Dateinamenformat anpassen * /
/ * {FILENAME} wird durch den ursprünglichen Dateinamen ersetzt, um auf das Problem der chinesischen Verstümmelung zu achten * /
/ * {RAND: 6} wird durch Zufallszahlen ersetzt. /* {time} wird durch einen Zeitstempel */
ersetzt /* {yyyy} wird durch eine vierstellige Jahreszahl */
ersetzt /* {yy} wird durch eine zweistellige Jahreszahl */
ersetzt                                                                                                                                                                                                                 war gewesen            war gewesen war gewesen. /* {dd} wird durch ein zweistelliges Datum */
ersetzt /* {hh} wird durch zwei Stunden */
ersetzt /* {ii} wird durch zweistellige Minuten ersetzt */
/* {ss} wird durch zweistellige Sekunden ersetzt */
                                                                    /* Unzulässige Zeichen: * ? " < > | */
/* Weitere Informationen finden Sie in der Online-Dokumentation: fex.baidu.com/ueditor/#use-format_upload_filename */
/* Tuya-Bild-Upload-Konfigurationselemente */
„scrawlActionName“: „uploadscrawl“, /* Der Aktionsname zum Hochladen von Graffiti */
„scrawlFieldName“: „upfile“, /* Name des übermittelten Bildformulars */
"scrawlPathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* Speicherpfad hochladen, Sie können den Speicherpfad und das Dateinamenformat anpassen * /
"scrawlMaxSize": 2048000, /* Upload-Größenbeschränkung, Einheit B */
„scrawlUrlPrefix“: „“, /* Bildzugriffspfad-Präfix */
„scrawlInsertAlign“: „none“,
/* Hochladen mit Screenshot-Tool */
„snapscreenActionName“: „uploadimage“, /* Der Aktionsname zum Hochladen von Screenshots */
"snapscreenPathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* Speicherpfad hochladen, Sie können den Speicherpfad und das Dateinamenformat anpassen * /
„snapscreenUrlPrefix“: „“, /* Bildzugriffspfad-Präfix */
„snapscreenInsertAlign“: „none“, /* Eingefügte Bild-Floating-Methode */
/* Remote-Image-Konfiguration erfassen */
„catcherLocalDomain“: [“127.0.0.1“, „localhost“, „img.baidu.com“],
„catcherActionName“: „catchimage“, /* Der Aktionsname, der zum Erfassen von Remote-Bildern verwendet wird */
„catcherFieldName“: „source“, /* Name des übermittelten Bildlistenformulars */
"catcherPathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* Speicherpfad hochladen, Sie können den Speicherpfad und das Dateinamenformat anpassen * /
„catcherUrlPrefix“: „“, /* Bildzugriffspfad-Präfix */
"catcherMaxSize": 2048000, /* Upload-Größenbeschränkung, Einheit B */
„catcherAllowFiles“: [“.png“, „.jpg“, „.jpeg“, „.gif“, „.bmp“], /* Bildformatanzeige erfassen */
/* Videokonfiguration hochladen */
„videoActionName“: „uploadvideo“, /* Der Aktionsname zum Ausführen des Upload-Videos */
„videoFieldName“: „upfile“, /* Name des übermittelten Videoformulars */
„videoPathFormat“: „/ueditor/php/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}“, /* Speicherpfad hochladen, Sie können den Speicherpfad und das Dateinamenformat anpassen * /
„videoUrlPrefix“: „“, /* Videozugriffspfad-Präfix */
„videoMaxSize“: 102400000, /* Upload-Größenbeschränkung, Einheit B, Standard 100 MB */
„videoAllowFiles“: [
„.flv“, „.swf“, „.mkv“, „.avi“, „.rm“, „.rmvb“, „.mpeg“, „.mpg“,
„.ogg“, „.ogv“, „.mov“, „.wmv“, „.mp4“, „.webm“, „.mp3“, „.wav“, „.mid“], /* Video hochladen Formatanzeige*/
/* Dateikonfiguration hochladen */
„fileActionName“: „uploadfile“, /* Im Controller der Aktionsname zum Ausführen des hochgeladenen Videos */
„fileFieldName“: „upfile“, /* Name des übermittelten Dateiformulars */
„filePathFormat“: „/ueditor/php/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}“, /* Speicherpfad hochladen, Sie können den Speicherpfad und das Dateinamenformat anpassen * /
„fileUrlPrefix“: „“, /* Dateizugriffspfad-Präfix */
„fileMaxSize“: 51200000, /* Upload-Größenbeschränkung, Einheit B, Standard 50 MB */
„fileAllowFiles“: [
„.png“, „.jpg“, „.jpeg“, „.gif“, „.bmp“,
„.flv“, „.swf“, „.mkv“, „.avi“, „.rm“, „.rmvb“, „.mpeg“, „.mpg“,
„.ogg“, „.ogv“, „.mov“, „.wmv“, „.mp4“, „.webm“, „.mp3“, „.wav“, „.mid“,
„.rar“, „.zip“, „.tar“, „.gz“, „.7z“, „.bz2“, „.cab“, „.iso“,
„.doc“, „.docx“, „.xls“, „.xlsx“, „.ppt“, „.pptx“, „.pdf“, „.txt“, „.md“, „.xml“
], /* Anzeige des Dateiformats hochladen */
/* Bilder im angegebenen Verzeichnis auflisten */
„imageManagerActionName“: „listimage“, /* Aktionsname zur Durchführung der Bildverwaltung */
"imageManagerListPath": "/ueditor/php/upload/image/", /* Geben Sie das Verzeichnis zum Auflisten von Bildern an */
"imageManagerListSize": 20, /* Anzahl der jeweils aufgelisteten Dateien */
„imageManagerUrlPrefix“: „“, /* Bildzugriffspfad-Präfix */
„imageManagerInsertAlign“: „none“, /* Das eingefügte Bild ist schwebend */
"imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* Aufgeführte Dateitypen */
/* Dateien im angegebenen Verzeichnis auflisten */
„fileManagerActionName“: „listfile“, /* Aktionsname zum Ausführen der Dateiverwaltung */
„fileManagerListPath“: „/ueditor/php/upload/file/“, /* Geben Sie das Verzeichnis zum Auflisten der Dateien an */
„fileManagerUrlPrefix“: „“, /* Dateizugriffspfad-Präfix */
"fileManagerListSize": 20, /* Anzahl der jeweils aufgelisteten Dateien */
„fileManagerAllowFiles“: [
„.png“, „.jpg“, „.jpeg“, „.gif“, „.bmp“,
„.flv“, „.swf“, „.mkv“, „.avi“, „.rm“, „.rmvb“, „.mpeg“, „.mpg“,
„.ogg“, „.ogv“, „.mov“, „.wmv“, „.mp4“, „.webm“, „.mp3“, „.wav“, „.mid“,
„.rar“, „.zip“, „.tar“, „.gz“, „.7z“, „.bz2“, „.cab“, „.iso“,
„.doc“, „.docx“, „.xls“, „.xlsx“, „.ppt“, „.pptx“, „.pdf“, „.txt“, „.md“, „.xml“
] /* Aufgelistete Dateitypen */
}

Suchen Sie dann die Datei ueditor.config.js, suchen Sie die folgende Zeile und ändern Sie die folgenden Anführungszeichen in Ihren eigenen Hintergrundpfad.

serverUrl: URL „php/controller.php“

Zum Beispiel:

serverUrl: URL „ueditor“

Wir müssen die folgenden Pakete installieren

Code kopieren Der Code lautet wie folgt:

„Abhängigkeiten“: {
„body-parser“: „~1.0.0“,
„express“: „~4.2.0“,
„ueditor“: „^1.0.0“
}

Backend-Code:

Code kopieren Der Code lautet wie folgt:

var express = require('express');var path = require('path');
var app = express();
var ueditor = require("ueditor");
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({
erweitert: wahr
}));
app.use(bodyParser.json());
app.use("/ueditor/ueditor", ueditor(path.join(__dirname, 'public'), function(req, res, next) {
// ueditor-Client initiiert Bild-Upload-Anfrage
If (req.query.action === 'uploadimage') {
      var foo = req.ueditor;
      var imgname = req.ueditor.filename;
      var img_url = '/images/ueditor/';
​​​ //Sie müssen nur die Adresse eingeben, die Sie speichern möchten. Überlassen Sie den Speichervorgang ueditor
           res.ue_up(img_url); }
// Der Client initiiert eine Bilderlistenanfrage
else if (req.query.action === 'listimage') {
        var dir_url = '/images/ueditor/';
                // Der Client listet alle Bilder im dir_url-Verzeichnis
auf            res.ue_list(dir_url); }
//Der Client initiiert andere Anfragen
sonst {
          res.setHeader('Content-Type', 'application/json');
          res.redirect('/ueditor/nodejs/config.json');
}
}));

Hinweis: Das Obige behandelt nur das Hochladen von Bildern. Für das Hochladen von Videos können Sie die offizielle Website-API sehen und die Entwicklung verfolgen.

Das Obige ist der gesamte Inhalt der Integration des Baidu UE-Editors in das NodeJS-Projekt. Ich hoffe, es gefällt Ihnen.