Editormd的使用——在线编辑和查看文章

最新推荐文章于 2025-06-16 18:44:08 发布

將晨

最新推荐文章于 2025-06-16 18:44:08 发布

阅读量5.4k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： Java 文章标签： editormd html js java javascript

本文链接：https://blog.youkuaiyun.com/Follower_JC/article/details/107110969

本文介绍了如何使用Editormd在网页中集成Markdown编辑器，包括编辑和预览功能的实现，以及如何处理图片上传。首先从官方仓库下载资源，确保正确引入jQuery，接着配置HTML和JavaScript代码。同时，提供了Java后端处理图片上传的Controller代码，以及将Markdown内容转换为HTML显示的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用Editormd可以方便地在界面上嵌入markdown编辑器，并能够实时预览。
先看一下实现效果：
编辑文章界面：
在这里插入图片描述展示文章界面：

用法：

首先，到https://pandao.github.io/editor.md/下载Editormd的压缩包，解压到自己的静态资源文件夹下。
在这里插入图片描述第二步，引入必要的文件：

	<link rel="stylesheet" href="/resource/assets/editormd/css/editormd.css"/>
    <link rel="stylesheet" href="/resource/assets/editormd/css/editormd.min.css"/>
    <script src="/resource/assets/js/jquery.min.js"></script>
    <script src="/resource/assets/editormd/editormd.min.js"></script>

注意：jquery文件必须要在editormd之前引入，否则会报editormd is undefined/zepto is undefined的错误

第三步，在html中添加如下代码：

<div id="my-editormd">
	<!-- 书写与实时显示的textarea -->
	<textarea id="my-editormd-markdown-doc" name="my-editormd-markdown-doc" style="display:none;"><%=content%></textarea>
	<!-- 用于后端获取md稳当内容，Java中：request.getParameter("my-editormd-html-code")。 -->
	<textarea id="my-editormd-html-code" name="my-editormd-html-code" style="display:none;"></textarea>
</div>

JavaScript代码如下所示：

 var editor;
    $(function() {
   
   
        editor = editormd("my-editormd", {
   
   //注意1：这里的就是上面的DI

最低0.47元/天解锁文章

200万优质内容无限畅学