Markdown - это язык разметки, который может быть написан в обычном текстовом редакторе. Через простой синтаксис разметки он может сделать обычный текстовый содержимое иметь определенный формат.
Предисловие
Editor.md - это открытый онлайн -редактор Marckdown (компонент), созданный на Codemirror, JQuery и Marked. В этой главе будет использоваться Springboot для интеграции editor.md для создания редактора Markdown.
Загрузите плагин
Адрес проекта: Editor.md
Разанипируйте структуру каталога:
Configure Editor.md
Поместите Simple.html в папку Exapmles в проект и настройте соответствующие файлы CSS и JS
Редактор конфигурации
...... <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 = "внешний nofollow"/> <link rel = "stylesheet" href = "$ {re.contextPath}/editor/css/editormd.css" rel = "enfully nofollow"/> <link rel rel ucon "icon" rel = "nofollon href = "https://pandao.github.io/editor.md/favicon.ico" rel = "внешний nofollow" type = "image/x-iCon" />.... id = "textContent" name = "textContent"> </textarea> <!- Второе скрытое текстовое поле используется для построения сгенерированного HTML-кода для облегчения отправки после формы. Название здесь может быть принято произвольно. При принятии на фоне этот ключ имени будет преобладатьИнициализировать редактор
var testeditor; $ (function () {testeditor = editormd ("test-editormd", {width: "90%", высота: 640, синхронизация: "Сингл", Path: "$ {re.contextPath}/editor/lib/", ImageUpload: True, изображения: ["jpg", "jpeg", ",", "pr", "," pr ",", "," pr ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", "," ps ". «WebP»], ImageUploadurl: «/File», // Эта конфигурация не существует в простом. 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}") 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 () + "." + суффикс; File localfile = новый файл (папка, NewFilename); file.transferto (localfile); log.info (localfile.getabsolutepath ()); вернуть новый FileInfo (1, «Загрузить успешно», request.getRequesturl (). substring (0, request.getRequesturl (). } @GetMapping ("/{id}") public void Download (@pathvariable String Id, httpservletrequest -запрос, httpservletresponse response) {try (inputstream inputStream = new FileInputStream (новый файл (ID + ".txt")); outputStream = outpret -recsion.getOutputStream () {) {) response.setContentType ("Application/x-Download"); response.setheader ("Содержимое-распределение", "Приложение; filename = test.txt"); Ioutils.copy (inputstream, outputstream); outputStream.flush (); } catch (Exception e) {}}}Предварительный просмотр файла
Когда пост в форме отправляется, Editor.md переводит наш документ с синтаксисом Markdown на язык HTML и передает HTML -строки на нашу бэкэнд, который сохраняет эти строки HTML в базу данных. Конкретный метод отображения на странице следующее:
<! Doctype html> <html lang = "zh"> <head> <meta charset = "utf-8"/> <title> editor.md Примеры </title> <link rel = "stylesheet" href = "$ {re.contextpath}/editor/css/editorm.preview.min.clowss}/editor/csss/editormd. rel = "styleSheet" href = "$ {re.contextPath}/editor/css/editormd.css" rel = "External nofollow"/> </head> <body> <!-Потому что мы используем темную тему, мы добавляем темный класс темы в контейнер, чтобы реализовать стиль пользовательского кода-> <div id = "> $ {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.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 ("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 больше.