Markdown est une langue de balisage qui peut être écrite dans un éditeur de texte normal. Grâce à une syntaxe de balisage simple, il peut faire en sorte que le contenu texte ordinaire ait un certain format.
Préface
Editor.md est un éditeur en ligne (composant) open source et embarquable Markdown construit sur Codemirror, jQuery et marqué. Ce chapitre utilisera Springboot pour intégrer l'éditeur.md pour construire l'éditeur de Markdown.
Télécharger le plugin
Adresse du projet: éditeur.md
Décomposer la structure du répertoire:
Configurer l'éditeur.md
Placez le Simple.html dans le dossier Exapmles dans le projet et configurez les fichiers CSS et JS correspondants
Éditeur de configuration
...... <script src = "$ {re.contextpath} /jquery.min.js"> </ script> <script src = "$ {re.contextpath} /editor/editormd.min.js"> </ script> <lin rel = "external nofollow" /> <link rel = "Stylesheet" href = "$ {re.contextpath} /editor/css/editormd.css" rel = "external nofollow" /> <lin rel = "external nofollow" type = "image / x-icon" />.....<!-- Stocker les fichiers source pour l'édition -> <textarea style = "affiche: aucun;" id = "textContent" name = "textContent"> </ TextArea> <! - Le deuxième champ de texte caché est utilisé pour construire le code HTML généré pour faciliter la soumission du post du formulaire. Le nom ici peut être pris arbitrairement. Lorsqu'elle est acceptée en arrière-plan, cette clé de nom doit être prévalée -> <textarea id = "text" name = "text"> </ textarea> </div>Initialiser l'éditeur
Var Testeditor; $(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", // Cette configuration n'existe pas dans Simple.html, mais pour soumettre le formulaire, utilisez cette configuration pour permettre au formulaire HTML construit directement dans le deuxième champ caché de TextArea: true // PostTheMe: "sombre");Cela implémente l'éditeur d'éditeur le plus simple.md, avec les effets suivants:
Adresse d'accès: http: // localhost: 8080 /
Téléchargement d'image
Étant donné que l'adresse de téléchargement d'image configurée dans l'éditeur d'initialisation est ImageUploadUrl: "/ fichier", correspondant à lui, nous pouvons traiter le téléchargement de fichiers dans / fichier
@ RestController @ requestmapping ("/ file") @ slf4jpublic class fileController {// @value ("") // string folder = System.getProperty ("user.dir") + file.separator + "upload" + file.separator; / ** * Chemin d'enregistrement de fichier configuré dans le fichier de configuration * / @value ("$ {img.location}") Folder de chaîne privée; @Postmapping public fileInfo upload (httpservletRequest request, @RequestParam (value = "editormd-iMage-file", required = false) Fichier multipartfile) lève une exception {log.info ("【fileController】】 filename = {}, fileorginnmae = {}, fichier = {}", file. file.getoriginalFileName (), file.getSize ()); log.info (request.getContextPath ()); String filename = file.getoriginalFileName (); String suffix = filename.substring (filename.LastIndexof (".") + 1); String newFileName = new Date (). GetTime () + "." + suffixe; Fichier localfile = nouveau fichier (dossier, newFileName); file.transferto (localfile); Log.info (localfile.getAbsolutepath ()); return new FileInfo (1, "Téléchargé avec succès", request.getRequestUrl (). substring (0, request.getRequestUrl (). LastIndexof ("/")) + "/ upload /" + newFileName); } @Getmapping ("/ {id}") public void download (@PathVariable String id, httpsservletRequest request, httpServLetResponse réponse) {try (inputStream inputStream = new FileInputStream (newgetoutUrStstream ();) {); outputStreamStream = réponse.getoutPutStream ();););););););););) {) réponse.setContentType ("Application / X-Download"); Response.sethEader ("Content-Disposition", "attachement; filename = test.txt"); Ioutils.copy (InputStream, OutputStream); outputStream.flush (); } catch (exception e) {}}}Aperçu des fichiers
Lorsque la publication de formulaire est soumise, Editor.MD traduit notre document de syntaxe Markdown en langage HTML et soumet les chaînes HTML à notre backend, qui persiste ces chaînes HTML dans la base de données. La méthode d'affichage spécifique sur la page est la suivante:
<! Doctype html> <html lang = "zh"> <éad> <meta charset = "utf-8" /> <itle> editor.md Examples </ title> <link rel = "Stylesheet" href = "$ {re.contextpath} /editor/css/editord "preview.min.min.css" rel = "rel =" Linkd "/" rel = "Stylesheet" href = "$ {re.ContextPath} /editor/css/editormd.css" rel = "External Nofollow" /> </ head> <body> <! - Parce que nous utilisons le thème sombre, nous ajoutons une classe de thème sombre à la div de conteneur pour implémenter notre style de code personnalisé -> <div id = "Content"> $ {editor.Content! 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"> </ script> <script> <script> src = "$ {re.contextpath} /editor/lib/prettify.min.js"> </ script> <script src = "$ {re.contextpath} /editor/editormd.min.js"> </ script> <script type = "Text / javascript"> editormd.markdowtohtml ("contenu"); </cript> </ body> </html>Adresse d'aperçu: http: // localhost: 8080 / editorweb / aperview / {id}
Edit Adresse: http: // localhost: 8080 / editorweb / edit / {id}
Téléchargement de code
Téléchargez depuis mon github, https://github.com/longfeizheng/editor-markdown
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.