Résumé :
Je crée mon propre blog récemment. Je n'aurai peut-être pas le temps de bloguer pendant un moment, mais je dois quand même partager les bonnes choses avec tout le monde. Un site de blog doit avoir un éditeur pour éditer les articles, j'ai donc vérifié certaines informations en ligne. L'arrière-plan de la plupart des éditeurs est basé sur Java, php, asp, etc., et peu sont basés sur node.js. Au départ, je voulais utiliser Markdown pour écrire des articles, mais le style était difficile à ajuster, j'ai donc finalement choisi l'éditeur de Baidu. 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, je vais donc le partager avec vous. Si vous envisagez d'utiliser node.js pour développer votre propre blog, vous pouvez vous y référer.
Référence de téléchargement :
Allez d'abord sur le site officiel de ueditor pour télécharger le code. J'ai téléchargé la version de développement 1.4.3php utf-8. Après la décompression, placez le fichier dans le répertoire public. Ici, je l'ai renommé ueditor. Ajoutez ensuite ces trois lignes
à l'en-tête de la page dont vous avez besoin
Appelez ensuite le code suivant si nécessaire
<script><br>
var ue = UE.getEditor('editor');<br>
</script>
Modification du backend :
Celui téléchargé est basé sur php, remplaçons-le maintenant par un basé sur node.js. Supprimez d'abord les fichiers php inutilisés, puis créez un nouveau dossier nodejs, et créez un nouveau fichier config.json dans ce répertoire avec le contenu suivant :
/* Configuration liée à la communication front-end et back-end, seuls les commentaires multilignes sont autorisés */
{
/* Télécharger les éléments de configuration de l'image */
"imageActionName": "uploadimage", /* exécute le nom de l'action pour télécharger l'image */
"imageFieldName": "upfile", /* Nom du formulaire d'image soumis */
"imageMaxSize": 2048000, /* Limite de taille de téléchargement, unité B */
"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* Affichage du format d'image de téléchargement */
"imageCompressEnable": true, /* S'il faut compresser les images, la valeur par défaut est true */
"imageCompressBorder": 1600, /* Limite latérale la plus longue de la compression d'image */
"imageInsertAlign": "none", /* La méthode flottante de l'image insérée */
"imageUrlPrefix": "", /* Préfixe du chemin d'accès à l'image */
"imagePathFormat": "/ueditor/php/upload/image/{aaaa}{mm}{jj}/{time}{rand:6}", /* Téléchargez le chemin d'enregistrement, vous pouvez personnaliser le chemin d'enregistrement et le format du nom de fichier * /
/ * {FILENAME} sera remplacé par le nom du fichier d'origine. Configurez ce besoin pour faire attention au problème du chinois tronqué * /
.
/ * {RAND : 6} sera remplacé par des nombres aléatoires.
/* {time} sera remplacé par un horodatage */
/* {aaaa} sera remplacé par une année à quatre chiffres */
/* {yy} sera remplacé par une année à deux chiffres */
été été été été été été.
/* {dd} sera remplacé par une date à deux chiffres */
/* {hh} sera remplacé par deux heures */
/* {ii} sera remplacé par des minutes à deux chiffres */
/* {ss} sera remplacé par des secondes à deux chiffres */
/* Caractères non autorisés : * ?
/* Veuillez consulter la documentation en ligne pour plus de détails : fex.baidu.com/ueditor/#use-format_upload_filename */
/* Éléments de configuration du téléchargement d'image Tuya */
"scrawlActionName": "uploadscrawl", /* Le nom de l'action pour télécharger des graffitis */
"scrawlFieldName": "upfile", /* Nom du formulaire d'image soumis */
"scrawlPathFormat": "/ueditor/php/upload/image/{aaaa}{mm}{jj}/{time}{rand:6}", /* Téléchargez le chemin d'enregistrement, vous pouvez personnaliser le chemin d'enregistrement et le format du nom de fichier * /
"scrawlMaxSize": 2048000, /* Limite de taille de téléchargement, unité B */
"scrawlUrlPrefix": "", /* Préfixe du chemin d'accès à l'image */
"scrawlInsertAlign": "aucun",
/* Télécharger avec l'outil de capture d'écran */
"snapscreenActionName": "uploadimage", /* Le nom de l'action pour télécharger des captures d'écran */
"snapscreenPathFormat": "/ueditor/php/upload/image/{aaaa}{mm}{jj}/{time}{rand:6}", /* Téléchargez le chemin d'enregistrement, vous pouvez personnaliser le chemin d'enregistrement et le format du nom de fichier * /
"snapscreenUrlPrefix": "", /* Préfixe du chemin d'accès à l'image */
"snapscreenInsertAlign": "none", /* Méthode flottante d'image insérée */
/* Capturer la configuration de l'image distante */
"catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],
"catcherActionName": "catchimage", /* Le nom de l'action utilisé pour capturer des images distantes */
"catcherFieldName": "source", /* Nom du formulaire de liste d'images soumises */
"catcherPathFormat": "/ueditor/php/upload/image/{aaaa}{mm}{jj}/{time}{rand:6}", /* Téléchargez le chemin d'enregistrement, vous pouvez personnaliser le chemin d'enregistrement et le format du nom de fichier * /
"catcherUrlPrefix": "", /* Préfixe du chemin d'accès à l'image */
"catcherMaxSize": 2048000, /* Limite de taille de téléchargement, unité B */
"catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* Affichage du format d'image de capture */
/* Télécharger la configuration vidéo */
"videoActionName": "uploadvideo", /* Le nom de l'action pour exécuter la vidéo de téléchargement */
"videoFieldName": "upfile", /* Nom du formulaire vidéo soumis */
"videoPathFormat": "/ueditor/php/upload/video/{aaaa}{mm}{jj}/{time}{rand:6}", /* Téléchargez le chemin d'enregistrement, vous pouvez personnaliser le chemin d'enregistrement et le format du nom de fichier * /
"videoUrlPrefix": "", /* Préfixe du chemin d'accès à la vidéo */
"videoMaxSize": 102400000, /* Limite de taille de téléchargement, unité B, 100 Mo par défaut */
"videoAllowFiles": [
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], /* Télécharger la vidéo Format d'affichage*/
/* Télécharger la configuration du fichier */
"fileActionName": "uploadfile", /* Dans le contrôleur, le nom de l'action pour exécuter la vidéo téléchargée */
"fileFieldName": "upfile", /* Nom du formulaire de fichier soumis */
"filePathFormat": "/ueditor/php/upload/file/{aaaa}{mm}{jj}/{time}{rand:6}", /* Téléchargez le chemin d'enregistrement, vous pouvez personnaliser le chemin d'enregistrement et le format du nom de fichier * /
"fileUrlPrefix": "", /* préfixe du chemin d'accès au fichier */
"fileMaxSize": 51200000, /* Taille limite de téléchargement, unité B, 50 Mo par défaut */
"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"
], /* Affichage du format de fichier de téléchargement */
/* Liste les images dans le répertoire spécifié */
"imageManagerActionName": "listimage", /* Nom de l'action pour effectuer la gestion des images */
"imageManagerListPath": "/ueditor/php/upload/image/", /* Spécifiez le répertoire dans lequel lister les images */
"imageManagerListSize": 20, /* Nombre de fichiers répertoriés à chaque fois */
"imageManagerUrlPrefix": "", /* Préfixe du chemin d'accès à l'image */
"imageManagerInsertAlign": "none", /* L'image insérée flotte */
"imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* Types de fichiers répertoriés */
/* Liste les fichiers dans le répertoire spécifié */
"fileManagerActionName": "listfile", /* Nom de l'action pour exécuter la gestion des fichiers */
"fileManagerListPath": "/ueditor/php/upload/file/", /* Spécifiez le répertoire dans lequel lister les fichiers */
"fileManagerUrlPrefix": "", /* Préfixe du chemin d'accès au fichier */
"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 */
>
Ensuite, recherchez le fichier ueditor.config.js, recherchez la ligne suivante et remplacez les guillemets suivants par votre propre chemin d'arrière-plan.
serverUrl : URL "php/controller.php"
Par exemple :
serverUrl : URL "éditeur"
Nous devons installer les packages suivants
"dépendances": {
"body-parser": "~1.0.0",
"express": "~4.2.0",
"éditeur": "^1.0.0"
>
Code backend :
var express = require('express');var path = require('path');
var app = express();
var éditeur = require("éditeur");
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({
étendu : vrai
}));
app.use(bodyParser.json());
app.use("/ueditor/ueditor", ueditor(path.join(__dirname, 'public'), function(req, res, next) {
// Le client ueditor lance une demande de téléchargement d'image
Si (req.query.action === 'uploadimage') {
var foo = req.ueditor;
var imgname = req.ueditor.filename;
var img_url = '/images/ueditor/';
//Il vous suffit de saisir l'adresse que vous souhaitez enregistrer. Laissez l'opération de sauvegarde à l'éditeur
res.ue_up(img_url);
>
// Le client lance une demande de liste d'images
sinon if (req.query.action === 'listimage') {
var dir_url = '/images/ueditor/';
// Le client listera toutes les images dans le répertoire dir_url
res.ue_list(dir_url);
>
//Le client initie d'autres requêtes
sinon {
res.setHeader('Content-Type', 'application/json');
res.redirect('/ueditor/nodejs/config.json');
>
}));
Remarque : ce qui précède ne gère que le téléchargement d'images. Pour le téléchargement de vidéos, vous pouvez consulter l'API du site officiel et suivre le développement.
Ce qui précède est tout le contenu de l'intégration de l'éditeur Baidu UE dans le projet nodejs. J'espère que vous l'aimerez.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
