resumen:
Estoy construyendo mi propio blog recientemente. Puede que no tenga tiempo para escribir un blog durante este período, pero aún tengo que compartirlo con todos si tengo cosas buenas. Los sitios web del blog deben tener un editor para editar artículos, por lo que revisé información en línea. Los antecedentes de la mayoría de los editores se basan en Java, PHP, ASP, etc., y pocos se basan en Node.js. Originalmente quería usar Markdown para escribir artículos, pero el estilo no era fácil de ajustar, por lo que finalmente elegí el Ueditor de Baidu, y no hay código basado en Node.js en su sitio web oficial. Pero afortunadamente, encontré uno similar en Github, así que lo compartiré contigo. Si planea usar Node.js para desarrollar su propio blog, puede consultarlo.
Descargar cita:
Primero, descargué el código en el sitio web oficial de UEDitor. Descargué la versión de desarrollo 1.4.3php UTF-8. Después de descomprimir, coloque el archivo en el directorio público. Aquí lo cambio de nombre a Ueditor. Luego agregue estas tres líneas al cabezal de la página que necesita
La copia del código es la siguiente:
<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>
Luego llame al siguiente código donde sea necesario
La copia del código es la siguiente:
<script id = "editor" type = "text/sencillo"> </script>
<script>
var ue = Ue.getEditor ('editor');
</script>
Modificación de back -end:
El descargado se basa en PHP, y ahora lo cambiaremos a Node.js basado en. Primero, elimine el archivo php innecesario, luego cree una nueva carpeta NodeJS y cree un nuevo archivo config.json en este directorio, el contenido es el siguiente:
La copia del código es la siguiente:
/* Para configuraciones relacionadas con la comunicación front-end, los comentarios solo permiten métodos de múltiples líneas*/
{
/* Elemento de configuración de imagen de carga*/
"ImageActionName": "uploadImage", /* El nombre de acción de la imagen de carga* /
"ImageFieldName": "UpFile", /* envió el nombre del formulario de imagen* /
"ImageMaxSize": 2048000, / * Límite de tamaño de carga, Unidad B * /
"ImageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* Formato de imagen de carga para mostrar* /
"ImageComPressenable": true, / * Si para comprimir imágenes, el valor predeterminado es verdadero * /
"ImageCompressBorder": 1600, /* El límite de borde máximo para la compresión de la imagen* /
"ImageInsertalign": "Ninguno", /* Método de flotación de imagen insertada* /
"ImageUrlPrefix": "", /* Prefijo de ruta de acceso de imagen* /
"ImagePathFormat": "/ueditor/php/upload/image/{yyyy} {mm} {dd}/{time} {rand: 6}",/* cargue la ruta de guardado, puede personalizar el formato de nombre y nombre de archivo de archivo*/formato de nombre*/
/* {nombre de archivo} se reemplazará con el nombre del archivo original. Debe prestar atención al problema del código confuso chino en esta configuración*/
/* {rand: 6} se reemplazará con un número aleatorio, y el siguiente número es el número de bits del número aleatorio*/
/* {Time} será reemplazado por la marca de tiempo*/
/* {yyyy} será reemplazado por un año de cuatro dígitos*/
/* {yy} será reemplazado por dos dígitos del año*/
/* {mm} será reemplazado por dos meses*/
/* {dd} se reemplazará con dos fechas*/
/* {HH} será reemplazado con dos horas*/
/* {ii} será reemplazado con dos dígitos*/
/* {SS} será reemplazado por dos dígitos de segundos*/
/ * Caracteres ilegales/: *? "<> | */
/ * Consulte el documento en línea para obtener más detalles: fex.baidu.com/ueditor/#use-format_upload_filename */
/* Elemento de configuración de carga de la imagen de graffiti*/
"SrawlActionName": "uploadScrawl", /* El nombre de acción del graffiti de carga* /
"SCRAWLFIELDNAME": "UpFile", /* envió el nombre del formulario de imagen* /
"SCAWLPATHFORMAT": "/ueditor/php/upload/image/{yyyy} {mm} {dd}/{time} {rand: 6}",/* cargue la ruta de guardado, puede personalizar el formato de nombre de ruta y nombre de archivo*//formato de nombre*/
"ScrawlmaxSize": 2048000, / * Límite de tamaño de carga, Unidad B * /
"sCrawlUrlPRefix": "", /* Ruta de acceso de imagen Prefijo* /
"SkrawlinSertalign": "Ninguno",
/* Sube la herramienta de captura de pantalla*/
"SnapsCreenActionName": "cargarImage", /* El nombre de acción de la captura de pantalla de carga* /
"SnapsCreenPathFormat": "/ueditor/php/upload/image/{yyyy} {mm} {dd}/{time} {rand: 6}",/* cargue la ruta de guardado, puede personalizar el formato de nombre y nombre de nombre de archivo*//////////////////
"SnapsCreenurlPrefix": "", /* Ruta de acceso de imagen Prefijo* /
"SnapsCreenInsertalign": "Ninguno", /* Imagen insertada Flotar* /
/* Crawl Configuración de imagen remota*/
"CatcherLocaldomain": ["127.0.0.1", "localhost", "img.baidu.com"],
"CatcherActionName": "CatchImage", /* El nombre de acción de la imagen remota se ejecuta* /
"CatcherFieldName": "Fuente", /* envío Nombre del formulario de la lista de imágenes* /
"CatcherPathFormat": "/ueditor/php/upload/image/{yyyy} {mm} {dd}/{time} {rand: 6}",/* cargue la ruta de guardado, puede personalizar el formato de nombre de nombre y nombre de archivo*//formato de nombre*/
"CatcherUrlPrefix": "", /* Ruta de acceso de imagen Prefijo* /
"CatchermaxSize": 2048000, / * Límite de tamaño de carga, Unidad B * /
"CatcherallowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* Display de formato de imagen Crawl* /
/* Subir la configuración de video*/
"VideoActionName": "uploadVideo", /* El nombre de acción del video cargado* /
"VideoFieldName": "UpFile", /* envió el nombre del formulario de video* /
"VideOpathFormat": "/ueditor/php/upload/video/{yyyy} {mm} {dd}/{time} {rand: 6}",/* cargue la ruta de guardado, puede personalizar el formato de nombre y nombre de archivo de archivo*/formato de nombre*/
"VideourlPrefix": "", /* Ruta de acceso de video prefijo* /
"VideomaxSize": 102400000, / * Límite de tamaño de carga, Unidad B, predeterminado 100MB * /
"VideAllowFiles": [
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], /* Sube la pantalla de formato de video* /
/* Subir la configuración del archivo*/
"FileActionName": "uploadFile", /* controlador, el nombre de acción del video cargado* /
"FileFieldName": "UpFile", /* envío Nombre del formulario de archivo* /
"FilePathFormat": "/ueditor/php/upload/file/{yyyy} {mm} {dd}/{time} {rand: 6}",/* cargue la ruta de guardado, puede personalizar el formato de nombre y nombre de archivo*/formato de nombre de archivo*/
"FileUrlPrefix": "", /* File Access Rath Prefix* /
"FileMaxSize": 51200000, / * Límite de tamaño de carga, Unidad B, predeterminado 50MB * /
"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"
], /* Formato de archivo de carga Pantalla* /
/* Lista de imágenes en el directorio especificado*/
"ImagemanagerActionName": "listimage", /* El nombre de acción de la gestión de imágenes* /
"ImagemanagerListPath": "/ueditor/php/upload/image/",/* Especifique el directorio para enumerar la imagen*/
"ImagemanagerListize": 20, /* Número de archivos enumerados cada vez* /
"ImageManagerUrlPrefix": "", /* Ruta de acceso de imagen Prefijo* /
"ImagemanagerInsertalign": "Ninguno", /* Método flotante de imagen insertada* /
"ImagemanagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* tipos de archivos listados* /
/* Lista de archivos en el directorio especificado*/
"FilemanageractionName": "ListFile", /* El nombre de acción de la administración de archivos de ejecución* /
"FilemanagerListPath": "/ueditor/php/upload/file/",/* Especifique el directorio donde el archivo se enumerará*/
"FilemanagerUrlPrefix": "", /* File Access Path Prefix* /
"FilemanagerListize": 20, /* Número de archivos enumerados cada vez* /
"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"
] /* Tipos de archivos listados* /
}
Luego busque el archivo ueditor.config.js, busque la línea a continuación y cambie las cotizaciones luego a su propia ruta de fondo.
Serverurl: URL + "Php/Controller.php"
Por ejemplo:
ServerUrl: URL + "UEDITOR"
Necesitamos instalar los siguientes paquetes
La copia del código es la siguiente:
"Dependencias": {
"Body-Parser": "~ 1.0.0",
"Express": "~ 4.2.0",
"Ueditor": "^1.0.0"
}
Código de fondo:
La copia del código es la siguiente:
var express = request ('express'); var ruta = requirir ('ruta');
var app = express ();
var uEditor = request ("uEditor");
var BodyParser = require ('Body-Parser');
App.use (BodyParser.urlencoded ({
extendido: verdadero
}));
App.use (BodyParser.json ());
app.use ("/ueditor/ueditor", UEditor (path.join (__ dirname, 'public'), function (req, res, next) {
// El cliente de UEDitor inicia una solicitud de imagen de carga
if (req.query.action === 'uploadImage') {
var foo = req.editor;
var imgname = req.ueDitor.FileName;
var img_url = '/images/ueditor/';
// Solo necesita ingresar la dirección que desea guardar. Deje la operación de guardado en UEDITOR
res.ue_up (img_url);
}
// El cliente inicia una solicitud de lista de imágenes
else if (req.query.action === 'listimage') {
var dir_url = '/images/ueditor/';
// El cliente enumerará todas las imágenes en el directorio Dir_url
res.ue_list (dir_url);
}
// El cliente inicia otras solicitudes
demás {
res.setheader ('Content-type', 'Application/JSON');
res.Redirect ('/ueditor/nodejs/config.json');
}
}));
Nota: Lo anterior solo maneja la carga de imágenes. Para cargas de video, puede ver la API oficial del sitio web e imitarlas.
Lo anterior es todo el contenido de integrar el editor de Baidu UE en el proyecto NodeJS. Espero que a todos les guste.