实现一个markdown编辑器

前端每日三省

1033人浏览 · 2023-06-28 09:38:18

前端每日三省 · 2023-06-28 09:38:18 发布

`95. 实现一个markdown编辑器`

一、先来看一下markdown的通用格式

主标题
===
副标题
---
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
# 标题

## 一级标题
### 二级标题
#### 三级标题
##### 四级标题
###### 五级标题

# 段落和换行

这是一个段落。

这是另一个段落。

这是另一个段落。

# 格式

**加粗文本**
*斜体文本*
~~删除线文本~~

# 引用

> 引用的内容

# 列表

有序列表：
1. 项目一
2. 项目二
3. 项目三

无序列表：
- 项目一
- 项目二
- 项目三

# 链接和图片

[链接文本](链接地址)
![图片描述](图片地址)

# 代码块

使用 ```或 ~~~ 包裹代码块：

\```
function hello() {
  console.log("Hello, world!");
}
\```
~~~
function hello() {
  console.log("Hello, world!");
}
~~~

主标题

副标题

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

段落和换行

这是一个段落。

这是另一个段落。

格式

加粗文本
斜体文本
~~删除线文本~~

引用

引用的内容

列表

有序列表：

项目一
项目二
项目三

无序列表：

项目一
项目二
项目三

链接和图片

链接文本

链接图片

代码块

使用 ```或 ~~~ 包裹代码块：

function hello() {
  console.log("Hello, world!");
}

function hello() {
  console.log("Hello, world!");
}

二、简单实现

<!DOCTYPE html>
<html>
<head>
  <title>Markdown Editor</title>
  <style>
    #editor {
      width: 100%;
      height: 300px;
    }
    
    #preview {
      width: 100%;
      height: 300px;
      border: 1px solid #ccc;
      padding: 10px;
    }
  </style>
</head>
<body>
  <textarea id="editor" placeholder="在此输入Markdown文本"></textarea>
  <div id="preview"></div>

  <script src="https://cdn.jsdelivr.net/npm/marked@3.0.7/marked.min.js"></script>
  <script>
    const editor = document.getElementById('editor');
    const preview = document.getElementById('preview');

    editor.addEventListener('input', function() {
      const markdownText = editor.value;
      const html = marked(markdownText);
      preview.innerHTML = html;
    });
  </script>
</body>
</html>

在上面的示例中，我们创建了一个具有编辑区域（<textarea>）和预览区域（<div>）的简单Markdown编辑器。我们使用了 marked.js 库来解析Markdown文本并将其转换为HTML。每当用户在编辑区域输入内容时，input 事件被触发，JavaScript代码将获取编辑区域的值，将其解析为HTML，并将HTML内容显示在预览区域中。

demo

这只是一个简单的示例，可以根据需要进行扩展和改进。您可以根据自己的需求添加更多的编辑功能、样式和主题，并扩展其他Markdown语法支持。

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

小参数・大码力・易部署 | Qwen3.6-27B上线魔乐社区，基于昇腾的部署教程来了

继一周前模型开源发布后，千问再度开源Qwen3.6-27B —— 一个拥有270亿参数的稠密多模态模型，也是社区呼声最高的模型规格。Qwen3.6-27B 依然支持多模态思考与非思考模式，在智能体编程方面达到了旗舰级表现，全面超越前代开源旗舰 Qwen3.5-397B-A17B（总参数397B / 激活参数17B的MoE模型）。作为稠密架构，它无需MoE路由即可部署，是开发者在实用、可广泛部署规模