Markdown is a markup language that can be written in a normal text editor. Through simple markup syntax, it can make ordinary text content have a certain format.
Preface
Editor.md is an open source, embeddable Markdown online editor (component) built on CodeMirror, jQuery, and Marked. This chapter will use SpringBoot to integrate Editor.md to build the Markdown editor.
Download the plugin
Project address: Editor.md
Unzip the directory structure:
Configure Editor.md
Place the simple.html in the exapmles folder into the project and configure the corresponding css and js files
Configuration Editor
...... <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="external nofollow" /> <link rel="stylesheet" href="${re.contextPath}/editor/css/editormd.css" rel="external nofollow" /> <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" rel="external nofollow" type="image/x-icon"/>.........<!-- Store source files for editing --> <textarea style="display:none;" id="textContent" name="textContent"></textarea> <!-- The second hidden text field is used to construct the generated HTML code to facilitate form POST submission. The name here can be taken arbitrarily. When accepted in the background, this name key shall be prevailed --> <textarea id="text" name="text"></textarea> </div>Initialize the editor
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", //This configuration does not exist in simple.html, but in order to submit the form, use this configuration to allow the constructed HTML code to be directly in the second hidden textarea field, which facilitates post-submitting form. saveHTMLToTextarea: true // previewTheme : "dark" }); });This implements the simplest editor.md editor, with the following effects:
Access address: http://localhost:8080/
Image upload
Since the image upload address configured in the initialization editor is imageUploadURL: "/file", corresponding to it, we can process the file upload in /file
@RestController@RequestMapping("/file")@Slf4jpublic class FileController {// @Value("")// String folder = System.getProperty("user.dir")+File.separator+"upload"+File.separator; /** * File saving path configured in the configuration file*/ @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() + "." + suffix; File localFile = new File(folder, newFileName); file.transferTo(localFile); log.info(localFile.getAbsolutePath()); return new FileInfo(1, "Uploaded successfully", request.getRequestURL().substring(0, request.getRequestURL().lastIndexOf("/"))+"/upload/"+newFileName); } @GetMapping("/{id}") public void downLoad(@PathVariable String id, HttpServletRequest request, HttpServletResponse response) { try (InputStream inputStream = new FileInputStream(new File(folder, id + ".txt")); OutputStream outputStream = response.getOutputStream();) { response.setContentType("application/x-download"); response.setHeader("Content-Disposition", "attachment;filename=test.txt"); IOUtils.copy(inputStream, outputStream); outputStream.flush(); } catch (Exception e) { } }}File preview
When the form POST is submitted, editor.md translates our markdown syntax document into HTML language and submits the html strings to our backend, which persists these HTML strings into the database. The specific display method on the page is as follows:
<!DOCTYPE html><html lang="zh"><head> <meta charset="utf-8"/> <title>Editor.md examples</title> <link rel="stylesheet" href="${re.contextPath}/editor/css/editormd.preview.min.css" rel="external nofollow" /> <link rel="stylesheet" href="${re.contextPath}/editor/css/editormd.css" rel="external nofollow" /></head><body><!-- Because we use dark theme, we add dark theme class to the container div to implement our custom code style --><div id="content">${editor.content!''}</div><script 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>Preview address: http://localhost:8080/editorWeb/preview/{id}
Edit address: http://localhost:8080/editorWeb/edit/{id}
Code download
Download from my github, https://github.com/longfeizheng/editor-markdown
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.