集成md插件

最新推荐文章于 2025-03-14 02:55:29 发布

愚懦

最新推荐文章于 2025-03-14 02:55:29 发布

阅读量491

点赞数

分类专栏：前端插件文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/weixin_45625874/article/details/121000540

版权

前端插件专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何集成和使用Markdown编辑器Editor.md。首先，通过提供链接下载并找到simple.html示例。接着，展示了集成编辑器所需引用的CSS和JS文件，以及JavaScript代码示例，说明了div的id用于JavaScript绑定。在遇到全屏显示问题时，可以通过添加CSS样式解决前端按钮覆盖问题。总结了使用步骤，包括引用资源、设置div和调整path。

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

首先找一个markdown插件

这里找的是

https://pandao.github.io/editor.md/

下载zip后找到simple.html

文件路径
editor.md-master\examples\simple.html

来看看这插件如何集成如何使用

1.首先点开html文件
在这里插入图片描述

这是集成后的成果图

2.查看示例源码

首先查看一下需要引用那些文件
在这里插入图片描述
需要引用这两个CSS文件
滑到底部查看是否还有引用

发现还需要引用两个js文件

再查看内容
只需要如下代码即可

<div id="test-editormd">
                <textarea style="display:none;">
				</textarea>
</div>

div的id则是为了使用JavaScript绑定div
函数中path需要根据使用者的文件目录改变，其余的也可以相应改变

var testEditor;

            $(function() {
                testEditor = editormd("test-editormd", {
                    width   : "90%",
                    height  : 640,
                    syncScrolling : "single",
                    path    : "../lib/"
                });
             
            });

总结——

所以说，使用这个插件只需要

①复制CSS和JS的引用链接，顺便复制JavaScript函数
②写好一个div包裹住texterea，为div命名好唯一id绑定函数
③修改path

question

在使用过程中发现，如果使用md全屏，前端中的按钮不会被覆盖
此时需要在div中添加如下的css样式

<div id="md-content" style="z-index: 1 !important;">
							<textarea rows="" cols="" placeholder="内容" name="content"></textarea>
						</div>