【最简单的例子】Editor.md的初步使用

最新推荐文章于 2025-02-21 11:11:25 发布

夏2同学

最新推荐文章于 2025-02-21 11:11:25 发布

阅读量524

点赞数

分类专栏： Web前端技巧文章标签： jquery md

本文链接：https://blog.youkuaiyun.com/xia_yanbing/article/details/116770030

版权

Web前端技巧专栏收录该内容

9 篇文章

订阅专栏

该博客演示了如何利用Editor.md快速搭建一个Markdown编辑器。内容包括导入必要的文件，如jQuery和Editor.md库，并配置编辑器的宽度、高度等属性。运行代码后，可以实现一个基本的Markdown编辑环境，适用于前端开发人员进行文本编辑。

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

前言

这个Demo的文件，我帮大家准备了。直接下载就可以了。

蓝奏云 ： https://jww.lanzoui.com/iKV13p3qqwh
csdn下载: https://download.youkuaiyun.com/download/xia_yanbing/18678396

运行效果如下：
在这里插入图片描述

1. 导入所需文件

在这里插入图片描述
其实就这三个包。

2. 编写下面的代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      html,
      body {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <link rel="stylesheet" href="editormd/css/editormd.css" />
    <div id="editor">
      <textarea style="display: none;">
### 关于 Editor.md
**Editor.md** 是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。
      </textarea>
    </div>
    <script src="jquery.min.js"></script>
    <script src="editormd/editormd.min.js"></script>
    <script type="text/javascript">
      $(function () {
        var editor = editormd('editor', {
          width: '99%',
          height: '98%',
          path: 'editormd/lib/',
        })
      })()
    </script>
  </body>
</html>