Markdown adalah bahasa markup yang dapat ditulis dalam editor teks normal. Melalui sintaks markup sederhana, dapat membuat konten teks biasa memiliki format tertentu.
Kata pengantar
Editor.md adalah sumber terbuka, editor online markdown yang dapat disulddable (komponen) yang dibangun di atas codemirror, jQuery, dan ditandai. Bab ini akan menggunakan Springboot untuk mengintegrasikan editor.md untuk membangun editor markdown.
Unduh plugin
Alamat Proyek: Editor.md
Unzip struktur direktori:
Konfigurasikan editor.md
Tempatkan Simple.html di folder Exapmles ke dalam proyek dan konfigurasikan file CSS dan JS yang sesuai
Editor Konfigurasi
...... <skrip src = "$ {re.contextPath} /jQuery.min.js"> </script> <script src = "$ {re.contextPath} /Editor/editormd.min.js"> </script> <tautan rel = "stylesheet" href = "$ {re.contextPath} /Editor/css/style.css" rel = "eksternal nofollow"/> <link rel = "stylesheet" href = "$ {re.contextpath} /Editor/css/Editormd.csssssssss" rel = "external nofower/over over (externlow" external /csssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss. href = "https://pandao.github.io/editor.md/favicon.ico" rel = "eksternal nofollow" type = "gambar/x-icon" />.........< !-- menyimpan file sumber untuk mengedit-> <TextArea style = "Tampilan: NOTLE;" id = "TextContent" name = "TextContent"> </pextarea> <!- Bidang teks tersembunyi kedua digunakan untuk membuat kode HTML yang dihasilkan untuk memfasilitasi pengiriman pos formulir. Nama di sini dapat diambil secara sewenang -wenang. Ketika diterima di latar belakang, kunci nama ini harus berlaku -> <textarea id = "text" name = "text"> </pextarea> </div>Inisialisasi editor
var testeditor; $ (function () {testEditor = editorMd ("test-editorMd", {lebar: "90%", tinggi: 640, syncscrolling: "single", path: "$ {re.contextpath}/editor/lib/", gigroupoad "," gigheformats: "jpg", "jpg", "gigeFormats:" jpg "," gigeFormats: "jpg", "gigeFormats:" gigeformats: "gigeformats:" jpg "," gigeformats: "gigeformats:" jpg "," gigeformats: "jpg", "BMP", "Webp"], Imageuploadurl: "/File", // Konfigurasi ini tidak ada di Simple.html, tetapi untuk mengirimkan formulir, menggunakan konfigurasi ini untuk memungkinkan kode HTML yang dibangun di SaveHtM;Ini mengimplementasikan editor editor.md paling sederhana, dengan efek berikut:
Alamat akses: http: // localhost: 8080/
Unggahan gambar
Karena alamat unggah gambar yang dikonfigurasi dalam editor inisialisasi adalah Imageuploadurl: " /File", sesuai dengan itu, kami dapat memproses file unggahan di /file
@Restcontroller@requestMapping ("/file")@slf4jpublic kelas filecontroller {// @value ("") // string folder = System.getProperty ("user.dir")+file.separator+"unggah"+file.separator; / *** Path Saving File yang dikonfigurasi dalam file konfigurasi*/ @Value ("$ {img.location}") private String folder; @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 filename = file.getoriginalFileName (); String suffix = filename.substring (filename.LastIndexOf (".") + 1); String newFileName = new date (). GetTime () + "." + sufiks; File localfile = file baru (folder, newFileName); file.transferto (localfile); log.info (localfile.getAbsolutePath ()); kembalikan fileInfo baru (1, "diunggah dengan sukses", request.getRequesturl (). Substring (0, request.getRequesturl (). LastIndexof ("/"))+"/unggah/"+newFileName); } @GetMapping ("/{id}") public void download (@pathvariable string ID, permintaan httpserVletRequest, httpservletResponse response) {try (inputStream inputStream = outputStream (folder = folder, id + ".txt"); outputStream {); outputStream (folder, iD + ".txtStream. response.setContentType ("Aplikasi/X-Download"); response.setHeader ("Disposisi konten", "lampiran; fileName = test.txt"); Ioutils.copy (inputStream, outputStream); outputStream.flush (); } catch (Exception e) {}}}Pratinjau file
Ketika posting formulir diajukan, editor.md menerjemahkan dokumen sintaks penurunan kami ke dalam bahasa HTML dan mengirimkan string HTML ke backend kami, yang terus bertentangan dengan string HTML ini ke dalam database. Metode tampilan spesifik pada halaman adalah sebagai berikut:
<! Doctype html> <html lang = "zh"> <head> <meta charset = "utf-8"/> <title> editor.md Contoh </iteme> <tautan rel = "stylesheet" href = "$ {re.contextpath} /editor/editor/csssssssssssss.piew.piew.piew.piew.piew.piew. rel = "stylesheet" href = "$ {re.contextPath} /Editor/css/editormd.css" rel = "eksternal nofollow"/> </head> <body> <!-karena kami menggunakan tema gelap, kandungan kami diven. src = "$ {re.contextPath} /jQuery.min.js"> </script> <script src = "$ {re.contextPath} /Editor/lib/marked.min.js"> </script> <script src = "$ {re.contextpath} src = "$ {re.contextPath} /Editor/lib/prettify.min.js"> </script> <script src = "$ {re.contextPath} /Editor/Editormd.min.js"> </script> <script type = "teks/javascript"> editormd.markdowntoHtml ("content"); </script> </body> </html>Alamat Pratinjau: http: // localhost: 8080/editorweb/preview/{id}
Edit Alamat: http: // localhost: 8080/editorweb/edit/{id}
Unduh kode
Unduh dari GitHub saya, https://github.com/longfeizheng/editor-markdown
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.