前端通过导入editor.md库实现markdown功能

news2025/3/16 21:55:12

小王学习录

今日摘录
前言
jquery下载
editor下载
editor和jquery的导入
初始化editor
总结

今日摘录

满招损，谦受益
在这里插入图片描述

前言

要想通过editor.md实现markdown的功能，需要经过如下四步：

下载editor.md到本地
将本地editor导入到前端代码中
编写少量代码对其进行初始化

但是还需要注意的一点是，editor.md要依赖于jquery。jquery是一个被广泛运用于前端的库，我们需要先将jquery下载到本地。以下是详细步骤：

jquery下载

1. 在浏览器中搜索cdn jquery

在这里简单介绍一下cdn，cdn是一个被广泛运用在互联网中的技术

cdn(内容分发网络)技术是通过分布在全国各地的服务器，将网站的内容（如图像、音频、脚本等）缓存到离用户更近的位置，减小网络传输路径，从而提高访问速度。
这些服务器通常是网络运营商提供的。以度娘为例，度娘有很多提供给用户的图像，视频等体积较大的数据。如果只将这些数据保存在百度的服务器中，那么当用户读取这些数据时，会占取大量的io带宽资源，如果用户距离服务器比较远，那么传输过程中经历的中间节点就越多，用户的访问速度就越慢。
网络运营商提供了服务器（这类服务器一般内存大，带宽也更大，而且全国各地都有），度娘就可以将它的数据安放在服务器上，当用户要访问这些数据时，就会从距离它最近的服务器上去获取数据

1. 找到jquery,这里注意不要点到广告里面去。
1. 点击之后进入如下页面中。注意选择jquery.min,js，这个版本是经过代码混淆之后的版本，关于代码混淆下面会介绍。
1. 点击复制链接之后，直接将链接粘贴到浏览器中访问。
– 上面绿框中的代码便是jquery的代码了。我们看起来这么一大坨是因为这是被代码混淆过之后的代码。
– 通过之前对网络编程的学习我们知道当数据越长时，数据传越耗时，js代码也是如此。因此js代码在进行传输时，会经过代码混淆机制。
– 在代码混淆过程中，会去掉代码中的换行，空格等符号。同时将变量名改为简单的字母。从而减小js代码的长度。
– 在这里我们直接将内容全部选中然后复制就好。
1. 然后在代码编辑器中创建文件，将代码粘贴到文件中。这里我用的编辑器是VSCode
1. 到这里我们的jquery就算导入成功了，接下来就要进行editor库的下载和导入了。

editor下载

在editor下载时需要去github官网中进行下载。众所周知想访问github需要一些特殊手段，这里想省事的看官可以直接从百度网盘中进行下载：
注意以下两种下载方式最后都将文件保存在与html文件的同级目录下

链接：https://pan.baidu.com/s/1s1NQcVrJOsv3Ey6j0eFwgw
提取码：2222

在github中下载的看官直接搜索editor即可
在这里插入图片描述
将editor下载并保存在与html文件同级目录下之后，在代码编辑器中会出现一个editor文件。建议看官文件名和我一致editor.md

editor和jquery的导入

首先在html代码的body中加入如下代码

      <div id="editor">
          <!--这里用id是为了与markdown编辑器对接-->
          
      </div>

然后在html代码的head中加入如下代码

    <script src="js/jquery.min.js"></script>
    <link rel="stylesheet" href="editor.md/css/editormd.min.css">
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>

初始化editor

在html代码的body中加入js语句

    <script>
        var editor = editormd("editor", {
            width: "100%",
            height: "500px",
            markdown: "# 在这里写下一篇博客",
            path: "editor.md/lib/"
        });
    </script>

总结

这样就实现了一个简易的markdown功能了。
在这里插入图片描述完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery.min.js"></script>
    <link rel="stylesheet" href="editor.md/css/editormd.min.css">
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>
</head>
<body>
    <div id="editor">
        <!--这里用id是为了与markdown编辑器对接-->
        
    </div>
    <script>
        var editor = editormd("editor", {
            width: "100%",
            height: "500px",
            markdown: "# 在这里写下一篇博客",
            path: "editor.md/lib/"
        });
    </script>
</body>
</html>