当前位置:   article > 正文

在网页中引入第三方文件MarkDown的步骤(详细)_editor.md 的依赖

editor.md 的依赖

一、具体步骤

1、下载jquery mdn

先在bing搜索中输入jquery mdn

选择下载3.6.3 min版 

 点击,复制链接按钮,在新的搜索框中打开该链接

 得到如下内容:

 引入操作有两种方法

第一种:

将内容全选,复制,在项目目录里新建一个文件夹, 在文件夹底下新建一个文件,名为jquery.min.js,将内容粘贴到该文件中,保存。

 随后在html文件的<head>标签中,用script标签引入该文件

<script src="js/jquery.min.js"></script>

 第二种:

直接把cdn的地址引入script

先点击复制链接按钮

然后直接在html文件的<head>标签中用script标签引入

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

 这种方法有一个问题,可能cdn的网址会变化,此时还要更新网址

2、引入editor.md

要在github上找.

如果github打不开,可以尝试使用免费加速器watt Toolkit(原名steam++)

 在github搜索框中搜索editor.md

 

 点击第一个

点击code,克隆也行,下载也行

 下载完成之后,将该文件拷贝到项目目录中

并且将其重命名为,  editor.md 

 3、引入文件到html文件中

先保证html页面中有一个id为editor的div

  1. <div id="editor">
  2. </div>

 引入editor.md中对应的css和js,

这些代码必须放到jquery引入代码的下方,jquery在<head>标签里

  1. <head>
  2. <meta charset="UTF-8">
  3. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4. <title>博客编辑页</title>
  5. <link rel="stylesheet" href="css/common.css">
  6. <link rel="stylesheet" href="css/blog_edit.css">
  7. <script src="js/jquery.min.js"></script>
  8. <!--引入 editor.md 的依赖-->
  9. <link rel="stylesheet" href="editor.md/css/editormd.min.css"/>
  10. <script src="editor.md/lib/marked.min.js"></script>
  11. <script src="editor.md/lib/prettify.min.js"></script>
  12. <script src="editor.md/editormd.js"></script>
  13. </head>

编写初始化代码

在body标签的最后位置,复制粘贴script标签里的代码

  1. <body>
  2. <script>
  3. var editor = editormd("editor",{
  4. //这里的尺寸必须在这里设置,设置样式会被editormd自动覆盖掉
  5. width:"100%",
  6. //设置编辑器高度
  7. height:"500px",
  8. //编辑器中的初始内容
  9. markdown:"# 在这里写下一篇博客",
  10. //指定editor.md依赖的插件路径
  11. path:"editor.md/lib/"
  12. });
  13. </script>
  14. </body>

 引入成功

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop】
推荐阅读
相关标签
  

闽ICP备14008679号