页面插件集成-Markdown

<a href="#MarkDown_1">下载MarkDown的插件包</a> <a href="#cssjsjquary_13">引入css、js、jquary文件</a> <a href="#textareaMarkDown_21">定义一个textarea区域作为MarkDown的载体</a> <a href="#Markdown_43">初始化Markdown编辑器</a> <a href="#_72">最终效果</a>

下载MarkDown的插件包

下载地址如下： <a href="https://pandao.github.io/editor.md/">下载传送门</a>

点击Github下载，然后解压

解压之后将如下文件夹和 js 文件copy到自己建立的lib/editormd文件夹之下 copy之后如下图所示

引入css、js、jquary文件

<link rel="stylesheet" href="../static/lib/editormd/css/editormd.min.css">
<script src="../static/lib/editormd/editormd.min.js"></script>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" rel="external nofollow" ></script>

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

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

#### Disabled options

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

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

初始化Markdown编辑器

<script>
      //初始化Markdown编辑器
      var contentEditor;
      $(function() {
         contentEditor = editormd("md-content", {
            width   : "100%",
            height  : 640,
            syncScrolling : "single",
            path   : "../static/lib/editormd/lib/"
         });

         /*
         // or
         testEditor = editormd({
            id     : "test-editormd",
            width   : "90%",
            height  : 640,
            path   : "../lib/"
         });
         */
      });
</script>

注意：path的路径特别容易出错，一定要注意是该文件的绝对路径，并且要以 / 结尾

最终效果

原文地址：https://blog.csdn.net/liupang14159/article/details/128564579?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168915728416782427453094%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=168915728416782427453094&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-19-128564579-null-null.142^v88^control_2,239^v2^insert_chatgpt&utm_term=markdown