页面插件集成-Markdown
- 下载MarkDown的插件包
- 引入css、js、Jquary文件
- 定义一个textarea区域作为MarkDown的载体
- 初始化Markdown编辑器
- 最终效果
下载MarkDown的插件包
下载地址如下:
下载传送门
点击Github下载,然后解压
解压之后将如下文件夹和 js 文件copy到自己建立的lib/editormd文件夹之下
copy之后如下图所示
引入css、js、Jquary文件
<link rel&#61;"stylesheet" href&#61;"../static/lib/editormd/css/editormd.min.css">
<script src&#61;"../static/lib/editormd/editormd.min.js">script>
<script src&#61;"https://cdn.jsdelivr.net/npm/jquery&#64;3.2/dist/jquery.min.js">script>
定义一个textarea区域作为MarkDown的载体
<div class&#61;"field">
<div id&#61;"md-content" style&#61;"z-index: 1 !important;">
<textarea placeholder&#61;"博客内容" content&#61;"content" style&#61;"display: none">
[TOC]
#### Disabled options
- TeX (Based on KaTeX);
- Emoji;
- Task lists;
- HTML tags decode;
- Flowchart and Sequence Diagram;
textarea>
div>
div>
style&#61;z-index:1 表示在Markdown插件全屏的时候 界面在最上面的一层
初始化Markdown编辑器
<script>
var contentEditor;
$(function() {
contentEditor &#61; editormd("md-content", {
width : "100%",
height : 640,
syncScrolling : "single",
path : "../static/lib/editormd/lib/"
});
});
</script>
注意&#xff1a;path的路径特别容易出错&#xff0c;一定要注意是该文件的绝对路径&#xff0c;并且要以 / 结尾
最终效果