页面插件集成-Markdown

下载MarkDown的插件包 引入css、js、jquary文件 定义一个textarea区域作为MarkDown的载体 初始化Markdown编辑器 最终效果

下载MarkDown的插件包

下载地址如下：
下载传送门

点击Github下载，然后解压

在这里插入图片描述
解压之后将如下文件夹和 js 文件copy到自己建立的lib/editormd文件夹之下
在这里插入图片描述
在这里插入图片描述
copy之后如下图所示
在这里插入图片描述

引入css、js、jquary文件

text
1 2 3 4 
<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的载体

text
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 
<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编辑器

text
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 
<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