Zusammenfassung:
Ich baue kürzlich meinen eigenen Blog. Ich habe vielleicht keine Zeit, in dieser Zeit einen Blog zu schreiben, aber ich muss ihn immer noch mit allen teilen, wenn ich gute Dinge habe. Blog -Websites müssen einen Editor zur Bearbeitung von Artikeln haben. Daher habe ich einige Informationen online überprüft. Die meisten Redakteure -Hintergründe basieren auf Java, PHP, ASP usw. und nur wenigen basieren auf Node.js. Ich wollte ursprünglich Markdown zum Schreiben von Artikeln verwenden, aber der Stil war nicht einfach anpassen, also habe ich mich endlich für Baidus Ueditor entschieden, und es gibt keinen Code, der auf Node.js auf seiner offiziellen Website basiert. Aber zum Glück habe ich auf Github eine ähnliche gefunden, also werde ich es mit Ihnen teilen. Wenn Sie vorhaben, Node.js zu verwenden, um Ihr eigenes Blog zu entwickeln, können Sie sich darauf verweisen.
Zitat herunterladen:
Zuerst habe ich den Code auf der offiziellen Website von Ueditor heruntergeladen. Ich habe die Entwicklungsversion 1.4.3PHP UTF-8-Version heruntergeladen. Stellen Sie nach der Dekomprimierung die Datei in das öffentliche Verzeichnis. Hier benenne ich es Ueditor um. Fügen Sie dann diese drei Zeilen zum Kopf der Seite hinzu, die Sie benötigen
Die Codekopie lautet wie folgt:
<script type = "text/javaScript" charset = "utf-8" src = "/ueditor/ueditor.config.js"> </script>
<script type = "text/javaScript" charset = "utf-8" src = "/ueditor/ueditor.all.min.js"> </script>
<script type = "text/javaScript" charset = "utf-8" src = "/ueditor/lang/zh-cn/zh-cn.js"> </script>
Rufen Sie dann den folgenden Code bei Bedarf an
Die Codekopie lautet wie folgt:
<script id = "editor" type = "text/plain"> </script>
<Script>
var ue = ue.geteditor ('editor');
</script>
Backend -Modifikation:
Der heruntergeladene One basiert auf PHP, und jetzt werden wir es basierend auf node.js ändern. Löschen Sie zunächst die unnötige PHP -Datei, erstellen Sie dann einen neuen Ordnerknotenjs und erstellen Sie in diesem Verzeichnis eine neue Datei config.json. Der Inhalt lautet wie folgt:
Die Codekopie lautet wie folgt:
/* Für Konfigurationen mit Front-End-Kommunikationsbeziehungen erlauben nur Kommentare Multi-Line-Methoden*/
{
/* Bildkonfigurationselement hochladen*/
"ImageActionName": "UploadImage", /* Der Aktionsname des Upload -Bildes* / / /
"ImageFieldName": "UpFile", /* eingebildeter Bildformularname* /
"ImagemaxSize": 2048000, / * Größenlimit hochlad, Einheit B * /
"ImageAllowfiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* Image -Format hochladen, um* / / / / /
"ImageCompresssenable": true, / * Ob die Bilder komprimiert werden sollen, ist die Standardeinstellung wahr * /
"ImageCompressBorder": 1600, /* Die maximale Kantengrenze für die Bildkomprimierung* / / /
"ImageInsertAnign": "Keine", /* Eingefügte Bildfloat -Methode* /
"ImageUrlprefix": "", /* Image Access Pfad Präfix* /
"ImagePathFormat": "/ueditor/php/upload/image/{yyyy} {mm} {dd}/{time} {rand: 6}"
/* {Dateiname} wird durch den Original -Dateinamen ersetzt. Sie müssen in dieser Konfiguration auf das Problem des chinesischen verstümmelten Codes achten*/
/* {Rand: 6} wird durch eine Zufallszahl ersetzt, und die folgende Nummer ist die Anzahl der Bits der Zufallszahl*/
/* {time} wird durch Zeitstempel*/ersetzt
/* {yyyy} wird durch ein vierstelliges Jahr*/ersetzt
/* {yy} wird durch zwei Ziffern des Jahres ersetzt*//
/* {mm} wird durch zwei Monate*/ersetzt
/* {dd} wird durch zwei Daten ersetzt*/
/* {hh} wird durch zwei Stunden*/ersetzt
/* {ii} wird durch zwei Ziffern*/ersetzt
/* {ss} wird durch zwei Ziffern von Sekunden*/ersetzt
/ * Illegale Zeichen/: *? "<> | */
/ * Weitere Informationen finden Sie im Online-Dokument: fex.baidu.com/ueditor/#use-format_upload_filename */
/* Graffiti Bild -Upload -Konfigurationselement*/
"ScrawlactionName": "Uploadscrawl", /* Der Aktionsname des Hochladens Graffiti* /
"ScrawlfieldName": "UpFile", /* eingebildeter Bildformularname* /
"ScrawlPathFormat": "/ueditor/php/upload/image/{yyyy} {mm} {dd}/{time} {rand: 6}"
"ScrawlMaxSize": 2048000, / * Größenlimit des Hochladens, Einheit B * /
"Scrawlurlprefix": "", /* Bildzugriffspfad Präfix* /
"Scrawlinsertalign": "Keine",
/* Laden Sie das Screenshot -Tool hoch*/
"SnapsCreenActionName": "UploadImage", /* Der Aktionsname des Upload -Screenshots* /
"SnapsCreenPathFormat": "/ueditor/php/upload/image/{yyyy} {mm} {dd}/{time} {rand: 6}",* laden Sie den Speicherspfad hoch.
"SnapsCreenurlprefix": "", /* Bildzugriffspfad Präfix* /
"SnapscreenInserStalign": "Keine", /* Eingefügtes Bild float* /
/* Crawl Remote -Bildkonfiguration*//
"CatcherLocalDomain": ["127.0.0.1", "Localhost", "img.baidu.com"],
"CatcherActionName": "Catchimage", /* Der Aktionsname des Remote -Bildes wird ausgeführt* /
"CatcherfieldName": "Quelle", /* Unterbeter Bildlistenformular Name* /
"CatcherPathFormat": "/ueditor/php/upload/image/{yyyy} {mm} {dd}/{time} {rand: 6}"
"Catcherurlprefix": "", /* Bildzugriffspfad Präfix* /
"CategermaxSize": 2048000, / * Hochladungsgrößengrenze, Einheit B * /
"CatcherallowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* crawle Bildformat Anzeige* /
/* Videokonfiguration hochladen*/
"VideoActionName": "Uploadvideo", /* Der Aktionsname des hochgeladenen Videos* / / /
"Videofieldname": "UpFile", /* eingebildeter Videoformame* /
"videopathformat": "/ueditor/php/upload/Video/{yyyy} {mm} {dd}/{time} {rand: 6}"
"VideoOurLprefix": "", /* Video Access Path Prefix* /
"videomaxSize": 102400000, / * Größenlimit hochladen, Einheit B, Standard 100MB * /
"Videoallowfiles": [
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".Webm", ".mp3", ".wav", ".mid"], /* Video -Format Anzeige* / / /
/* Dateikonfiguration hochladen*/
"fileactionName": "UploadFile", /* Controller, der Aktionsname des hochgeladenen Videos* /
"DateifieldName": "UpFile", /* übermitteltes Dateiformular Name* /
"filepathformat": "/ueditor/php/upload/file/{yyyy} {mm} {dd}/{time} {rand: 6}"
"FileUrlprefix": "", /* Dateizugriffspfad Präfix* /
"fileMaxSize": 51200000, / * Größenlimit des Hochladens, 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"
], /* Dateiformat hochladen* /
/* Listen Sie Bilder im angegebenen Verzeichnis*/auf
"ImageManagerAcationName": "Listimage", /* Der Aktionsname des Bildverwaltung* / / /
"ImageManagerListPad": "/ueditor/php/upload/image/",/* Geben Sie das Verzeichnis an, um das Bild aufzulisten*/
"ImagemanagerListSize": 20, /* Anzahl der Dateien, die jedes Mal aufgeführt sind* /
"ImageManagerUrlprefix": "", /* Bildzugriffspfad Präfix* /
"Imagemanagerinsertalign": "Keine", /* Eingefügte Bildschwimmmethode* /
"ImagemanagerallowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* Listete Dateitypen* / / /
/* Listendateien im angegebenen Verzeichnis*//
"fileManagerActionName": "Listfile", /* Der Aktionsname der Ausführungsdateiverwaltung* / /
"fileManagerListPad": "/ueditor/php/upload/Datei/",/* Geben Sie das Verzeichnis an, in dem die Datei aufgelistet ist*/
"fileManagerUrlprefix": "", /* Dateizugriffspfad Präfix* /
"filemanagerListSize": 20, /* Anzahl der Dateien, die jedes Mal aufgeführt sind* /
"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"
] /* Dateitypen aufgelistet* /
}
Suchen Sie dann die Datei ueditor.config.js, suchen Sie die folgende Zeile und ändern Sie die Zitate anschließend auf Ihren eigenen Hintergrundpfad.
Serverurl: URL + "PHP/Controller.php"
Zum Beispiel:
Serverurl: URL + "Ueditor"
Wir müssen die folgenden Pakete installieren
Die Codekopie lautet wie folgt:
"Abhängigkeiten": {{
"Body-Parser": "~ 1.0.0",
"Express": "~ 4.2.0",
"Ueditor": "^1.0.0"
}
Hintergrundcode:
Die Codekopie lautet wie folgt:
var express = require ('exprim'); var path = require ('path');
var app = express ();
var ueditor = fordert ("ueditor");
var bodyparser = requiat ('body-parser');
app.use (bodyparser.urlencoded ({{{
erweitert: wahr
}));
app.use (bodyparser.json ());
app.use ("/ueditor/ueditor", ueditor (path.join (__ Dirname, 'public'), Funktion (req, res, next) {
// Ueditor Client initiiert eine Upload -Bildanforderung
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 Save Operation dem Ueditor
res.ue_up (img_url);
}
// Der Kunde initiiert eine Bildlistenanforderung
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 Kunde initiiert andere Anfragen
anders {
res.setheader ('content-Typ', 'application/json');
res.redirect ('/ueditor/nodejs/config.json');
}
}));
HINWEIS: Das obige behandelt nur den Upload von Bildern. Für Video -Uploads können Sie die offizielle Website -API anzeigen und nachahmen.
Das obige ist der gesamte Inhalt der Integration von Baidu UE -Editor in das NodeJS -Projekt. Ich hoffe, es mag alle.