résumé:
Je construis mon propre blog récemment. Je n'ai peut-être pas le temps d'écrire un blog pendant cette période, mais je dois toujours le partager avec tout le monde si j'ai de bonnes choses. Les sites Web de blog doivent avoir un éditeur pour modifier des articles, j'ai donc vérifié certaines informations en ligne. La plupart des arrière-plans des éditeurs sont basés sur Java, PHP, ASP, etc., et peu sont basés sur Node.js. Je voulais à l'origine utiliser Markdown pour écrire des articles, mais le style n'était pas facile à ajuster, donc j'ai finalement choisi Ueditor de Baidu, et il n'y a pas de code basé sur Node.js sur son site officiel. Mais heureusement, j'en ai trouvé un similaire sur Github, donc je vais le partager avec vous. Si vous prévoyez d'utiliser Node.js pour développer votre propre blog, vous pouvez vous y référer.
Télécharger la citation:
Tout d'abord, j'ai téléchargé le code sur le site officiel d'Ueditor. J'ai téléchargé la version de développement 1.4.3php UTF-8. Après la décompression, mettez le dossier dans le répertoire public. Ici, je le renomme à UEditor. Puis ajoutez ces trois lignes à la tête de la page dont vous avez besoin
La copie de code est la suivante:
<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>
Ensuite, appelez le code suivant si nécessaire
La copie de code est la suivante:
<script id = "editor" type = "text / plain"> </ script>
<cript>
var ue = ue.getEditor ('éditeur');
</cript>
Modification du backend:
Le téléchargé est basé sur PHP, et maintenant nous allons le changer en node.js basé sur. Tout d'abord, supprimez le fichier PHP inutile, puis créez un nouveau dossier NodeJS et créez un nouveau fichier config.json dans ce répertoire, le contenu est le suivant:
La copie de code est la suivante:
/ * Pour les configurations liées à la communication frontale, les commentaires autorisent uniquement les méthodes multi-lignes * /
{
/ * Télécharger l'élément de configuration d'image * /
"ImageActionName": "uploadimage", / * le nom d'action de l'image de téléchargement * /
"ImageFieldName": "upfile", / * Nom du formulaire d'image soumis * /
"ImageMaxSize": 2048000, / * Télécharger la limite de taille, unité b * /
"ImageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], / * télécharger le format d'image pour afficher * /
"ImageCompressablenable": true, / * s'il faut compresser les images, la valeur par défaut est vraie * /
"ImageCompressBorder": 1600, / * la limite de bord maximale pour la compression d'image * /
"ImageInsertAlign": "Aucun", / * Méthode de flottement d'image insérée * /
"ImageUrlprefix": "", / * PATAL D'ACCÈS D'IMAGE PRÉFIX * /
"ImagePathFormat": "/ UEditor / php / upload / image / {yyyy} {mm} {dd} / {time} {rand: 6}", / * télécharger le chemin de sauvegarde, vous pouvez personnaliser le chemin de sauvegarde et le format de nom de fichier * / /
/ * {FileName} sera remplacé par le nom du fichier d'origine. Vous devez prêter attention au problème du code brouillé chinois dans cette configuration * /
/ * {rand: 6} sera remplacé par un nombre aléatoire, et le numéro suivant est le nombre de bits du nombre aléatoire * /
/ * {time} sera remplacé par l'horodatage * /
/ * {yyyy} sera remplacé par une année à quatre chiffres * /
/ * {yy} sera remplacé par deux chiffres de l'année * /
/ * {mm} sera remplacé par deux mois * /
/ * {dd} sera remplacé par deux dates * /
/ * {HH} sera remplacé par deux heures * /
/ * {ii} sera remplacé par deux chiffres * /
/ * {ss} sera remplacé par deux chiffres de secondes * /
/ * Caractères illégaux /: *? "<> | * /
/ * Veuillez vous référer au document en ligne pour plus de détails: fex.baidu.com/ueditor/#use-forat_upload_filename * / /
/ * Élément de configuration de téléchargement d'image graffiti * /
"ScrawlActionName": "Téléchargescrawl", / * le nom d'action du téléchargement graffiti * /
"ScrawlFieldName": "upfile", / * Nom du formulaire d'image soumis * /
"ScrawlPathFormat": "/ UEditor / php / upload / image / {yyyy} {mm} {dd} / {time} {rand: 6}", / * Téléchargez le chemin de sauvegarde, vous pouvez personnaliser le chemin de l'enregistrement et le format de nom de fichier * /
"SCRAWLMAXSIZE": 2048000, / * Télécharger la limite de taille, unité B * /
"ScrawLlurlPrefix": "", / * PRAIL D'ACCESSION IMAGE PRÉFIX * /
"ScrawLinsertAlign": "Aucun",
/ * Téléchargez l'outil de capture d'écran * /
"snapscreenactionName": "uploadimage", / * le nom d'action de la capture d'écran de téléchargement * /
"snapscreenPathFormat": "/ ueditor / php / upload / image / {yyyy} {mm} {dd} / {time} {rand: 6}", / * télécharger le chemin de sauvegarde, vous pouvez personnaliser le chemin de enregistrement et le format de nom de fichier * /
"snapscreenUrlprefix": "", / * PRAIL D'ACCESSION IMAGE PRÉFIX * /
"snapscreeninsertAlign": "Aucun", / * INSERTED PATURE Float * /
/ * Crawl Configuration de l'image distante * /
"CatcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],
"CatcherActionName": "CatchImage", / * Le nom d'action de l'image distante est exécuté * /
"CatcherFieldName": "Source", / * Nom du formulaire de liste d'images soumis * /
"CatcherPathFormat": "/ UEditor / php / upload / image / {yyyy} {mm} {dd} / {time} {rand: 6}", / * Téléchargez le chemin de sauvegarde, vous pouvez personnaliser le chemin de l'enregistrement et le format de nom de fichier * /
"CatcherUrlprefix": "", / * PATAL D'ACCÈS D'IMAGE PRÉFIX * /
"CatcherMaxSize": 2048000, / * Télécharger la limite de taille, unité b * /
"CatcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], / * Crawl Format Image Display * /
/ * Télécharger la configuration vidéo * /
"VideoactionName": "uploadVideo", / * le nom d'action de la vidéo téléchargée * /
"VideofieldName": "upfile", / * Nom du formulaire vidéo soumis * /
"VideopathFormat": "/ ueditor / php / upload / video / {yyyy} {mm} {dd} / {time} {rand: 6}", / * Téléchargez le chemin de sauvegarde, vous pouvez personnaliser le chemin de sauvegarde et le format de nom de fichier * / /
"videourlprefix": "", / * PRAIL D'ACCÈS VIDÉO PRÉFIX * /
"VideoMaxSize": 102400000, / * Télécharger la limite de taille, unité B, par défaut 100 Mo * /
"VideoallowFiles": [
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], / * télécharger le format vidéo affichage * /
/ * Télécharger la configuration du fichier * /
"FileActionName": "UploadFile", / * Controller, le nom d'action de la vidéo téléchargée * /
"fileFieldName": "upfile", / * Nom du formulaire de fichier soumis * /
"filepathformat": "/ ueditor / php / upload / file / {yyyy} {mm} {dd} / {time} {rand: 6}", / * télécharger le chemin de sauvegarde, vous pouvez personnaliser le chemin de sauvegarde et le format de nom de fichier * /
"fileUrlprefix": "", / * PRAIL D'ACCÈS DE FILE PRÉFIX * /
"fileMaxSize": 51200000, / * Télécharger la limite de taille, unité B, par défaut 50 Mo * /
"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"
], / * Télécharger l'affichage du format de fichier * /
/ * Liste des images dans le répertoire spécifié * /
"ImageManAgerActionName": "listimage", / * le nom d'action de la gestion de l'image * /
"ImageManagerListPath": "/ ueditor / php / upload / image /", / * Spécifiez le répertoire pour répertorier l'image * /
"ImageManAgerListSize": 20, / * Nombre de fichiers répertoriés à chaque fois * /
"ImageManAgerUrlPrefix": "", / * Path d'accès d'image Prefix * /
"ImageManageReRersertalign": "Aucun", / * Image Image Méthode flottante * /
"ImageManAgerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], / * types de fichiers répertoriés * / /
/ * Liste des fichiers dans le répertoire spécifié * /
"FileManAgerActionName": "listfile", / * le nom d'action de la gestion des fichiers d'exécution * /
"FileManAgerListPath": "/ UEditor / php / upload / file /", / * Spécifiez le répertoire où le fichier sera répertorié * /
"FileManAgerUrlpRefix": "", / * PRAITEMENT DE FILE ACCESSION PRÉFIX * /
"FileManAgerListSize": 20, / * Nombre de fichiers répertoriés à chaque fois * /
"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"
] / * Types de fichiers répertoriés * /
}
Trouvez ensuite le fichier ueditor.config.js, trouvez la ligne ci-dessous et modifiez les citations par la suite par votre propre chemin d'arrière-plan.
ServerUrl: URL + "php / contrôleur.php"
Par exemple:
ServerUrl: URL + "UEditor"
Nous devons installer les packages suivants
La copie de code est la suivante:
"dépendances": {
"Body-Parser": "~ 1.0.0",
"Express": "~ 4.2.0",
"Ueditor": "^ 1.0.0"
}
Code d'arrière-plan:
La copie de code est la suivante:
var express = require ('express'); var path = require ('path');
var app = express ();
var ueditor = require ("ueditor");
var bodyParser = require ('body-parser');
app.use (bodyparser.urlencoced ({{
étendu: vrai
}));
app.use (bodyParser.json ());
app.use ("/ ueditor / ueditor", ueditor (path.join (__ dirname, 'public'), function (req, res, suivant) {
// Le client UEditor initie une demande d'image de téléchargement
if (req.query.action === 'uploadimage') {
var foo = req.ueditor;
var imgname = req.ueditor.filename;
var img_url = '/ images / ueditor /';
// Vous avez juste besoin de saisir l'adresse que vous souhaitez enregistrer. Laissez l'opération de sauvegarde à UEditor
res.ue_up (img_url);
}
// Le client initie une demande de liste d'images
else if (req.query.action === 'listImage') {
var dir_url = '/ images / ueditor /';
// Le client répertorie toutes les images du répertoire dir_url
res.ue_list (dir_url);
}
// Le client initie d'autres demandes
autre {
res.sethEader ('Content-Type', 'Application / JSON');
res.redirect ('/ ueditor / nodejs / config.json');
}
}));
Remarque: Ce qui précède gère uniquement le téléchargement d'images. Pour les téléchargements de vidéos, vous pouvez consulter l'API officiel du site Web et les imiter.
Ce qui précède est l'intégralité du contenu de l'intégration de l'éditeur Baidu UE dans le projet Nodejs. J'espère que tout le monde aime ça.