宜宾网站建设公司

怎么在SpringBoot中使用Editor.md构建一个Markdown富文本编辑器

怎么在SpringBoot中使用Editor.md构建一个Markdown富文本编辑器？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

创新互联建站主要业务有网站营销策划、成都网站设计、成都网站建设、微信公众号开发、小程序设计、H5响应式网站、程序开发等业务。一次合作终身朋友，是我们奉行的宗旨；我们不仅仅把客户当客户，还把客户视为我们的合作伙伴，在开展业务的过程中，公司还积累了丰富的行业经验、营销型网站资源和合作伙伴关系资源，并逐渐建立起规范的客户服务和保障体系。 

Editor.md 是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。本章将使用SpringBoot整合Editor.md构建Markdown编辑器。

下载插件

项目地址：Editor.md

解压目录结构：

怎么在SpringBoot中使用Editor.md构建一个Markdown富文本编辑器

配置Editor.md

将exapmles文件夹中的simple.html放置到项目中，并配置对应的css和js文件

配置编辑器

......
 
  
  
  
  
......

 

    
    
  

初始化编辑器

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",
      //这个配置在simple.html中并没有，但是为了能够提交表单，使用这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中，方便post提交表单。
      saveHTMLToTextarea: true
      // previewTheme : "dark"
    });
  });

这样就实现了最简单的editor.md编辑器，效果如下：

怎么在SpringBoot中使用Editor.md构建一个Markdown富文本编辑器

访问地址：http://localhost:8080/

图片上传

由于在初始化编辑器中配置的图片上传地址为imageUploadURL: "/file",，与之对应，我们在/file处理文件上传即可

@RestController
@RequestMapping("/file")
@Slf4j
public 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() + "." + suffix;

    File localFile = new File(folder, newFileName);
    file.transferTo(localFile);
    log.info(localFile.getAbsolutePath());
    return new FileInfo(1, "上传成功", 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) {

    }
  }
}

文件预览

表单POST提交时，editor.md将我们的markdown语法文档翻译成了HTML语言，并将html字符串提交给了我们的后台，后台将这些HTML字符串持久化到数据库中。具体在页面显示做法如下：




  
  Editor.md examples
  
  



${editor.content!''}
  editormd.markdownToHTML("content");

看完上述内容，你们掌握怎么在SpringBoot中使用Editor.md构建一个Markdown富文本编辑器的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！


本文题目：怎么在SpringBoot中使用Editor.md构建一个Markdown富文本编辑器
链接URL：http://hbruida.cn/article/pppidp.html

其他资讯