jsp集成markdown编辑器

网页上集成markdown编辑器

最近自己在装修自己的博客网站，由于习惯了csdn的markdown编辑器，所以也想在自己的网站集成一个

上面就是效果图

其实，集成这个过程也很简单。

步骤

首先声明，我用的语言是java,编辑器是网上找的一个大佬写的editor.md

github链接地址

1. 首先将自己下到的资源解压到project目录下
   

2.在自己要引入的页面，引入css和js
注意
- 路径一定要写对，通过SpringMVC，我配置了路径映射。

<!-- 通过mvc:resources设置静态资源，这样servlet就会处理这些静态资源，而不通过控制器 -->
    <!-- 设置不过滤内容，比如:css,jquery,img 等资源文件 -->
    <mvc:resources mapping="/css/**" location="/statics/css/" />
    <mvc:resources mapping="/images/**" location="/statics/images/" />
    <mvc:resources mapping="/js/**" location="/statics/js/" />
    <mvc:resources mapping="/editor.md-master/**" location="/editor.md-master/" />

• js依赖jquery 不要忘记

 <!--引入markdown css样式 -->
 <link rel="stylesheet" href="${pageContext.request.contextPath}/editor.md-master/css/editormd.css" />

<div id="test-editormd">
    <textarea name="blogContent" id="blogContent"></textarea>
</div>

<!--引入markdown js   要放在body最下面-->
<script src="${pageContext.request.contextPath}/editor.md-master/editormd.js"></script>

下面是配置代码

<script>
     var testEditor;
        $(function() {
            testEditor = editormd("test-editormd", {
                width   : "90%", 
                height  : 400,
                syncScrolling : "single",
                saveHTMLToTextarea : true, //设置可保存为html 获取的时候testEditor.getHtml();就可以了
                /*theme : "dark",*/  //设置主题，有默认
                /*previewTheme : "dark",*/
                /*editorTheme : "pastel-on-dark",*/
                searchReplace : true,
                emoji : true,
                taskList : true,
                tocm            : true,         // Using [TOCM]
                tex : true,                   // 开启科学公式TeX语言支持，默认关闭
                flowChart : true,             // 开启流程图支持，默认关闭
                sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
                dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true
                imageUpload : true,
                imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                imageUploadURL : "./php/upload.php",
                path    : "${pageContext.request.contextPath}/editor.md-master/lib/"
            });
        });
  </script>

图片上传我还没有弄好，弄好之后在整理一下。