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

news2025/3/16 21:55:12

小王学习录

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

今日摘录

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

前言

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

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

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

jquery下载

    1. 在浏览器中搜索cdn jquery

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

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

  1. 首先在html代码的body中加入如下代码
      <div id="editor">
          <!--这里用id是为了与markdown编辑器对接-->
          
      </div>
  1. 然后在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代码,这里就不继续往下写了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1197058.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【分布式】tensorflow 1 分布式代码实战与说明;单个节点上运行 2 个分布式worker工作线程

tensorflow.python.framework.errors_impl.UnknowError: Could not start gRPC server 1. tf分布式 一台电脑服务器server是一个节点&#xff0c;包含了多个GPU。首先分布式的方式就是让多台电脑上的gpu共同干活。 分布式工作分为两个部分&#xff0c;parameter server&#…

Practice01-Qt6.0设置文本颜色、格式等。

Qt6.0学习&#xff0c;在此做个记录&#xff0c;方便日后查找复习 本次项目用到的控件有&#xff1a;复选框&#xff0c;单选按钮。文本编辑框。 项目目录结构&#xff1a; 项目运行效果图&#xff1a; 实现的功能&#xff1a; 勾选Underline、Italic&#xff0c;Bold时&…

BUUCTF——刮开有奖

打开程序&#xff1a; 就一个这个玩意儿&#xff0c;没有输入框&#xff0c;没有啥的&#xff0c;打开IDA反编译一下&#xff1a; 直接找到WinMain&#xff0c;发现里面只有一个对话框API&#xff08;如果只有一个对话框&#xff0c;那真就没有输入框了&#xff09;&#xff0…

人工智能基础——Python:Matplotlib与绘图设计

人工智能的学习之路非常漫长&#xff0c;不少人因为学习路线不对或者学习内容不够专业而举步难行。不过别担心&#xff0c;我为大家整理了一份600多G的学习资源&#xff0c;基本上涵盖了人工智能学习的所有内容。点击下方链接,0元进群领取学习资源,让你的学习之路更加顺畅!记得…

Android---屏幕适配的处理技巧

在几年前&#xff0c;屏幕适配一直是困扰 Android 开发工程师的一大问题。但是随着近几年各种屏幕适配方案的诞生&#xff0c;以及谷歌各种适配控件的推出&#xff0c;屏幕适配也显得越来越容易。下面&#xff0c;我们就来总结一下关于屏幕适配的那些技巧。 ConstraintLayout …

【数据结构】二叉树经典例题---<你真的掌握二叉树了吗?>(第一弹)

一、已知一颗二叉树如下图&#xff0c;试求&#xff1a; (1)该二叉树前序、中序和后序遍历的结果。 (2)该二叉树是否为满二叉树&#xff1f;是否为完全二叉树&#xff1f; (3)将它转换成对应的树或森林。 (4)这颗二叉树的深度为多少? (5)试对该二叉树进行前序线索化。 (6)试对…

向量的点积和外积

参考&#xff1a;https://www.cnblogs.com/gxcdream/p/7597865.html 一、向量的内积&#xff08;点乘&#xff09; 定义&#xff1a; 两个向量a与b的内积为 ab |a||b|cos∠(a, b)&#xff0c;特别地&#xff0c;0a a0 0&#xff1b;若a&#xff0c;b是非零向量&#xff0c;…

Shopee收款账户怎么设置?shopee收款方式选哪种

Shopee作为一家领先的电子商务平台&#xff0c;为卖家提供了多种收款方式。无论是在线支付、虚拟账户余额还是线下支付&#xff0c;卖家可以根据自己的需求和交易情况来进行选择。然而&#xff0c;在选择收款方式时&#xff0c;安全性、便捷性和市场适应性是需要考虑虾皮Shopee…

【Git】Git的GUI图形化工具ssh协议IDEA集成Git

一、GIT的GUI图形化工具 1、介绍 Git自带的GUI工具&#xff0c;主界面中各个按钮的意思基本与界面文字一致&#xff0c;与git的命令差别不大。在了解自己所做的操作情况下&#xff0c;各个功能点开看下就知道是怎么操作的。即使不了解&#xff0c;只要不做push操作&#xff0c;…

【数据结构】顺序表 | 详细讲解

