Markdown هي لغة ترميز يمكن كتابتها في محرر نصية عادي. من خلال بناء جملة الترميز البسيط ، يمكن أن يجعل محتوى النص العادي له تنسيق معين.
مقدمة
Editor.MD هو محرر Open Source و EmbedDdable Markdown عبر الإنترنت (مكون) مبني على Codemirror و JQuery و Tarked. سيستخدم هذا الفصل SpringBoot لدمج المحرر.
قم بتنزيل البرنامج المساعد
عنوان المشروع: محرر
فك هيكل الدليل:
تكوين المحرر
ضع simple.html في مجلد exapmles في المشروع وتكوين ملفات CSS و JS المقابلة
محرر التكوين
...... <script src = "$ {re.contextpath} /jquery.min.js"> </script> <script src = "$ {re.contextpath}/editor/editormd.min.js"> </script> <inlin rel = href = "$ {re.contextpath}/editor/css/style.css" rel = "خارجي nofollow"/> <link rel = "stylesheet" href = "$ {re.contextpath}/editor/css/editormd.cs" rel = href = "https://pandao.github.io/editor.md/favicon.ico" rel = "severonal nofollow" type = "image/x-icon" /> id = "textContent" name = "textContent"> </swertarea> <!- يتم استخدام حقل النص المخفي الثاني لإنشاء رمز HTML الذي تم إنشاؤه لتسهيل تقديم النموذج. الاسم هنا يمكن أن يؤخذ بشكل تعسفي. عند قبولها في الخلفية ، يجب أن يسود مفتاح الاسم هذا -> <textarea id = "text" name = "text"تهيئة المحرر
var testeditor ؛ $ (function () {testeditor = editormd ("test-eDitormd" ، {width: "90 ٪" ، height: 640 ، syncscrolling: "single" ، path: "$ {re.contextpath}/editor/lib/" ، imageUpload: rue ، imageformats: "jpg" "WebP" ، ImageUploadurl: "/file" ، // هذا التكوين غير موجود في Simple.html ، ولكن من أجل تقديم النموذج ، استخدم هذا التكوين للسماح ببناء رمز HTML مباشرة في حقل Textarea الثاني: "هذا ينفذ أبسط محرر محرر ، مع الآثار التالية:
عنوان الوصول: http: // localhost: 8080/
تحميل الصورة
نظرًا لأن عنوان تحميل الصورة الذي تم تكوينه في محرر التهيئة هو ImageUploadurl: " /file" ، المقابل له ، يمكننا معالجة تحميل الملف في /ملف
@restController@requestMapping ("/file")@slf4jpublic class fileController {//value ("") // string folder = system.getProperty ("user.dir")+file.separator+"upload"+file.separator ؛ / *** مسار حفظ الملف الذي تم تكوينه في ملف التكوين*/ value ("$ {img.location}") مجلد السلسلة الخاصة ؛ postmapping public fileInfo Upload (httpservletrequest request ، requestparam (value = "editormd-image-file" ، required = false) multipartfile file) يلقي الاستثناء {log.info ("【fileController】 filename = {} file.getoriginalfilename () ، file.getSize ()) ؛ log.info (request.getContextPath ()) ؛ اسم ملف السلسلة = file.getoriginalfilename () ؛ سلسلة لاحقة = filename.substring (filename.lastindexof (".") + 1) ؛ سلسلة newFilename = New Date (). getTime () + ".". + لاحقة ؛ ملف localfile = ملف جديد (مجلد ، newFilename) ؛ file.transferto (localfile) ؛ log.info (localfile.getabsolutepath ()) ؛ إرجاع FileInfo جديد (1 ، "تم تحميله بنجاح" ، request.getRequesturl (). substring (0 ، request.getRequesturl (). lastIndexof ("/"))+"/upload/"+newFilename) ؛ } getMapping ("/{{id}") تنزيل public void (معرف السلسلة pathvariable ، httpservletrequest طلب ، httpservletresponse) {try (inputStream = newInputStream (ملف جديد ، id + ".txt")) ؛ استجابة. استجابة. ioutils.copy (InputStream ، OutputStream) ؛ outputStream.flush () ؛ } catch (استثناء e) {}}}معاينة الملف
عند تقديم منشور النموذج ، يترجم محرر. طريقة العرض المحددة على الصفحة كما يلي:
<! doctype html> <html lang = "zh"> <head> <meta charset = "utf-8"/> <title> editor.md أمثلة </title> <link rel = "stylesheet" href = "$ {re.contextpath}/editor/cs/editormd.preview.min.cs <link rel = "stylesheet" href = "$ {re.contextpath} /editor/css/editormd.css" rel = "خارجي nofollow"/> </head> <body> <!-لأننا نستخدم السمة المظلمة ، نضيف الفئة المظلمة إلى الحاوية div إلى تنفيذ نمط الكود المخصص لدينا- 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.markdownthtml ("content") ؛ </script> </body> </html>عنوان المعاينة: http: // localhost: 8080/editorWeb/Preview/{id}
عنوان التحرير: http: // localhost: 8080/editorWeb/edit/{id}
تنزيل رمز
تنزيل من github ، https://github.com/longfeizheng/editor-markdown
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.