Markdown 编辑器 editor.md插件的集成
程序员文章站
2022-07-14 08:52:34
...
https://pandao.github.io/editor.md/ 网站下载压缩包解压
1.首先可以在自己的静态页面新建一个文件夹来放编辑器插件所需的css可以所需的内容我的是放在lib下面的editormd下面,大家可以自己去复制出相应的文件
2.然后再需要打开上面压缩文件中的examples文件(这个是放实例的文件夹)找出simple.html在编辑工具中打开可以在我们的前端界面中仿照着写
下面是我自己仿照的
<link rel="stylesheet" type="text/css" href="static/lib/editormd/css/editormd.min.css"/>
<script src="static/lib/editormd/editormd.min.js"></script>
//这边的引入css 和 js 改为自己所复制的目录
//这边的id需要在下面的js中引用, z-index:1是在编辑器放大的时候显示在最上层不至于被其他控件覆盖
<div id="md-content" style="z-index: 1 !important;">下
<textarea placeholder="博客内容" name="content" style="display:none;">[TOC]
#### Disabled options
- TeX (Based on KaTeX);
- Emoji;
- Task lists;
- HTML tags decode;
- Flowchart and Sequence Diagram;
#### Editor.md directory
editor.md/
lib/
css/
scss/
tests/
fonts/
images/
plugins/
examples/
languages/
editormd.js
...
```html
<!-- English -->
<script src="../dist/js/languages/en.js"></script>
<!-- 繁體中文 -->
<script src="../dist/js/languages/zh-tw.js"></script>```
</textarea>
</div>
<script>
//初始化markdown编辑器
var contentEditor;
$(function() {
testEditor = editormd("md-content", { //这边的md-content就的上面最外面的div的id
width : "100%",
height : 640,
syncScrolling : "single",
path : "static/lib/editormd/lib/" //这里也要引入自己本地的lib
});
});
</script>