在计算机中主要有两种基本的存储结构用于存放线性表&#xff1a;顺序存储结构和链式存储结构。本篇文章介绍采用顺序存储的结构实现线性表的存储。 顺序存储定义 线性表的顺序存储结构&#xff0c;指的是一段地址连续的存储单元依次存储链性表的数据元素。 线性表的&#xf…

Activiti BPMN visualizer Using Of Idear

Launch 安装插件 创建文件 可视化创建按钮 设置条件,是在线上设置的

【C++破局】C++内存管理之new与deleted剖析

​作者主页 &#x1f4da;lovewold少个r博客主页 ⚠️本文重点&#xff1a;c内存管理部分知识点梳理 &#x1f449;【C-C入门系列专栏】&#xff1a;博客文章专栏传送门 &#x1f604;每日一言&#xff1a;花有重开日&#xff0c;人无再少年&#xff01; 目录 C/C的内存分配机…

Vue中的常用指令v-html / v-show / v-if / v-else / v-on / v-bind / v-for / v-model

前言 持续学习总结输出中&#xff0c;Vue中的常用指令v-html / v-show / v-if / v-else / v-on / v-bind / v-for / v-model 概念&#xff1a;指令&#xff08;Directives&#xff09;是Vue提供的带有 v- 前缀 的特殊标签属性。可以提高操作 DOM 的效率。 vue 中的指令按照不…

Java Web——HTTP协议

目录 1. HTTP协议概述 1.1. HTTP数据传输格式 1.2. HTTP协议特点 2. HTTP 1.0和HTTP 1.1 3. HTTP请求协议 3.1. GET方式请求协议 3.2. POST方式请求协议 3.3. GET请求和POST请求的区别 4. HTTP相应协议 4.1. 响应状态码 如果两个国家进行会晤需要遵守一定的礼节。所以…

WMS配送中心主要业务流程

业务流程图 入库 波次出库 按门店和门店所属送货路线确定出库波次 入库 出库 移库、封仓 门店欠货能要点 1. 日常补货&#xff1a;分拣仓位商品小于当前商品在该位置的补货下限的时候&#xff1b;生成对此进行补货任务&#xff1b;补货完成后确认任务&#xff0c;系统变更库存…

win10使用mingw安装OpenCV4.8

1. cmake安装 下载链接如下https://github.com/Kitware/CMake/releases/download/v3.27.7/cmake-3.27.7-windows-x86_64.zip 解压后放到指定目录后&#xff0c;添加bin目录到环境变量即可。 2. mingw安装 下载链接如下(下图的x86_64-posix-sjlj)&#xff1a; Download x86_…

DevChat:提升编程效率的AI编程助手

一、前言 1、当前开发的痛点&#x1f616; 在软件开发过程中&#xff0c;开发者经常需要编写复杂的代码&#xff0c;如数据结构、算法、网络通信等&#xff0c;这些都需要耗费大量的时间和精力。同时&#xff0c;不同的编程语言和框架也会给开发者带来许多不便&#xff0c;例如…

Hadoop入门——数据分析基本步骤

文章目录 1.概述2.分析步骤2.1第一步 明确分析目的和思路2.2第二步 数据收集2.3第三步 数据处理2.4第四步 数据分析2.5第五步 数据展现2.6第六步 报告撰写 3.总结 1.概述 2.分析步骤 2.1第一步 明确分析目的和思路 2.2第二步 数据收集 2.3第三步 数据处理 2.4第四步 数据分析 …

C语言每日一题(28) 反转链表

牛客网 BM1 反转链表 题目描述 描述 给定一个单链表的头结点pHead(该头节点是有值的&#xff0c;比如在下图&#xff0c;它的val是1)&#xff0c;长度为n&#xff0c;反转该链表后&#xff0c;返回新链表的表头。 数据范围&#xff1a; 0≤n≤1000 要求&#xff1a;空间复…

数据分析实战 | SVM算法——病例自动诊断分析

目录 一、数据分析及对象 二、目的及分析任务 三、方法及工具 四、数据读入 五、数据理解 六、数据准备 七、模型训练 八、模型应用及评价 一、数据分析及对象 CSV文件——“bc_data.csv” 数据集链接&#xff1a;https://download.csdn.net/download/m0_70452407/88…