在前端集成MarkDown编辑器

最新推荐文章于 2025-03-13 13:49:19 发布

原创最新推荐文章于 2025-03-13 13:49:19 发布 · 759 阅读

7 ·

CC 4.0 BY-SA版权

前端插件集成专栏收录该内容

1 篇文章

订阅专栏

本文档介绍了如何在前端项目中集成Markdown编辑器，包括下载编辑器插件、创建目录、引入CSS和JS文件，以及设置textarea和初始化Markdown编辑器的JavaScript代码。通过实例展示了Markdown编辑器的配置步骤，确保在全屏模式下界面层级正确。

首先需要下载MarkDown的插件包

链接：https://pan.baidu.com/s/1UwAQSi85DSuc-tQ61s9Zrg
提取码：4hn1

在前端项目的Static中创建lieb目录引入下载好的所有文件

在这里插入图片描述

引入css、js、Jquary文件

    <link rel="stylesheet"href="../Static/lib/editor_markdown/css/editormd.min.css">
	<script src="../Static/js/jquery-3.5.1.js"></script>
	<script src="../Static/lib/editor_markdown/editormd.min.js"></script>

定义一个`textarea`区域作为MarkDown的载体

<div class="field">

      <div id="md-content" style="z-index: 1 !important;"></div>
         <textarea placeholder="博客内容" name="content" style="display: none" >
                    [TOC]
 #### Disabled options

 -TeX   (Based on KaTeX);
 -Emoji;
 -Task Lists;
 -HTML tags decode;
 -Flowchart and Sequence Diagram;
                </textarea>
      </div>

style=z-index:1 表示在Markdown插件全屏的时候界面在最上面的一层

初始`Markdown` js脚本

   <script>
        //markdown编辑器初始化
        let contentEditor;
        $(function (){
            //这里的"md-content" 就是textacre的名字 
            contentEditor = editormd("md-content",{
                width : "100%",
                height : 640,
                syncScrolling: "single",
                // 第二个lib前面的路径是该文件的绝对路径
                path : "../Static/lib/editor_markdown/lib/"
            });
        });
</script>