大厂都在用的Markdown编辑器

喜欢ヅ旅行 2023-07-08 15:26 125阅读 0赞

> 最近项目中需要一个新闻管理的功能，就想到了Markdown编辑器。去了Markdown官网才发现，原来这么多大厂都在使用Markdown编辑器。下图为Markdown主要用户。  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70]  
> 是不是感觉很厉害！下面来一起看一下Markdown的具体实现吧！！！

### 文章目录 ###

*   *   *  准备工作
         *  Markdown的实现
         *  获取内容
         *  页面显示

--------------------

### 准备工作 ###

在使用之前当然是需要先下载对应的插件，下载地址：[https://pandao.github.io/editor.md/index.html][https_pandao.github.io_editor.md_index.html]  
下载完成后引入需要的文件

### Markdown的实现 ###

页面只需要放一个div和一个textarea标签即可，之后用JS来渲染。  
**HTML部分代码：**

**注意：** div中的id是用来渲染Markdown编辑器时使用的，textarea是获取编辑器中内容时使用的。

**JS部分代码**

**注意：** editormd为页面中div的id。  
path: “static/editor/lib/”，需要指定到editor文件夹的lib路径。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 1]  
imageUploadURL: “notice/imgUpdate”，设置上传图片的请求地址。  
后台imgUpdate方法代码如下。

/** * 图片上传 * @param file * @return */
    @RequestMapping("/imgUpdate")
    @ResponseBody
    public Map<String, Object> imgUpdate(@RequestParam(value = "editormd-image-file", required = true) MultipartFile file){ 
        String uuid = UUID.randomUUID().toString()+".jpg";
        Boolean bool = fileService.saveFile(file, uuid);
        Map<String, Object> map = new HashMap<>();
        if(bool) { 
            map.put("success", 1);
            map.put("message", "上传成功");
            map.put("url", "http://localhost/layEdit/download?uuid="+uuid);
        }else { 
            map.put("success", 0);
            map.put("message", "失败");
        }
        return map;
    }
    
    /** * 图片下载 * @param uuid * @param request * @param response */
    @RequestMapping(value = "/download")
    @ResponseBody
    private void download(String uuid, HttpServletRequest request, HttpServletResponse response) { 
        fileService.download(uuid, request, response);
    }

**注：** saveFile和download方法为图片上传和下载方法。  
Markdown图片上传完成后需要返回对应格式的JSON信息。  
message: 提示信息（字符串）  
success: 上传成功或失败，1成功 | 0失败  
url: 图片下载地址（用于图片回显）

**至此完整的Markdown就完全实现了，效果如下：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 2]

### 获取内容 ###

Markdown编辑器在我们写文章时已经把内容自动同步到了之前我们定义的textarea标签中了（这一块Markdown做的很好，有些编辑器还需要自己把内容同步到标签中）。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 3]  
既然Markdown已经自动帮我们把内容同步到了textarea标签中了，那我们就可以直接通过textarea标签的id值获取textarea标签内的内容，即编辑器中内容。代码如下：

在此方法中可以对内容进行保存，也可以使用form表单提交保存。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 4]  
到这里，编辑器中的内容都已经获取到了，保存方法这里就不写了。  
**这里需要注意的是：由于富文本内容有可能过多，数据库保存该字段，不能用String类型，长度不够，MySQL数据库可以用longtext类型。**

### 页面显示 ###

上面我们也看到了，在保存数据时，我们保存到数据库中的是Markdown的语法，而并不是HTML语法，所以不能直接显示在页面上。  
**如何直接显示在页面上，后果则是：**  
![在这里插入图片描述][20200227170111807.png]  
显然不能直接显示在页面上，需要把Markdown的语法先转成HTML语法在显示。  
那么问题来了，如何转呢？我们需要引入以下几个JS（都是Markdown插件中的文件）

页面同样只需要div和textarea标签。之后通过JS来吧Markdown的语法转换为HTML语法显示。代码如下：

<div id="test">
        <textarea style="display:none;" th:text="${model.text}"></textarea>
    </div>
    
    <script type="text/javascript">
        editormd.markdownToHTML("test", { 
            htmlDecode: "style,script,iframe",
            emoji: true,
            taskList: true,
            tex: true,  // 默认不解析
            flowChart: true,  // 默认不解析
            sequenceDiagram: true  // 默认不解析
        });
    </script>

其中th:text="$\{model.text\}"为后台传递过来的Markdown语法。  
显示效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 5]  
到这里Markdown的使用就讲完了。  
**创作不易，各位的点赞是对我最大的鼓励。欢迎下方留言交流，期待与各位的交流。**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200302204616227.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2,size_16,color_FFFFFF,t_70
[https_pandao.github.io_editor.md_index.html]: https://pandao.github.io/editor.md/index.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200227153757501.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200227155740559.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200227161914396.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200227162749376.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2,size_16,color_FFFFFF,t_70
[20200227170111807.png]: https://img-blog.csdnimg.cn/20200227170111807.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200227181934221.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2,size_16,color_FFFFFF,t_70