使用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"