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

With Order @!147

已于 2023-11-11 16:58:46 修改

阅读量474

点赞数 1

分类专栏： Web前端文章标签：前端 html css javascript markdown editor

于 2023-11-11 16:54:58 首次发布

本文链接：https://blog.csdn.net/qq_62414152/article/details/134236325

版权

Web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

小王学习录

今日摘录
前言
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>

如果想要对这个页面进一步进行修饰渲染，还需要结合一些html和css代码，这里就不继续往下写了。

With Order @!147

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端通过导入editor.md库实现markdown功能

下载editor.md到本地将本地editor导入到前端代码中编写少量代码对其进行初始化但是还需要注意的一点是，editor.md要依赖于jquery。jquery是一个被广泛运用于前端的库，我们需要先将jquery下载到本地。这样就实现了一个简易的markdown功能了。--这里用id是为了与markdown编辑器对接--> < script > var editor = editormd("editor" , {
复制链接

扫一扫