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

使用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"
  • 4
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
springboot集成editor.md是一个用于开发markdown编辑器的项目。你可以在博客地址https://blog.csdn.net/weixin_43653670/article/details/112095132中找到该项目的源码。在这个项目中,使用了SpringToolSuite4、JDK1.8和MySQL5.6进行开发。该编辑器实现了发布界面和带图片编辑等功能。 为了使用editor.md编辑器,你需要在页面加载完成后进行初始化。可以通过以下代码进行初始化: ```javascript var contentEditor; $(function() { contentEditor = editormd({ id :'md-content', width : '100%', height : 640, syncScrolling : 'single', path : '/mylib/editormd/lib/' }); }); ``` 如果想要使用editor.md编辑器,你需要先下载相应的资源包并将相关资源文件拷贝到项目的static目录下。然后在页面中引入editor.md的核心css和js文件,还需要先引入jquery,因为editor.md依赖于jquery。可以通过以下代码进行引入: ```html <link rel="stylesheet" href="/mylib/editormd/css/editormd.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="/mylib/editormd/editormd.min.js"></script> ``` 在html标签中,使用以下代码来创建一个编辑区域: ```html <div id="md-content" style="z-index: 1 !important;"> <textarea placeholder="博客内容" rows="20" name="content" style="display:none;"></textarea> </div> ``` 以上就是springboot集成editor.md开发markdown编辑器的主要内容。如果还有其他问题,请继续提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值