Markdown 编辑器 editor.md插件的集成

最新推荐文章于 2025-04-07 14:33:56 发布

照亮一纸寂寞

最新推荐文章于 2025-04-07 14:33:56 发布

阅读量1k

点赞数

文章标签： html javascript

本文链接：https://blog.youkuaiyun.com/booleangjh/article/details/103909482

版权

本文介绍了如何集成Markdown编辑器editor.md。首先从官方网站下载压缩包，并解压到项目中的lib/editormd文件夹。接着，参考examples中的simple.html，在前端界面创建相似的集成实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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
&lt;!-- English --&gt;
&lt;script src="../dist/js/languages/en.js"&gt;&lt;/script&gt;

&lt;!-- 繁體中文 --&gt;
&lt;script src="../dist/js/languages/zh-tw.js"&gt;&lt;/script&gt;```
</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>