Markdown ist eine Markup -Sprache, die in einem normalen Texteditor geschrieben werden kann. Durch die einfache Markup -Syntax kann es zu einem bestimmten Format sind, dass gewöhnliche Textinhalte ein bestimmtes Format haben.
Vorwort
Editor.md ist eine Open Source, einbettbarer Markdown -Online -Editor (Komponente), die auf Codemirror, JQuery und gekennzeichnet ist. In diesem Kapitel wird Springboot verwendet, um editor.md zu integrieren, um den Markdown -Editor zu erstellen.
Laden Sie das Plugin herunter
Projektadresse: editor.md
Entpacken Sie die Verzeichnisstruktur:
Konfigurieren Sie Editor.md
Platzieren Sie die einfachen.html im Exapmles -Ordner in das Projekt und konfigurieren Sie die entsprechenden CSS- und JS -Dateien
Konfigurationseditor
...... <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 = "externer nofollow"/> <link rel = "styleSheet" href = "$ {re.contextPath} /editor/css/editormd.css" rel = "external nofollow"/> <link rel = "scortcut icon" href rel = "externer nofollow" type = "image/x-icon" />.........! id = "textContent" name = "textContent"> </textarea> <! Der Name hier kann willkürlich genommen werden. Wenn im Hintergrund akzeptiert wird, muss dieser Name -Schlüssel durchgesetzt werden -> <textarea id = "text" name = "text"> </textArea> </div>Initialisieren Sie den Herausgeber
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: "/Datei", // diese Konfiguration existiert nicht in Simple.html, um das Formular zu übermitteln, um diese Konfiguration zu übermitteln, um den konstruierten HTML-Code direkt in der zweiten versteckten Textbereiche zu ermöglichen, die nach dem Subemited-SaveHtmlTOTMTMTMLTOTEXA:Dies implementiert den einfachsten Editor.md Editor mit den folgenden Effekten:
Zugriffsadresse: http: // localhost: 8080/
Bild -Upload
Da die im Initialisierungseditor konfigurierte Image -Upload -Adresse imageUploadurl: " /Datei" entsprechend ist, können wir die Datei -Upload in /Datei verarbeiten
@RastController@RequestMapPing ("/Datei")@Slf4JPublic Class FileController {// @value ("") // String order = system.getProperty ("user.dir")+file.separator+"upload"+file.separator; / *** Dateispeicherpfad in der Konfigurationsdatei konfiguriert*/ @Value ("$ {img.location}") privater String -Ordner; @PostMapping public FileInfo upload(HttpServletRequest request, @RequestParam(value = "editormd-image-file", required = false) MultipartFile file) throws Exception { log.info("【FileController】 fileName={},fileOrginNmae={},fileSize={}", file.getName(), file.getOriginalFileName (), file.getSize ()); log.info (request.getContextPath ()); String Dateiname = Datei.getOriginalFileName (); String -Suffix = Dateiname.substring (Dateiname.lastIndexof (".") + 1); String newFileName = new Date (). GetTime () + "." + Suffix; Datei localFile = neue Datei (Ordner, Newfilename); file.transferto (localFile); log.info (localFile.getabsolutepath ()); Neue FileInfo zurückgeben (1, "erfolgreich hochgeladen", Request.getRequesturl (). Substring (0, Request.GetRequesturl (). } @Getmapping ("/{id}") public void download (@PathVariable String -ID, httpServletRequest -Anforderung, httpServletResponse -Antwort) {try (inputStream inputStream = new FileInputStream (neue Datei, id + ".TXT") {) {); response.setContentType ("Anwendung/x-download"); response.setheader ("Inhaltsdisposition", "Anhang; Dateiname = test.txt"); Ioutils.copy (InputStream, OutputStream); outputStream.flush (); } catch (Ausnahme e) {}}}Dateivorschau
Wenn der Formularpost eingereicht wird, übersetzt Editor.md unser Markdown -Syntax -Dokument in HTML -Sprache und unterteilt die HTML -Zeichenfolgen in unser Backend, was diese HTML -Zeichenfolgen in die Datenbank weiterleitet. Die spezifische Anzeigemethode auf der Seite lautet wie folgt:
<! DocType html> <html Lang = "zh"> <head> <meta charset = "utf-8"/> <title> editor.md Beispiele </title> <link rel = "styleSheet" href = "$ {re.contextpath} /editor/css/editorMd.preve.Min.Min.Min.Min.Min" rel = "rel =" rel = "rel =" rel = "rel =" rel = "rel =" rel = "rel =" rel = "rel =" rel = "rel =" rel = "rel =" rel = "rel =" rel = "rel =" rel = "rel =" rel = "rel =" rel = "rel =" rel = "rel =" rel = "rel =" rel = "rel =" rel- <link rel = "styleSheet" href = "$ {re.contextPath} /editor/css/editormd.css" rel = "externe nofollow"/> </head> <body> <!-Weil wir dunkle Themen verwenden, addieren wir Dark-Themenklasse zum Container-Div, um unseren benutzerdefinierten Code-Stil zu implementieren. 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.js"></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.markdowntohtml ("Inhalt"); </script> </body> </html>Vorschau -Adresse: http: // localhost: 8080/editorweb/preview/{id}
Adresse bearbeiten: http: // localhost: 8080/editorWeb/edit/{id}
Code herunterladen
Download von meinem Github, https://github.com/longfeizheng/editor-markdown
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.