Re:从零开始的markdown编辑器-1-同步输入

2025年01月21日 1.2k 字大概 6 分钟

1. 同步输入

效果展示

知识补充

flex

事件监听器 (`addEventListener`)

作用:

向指定元素添加事件监听器

基本语法

1	`element.addEventListener(event, function, useCapture);`

参数解释
- element: 添加事件监听器的 DOM 元素
- event: 监听的事件类型, 如 "click"、"mouseover"、"keydown"
- function: 当事件发生时调用的函数
- useCapture (可选): 布尔值, 指定事件是否在捕获或冒泡阶段执行, 遇到例子时再解释

GetelementBy

箭头函数

作用

更简洁的函数语法
基本语法

箭头函数用 => 定义函数体
1
2
3
const func = (param) => { // 函数体 }
- 只有一个参数的时候可省略括号
- 函数体只有一条语句且直接返回时可省略大括号和 return

实现思路

1. HTML

需要输入区和输出区用两个 div表示

输入区

1
2
3

<div class="input">
    <textarea id="input"></textarea>
</div>

输出区

1
2
3

<div class="output">
    <div id="output"></div>
</div>

方便布局嵌套在一个 container 中

<div class="container">
    <div class="input">
      <textarea id="input"></textarea>
    </div>
    <div class="output">
      <div id="output"></div>
    </div>
</div>

2. CSS

先整体进行初步的处理

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

我们初步采用左右对照的方式

父元素使用 flex

1
2
3

.container {
    display: flex;
}

子元素设置相同权重, 并添加外边距 margin 进行美化

.input {
    flex: 1;
    margin: 16px;
}
.output {
    flex: 1;
    margin: 16px;
}

3. JS

先通过 Id 定位到输入和输出的部分

1 2	`const input = document.getElementById('input'); const output = document.getElementById('output');`

使用 input 事件监听 textarea 的内容变化, 并同步到输出框的内容

1
2
3

input.addEventListener('input', (event) => {
    output.textContent = input.value;
});

为后续格式的显示, 将 textContent 改为 innerHTML

1
2
3

input.addEventListener('input', (event) => {
    output.innerHTML = input.value;
});

保证页面 DOM 完整加载解析后再进行上述行为

将上述代码嵌套在 DOMContentLoaded 事件的回调函数中

document.addEventListener('DOMContentLoaded', (event) => {
    const input = document.getElementById('input');
    const output = document.getElementById('output');
    // 使用 input 事件监听 textarea 的内容变化
    input.addEventListener('input', (event) => {
        output.innerHTML = input.value;
    });
});

区别体现:

使用 textContent
使用 innerHTML(此处有两个彩蛋哦)

尝试复制分别输入以下内容来观察区别吧

<h1>title</h1>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<p>para</p>

1	`<button onclick="alert('嚯嚯');">点击</button>`

代码展示

项目结构:

index.html
css
- index.css
js
- index.js

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>md</title>
  <link rel="stylesheet" href="./css/index.css">
  <script src="./js/index.js"></script>
</head>

<body>
  <div class="container">
    <div class="input">
      <textarea id="input"></textarea>
    </div>
    <div class="output">
      <span id="output"></span>
    </div>
  </div>
</body>

</html>

index.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
} 

.container {
  display: flex;
}

.input {  
  flex: 1;
  margin: 16px;
}

.output {  
  flex: 1;
  margin: 16px;
}

.input #input {  
  height: 200px;
  width: 100%;
  padding: 10px;
}

.output #output {
  padding: 10px;
}

index.js

document.addEventListener('DOMContentLoaded', (event) => {
    const input2 = document.getElementById('input2');
    const output2 = document.getElementById('output2');
    // 使用 input 事件监听 textarea 的内容变化
    input2.addEventListener('input', (event) => {
        output2.innerHTML = input2.value;
    });
});