Markdown es un lenguaje de marcado que se puede escribir en un editor de texto normal. A través de la simple sintaxis de marcado, puede hacer que el contenido de texto ordinario tenga un determinado formato.
Prefacio
Editor.md es un código abierto, el editor en línea de Markdown Inglonable (componente) basado en CodeMirror, jQuery y marcado. Este capítulo utilizará SpringBoot para integrar Editor.md para construir el editor de Markdown.
Descargue el complemento
Dirección del proyecto: editor.md
Descomprima la estructura del directorio:
Configurar editor.md
Coloque el Simple.html en la carpeta EXAPMLES en el proyecto y configure los archivos CSS y JS correspondientes
Editor de configuración
...... <script src = "$ {re.contextpath} /jquery.min.js"> </script> <script src = "$ {re.contextpath} /editor/editormd.min.js"> </script> <link rel = "stylesheet" href = "$ {re.contextPath} /editor/css/style.css" rel = "externo nofollow"/> <link rel = "stylesheet" href = "$ {re.contextPath} /editor/css/editormd.csss" rel = "noFer href = "https://pandao.github.io/editor.md/favicon.ico" rel = "externo nofollow" type = "image/x-icon" />.............<!-- Almienda archivos de origen para editar-> <textarea style = "visualización: ninguno"; id = "textContent" name = "textContent"> </extarea> <!- El segundo campo de texto oculto se usa para construir el código HTML generado para facilitar el envío de la publicación del formulario. El nombre aquí puede tomarse arbitrariamente. Cuando se acepte en segundo plano, esta tecla de nombre prevalece -> <TextARea id = "Text" name = "Text"> </TextAREA> </div>Inicializar el editor
VAR TOLYEDITOR; $(function () { testEditor = editormd("test-editormd", { width: "90%", height: 640, syncScrolling: "single", path: "${re.contextPath}/editor/lib/", imageUpload: true, imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "WebP"], ImageUploadurl: "/File", // Esta configuración no existe en Simple.html, pero para enviar el formulario, use esta configuración para permitir que el código HTML construido sea directamente en el segundo campo oculto de textura, que facilita el formulario posterior a la presentación.Esto implementa el editor de editor más simple.md, con los siguientes efectos:
Dirección de acceso: http: // localhost: 8080/
Carga de imágenes
Dado que la dirección de carga de imagen configurada en el editor de inicialización es imageUploadurl: " /archivo", correspondiente a ella, podemos procesar la carga de archivo en /archivo
@RestController@requestmapping ("/file")@slf4jpublic fileController {// @value ("") // string carpeta = system.getProperty ("user.dir")+file.separator+"upload"+file.separator; / *** Ruta de ahorro de archivos configurada en el archivo de configuración*/ @Value ("$ {img.location}") Carpeta de cadena privada; @PostMapping public FileInfo upload (httpservletRequest request, @RequestParam (value = "editormd-image-file", requerido = false) múltiple archivo de perfil) lanza la excepción {log.info ("【fileController】 fileNeR file.getOriginalFileName (), file.getSize ()); log.info (request.getContextPath ()); Cadena filename = file.getOriginalFileName (); String sufix = filename.substring (filename.lastIndexOf (".") + 1); String newFileName = new Date (). GetTime () + "." + sufijo; Archivo localfile = nuevo archivo (carpeta, newFileName); file.transferto (localfile); log.info (localfile.getabsolutePath ()); Devuelve nuevo FileInfo (1, "Cargar correctamente", request.getRequestUrl (). Substring (0, request.getRequestUrl (). LastIndexof ("/"))+"/upload/"+newFileName); } @Getmapping ("/{id}") public void download (@PathVariable String ID, httpservletRequest request, httpServletResponse respuesta) {try (inputStream InputStream = new FileInputSeam (new File (NEW ARCETER, ID + ".txt")); OutputStream outputStream.getTream (new FileStream (new File (NEW ARCETER, ID + ".txt")); Outtream outputStream = Response.getTream (new () {) {) { respuesta.setContentType ("Application/X-Download"); respuesta.setheader ("Disposición de contenido", "Adjunto; FileName = test.txt"); Ioutils.copy (inputStream, outputStream); outputStream.Flush (); } catch (excepción e) {}}}Vista previa de archivos
Cuando se envía la publicación del formulario, Editor.md traduce nuestro documento de sintaxis de Markdown al idioma HTML y envía las cadenas HTML a nuestro backend, que persiste estas cadenas HTML en la base de datos. El método de visualización específico en la página es el siguiente:
<! Doctype html> <html lang = "zh"> <head> <meta charset = "utf-8"/> <title> editor.md ejemplos </title> <link rel = "stylesheet" href = "$ {re.contextPath} /editor/css/editormd.preview.min.cs.csss" nterter " <link rel = "stylesheet" href = "$ {re.contextpath} /editor/css/editormd.css" rel = "nofollow externo"/> </thead> <body> <!-porque usamos el tema oscuro, agregamos la clase del tema oscuro al contenedor div para implementar nuestro estilo de código personalizado-> <Div id = "Contenido" src = "$ {re.contextPath} /jquery.min.js"> </script> <script src = "$ {re.contextpath} /editor/lib/marked.min.js"> </script> <script src = "$ {re.contextpath} /editor/lib/prettify.min.min.js" src = "$ {re.contextPath} /editor/lib/prettify.min.js"> </script> <script src = "$ {re.contextpath} /editor/editormd.min.js"> </script> <script type = "text/javaScript"> editormd.markdowntohtml ("contenido"); </script> </body> </html>Dirección de vista previa: http: // localhost: 8080/editorWeb/Preview/{id}
Editar dirección: http: // localhost: 8080/editorweb/edit/{id}
Descarga de código
Descargar desde mi github, https://github.com/longfeizheng/editor-markdown
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.