网页快速集成Markdown编辑器

快速集成Markdown编辑器

1、下载

地址:https://pandao.github.io/editor.md/

image-20220306163600528image-20220306163636912

2、添加到项目

1、解压 2、复制需要的文件到项目中

image-20220306164536939image-20220306164611723

image-20220306164901700

3、配置集成Markdown编辑器

开始配置集成Markdown编辑器

1、引入刚刚复制到项目路径中的css文件和js文件(还需要jquery的js)

测试基本代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试markdown</title>
    <!--引入Markdown编辑器css-->
    <link rel="stylesheet" href="../static/lib/editormd/css/editormd.min.css">
</head>
<body>


<div id="md-content" style="z-index: 1 !important;">
    <!--style="display: none" : 必须的-->
  <textarea  style="display: none" >
</textarea>
</div>



<!--1\jq引入(依赖到jq,所以需要)-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<!--2\引入Markdown编辑器js-->
<script src="../static/lib/editormd/editormd.min.js"></script>

<script>
    //初始化Markdown编辑器
    var contentEditor;
    $(function() {
        contentEditor = editormd("md-content", { /*md-content: textarea外面的div的id*/
            width   : "80%",
            height  : 640,
            syncScrolling : "single",  /*同步滑动*/
//        path    : "../static/lib/editormd/lib/"
            path    : "../static/lib/editormd/lib/" /*lib路径*/
        });
    });
</script>
</body>
</html>

结果:

image-20220306194708490


版权声明:本文为qq_45652428原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。