day1：富文本原生实现在实际工作中，需要开发富文本进行文档内容的保存，我们可以利用第三方库，也可以自己使用原生html

在实际工作中，需要开发富文本进行文档内容的保存，我们可以利用第三方库，也可以自己使用原生html和js实现，下面使用原生html和js一个简易的富文本编辑器话不多说，直接上代码：

html部分：

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <div class="opr-container">
    <button onclick="exexCmd('bold')">加粗</button>
    <button onclick="exexCmd('Italic')">倾斜</button>
    <input type="color" onchange="setColor()">
    <button onclick="exexCmd('Underline')">下划线</button>
    <button onclick="getRichText()">获取富文本内容</button>
  </div>
  <div class="container" contenteditable="true" onchange="onChangeRichText()"></div>
  <script>
    function exexCmd(cmd) {
      document.execCommand(cmd, false, true)
    }
    function setColor() {
      const val = event.target.value;
      document.execCommand('foreColor', 'false', val);
    }
    function getRichText() {
      const ele = document.querySelector('.container');
      const data = ele.innerHTML;
      // 打印富文本内容
      console.log(data)
      return data;
    }
  </script>
</body>

</html>

css部分：

.opr-container {
    padding: 5px;
    display: flex;
    border: 1px solid #ccc;
    border-bottom: none;
}
.container {
    height: 500px;
    border: 1px solid #ccc;
    border-radius: 2px;
    outline: none;
}
input, button {
    margin: 0 5px 0 0;
    cursor: pointer;
    outline: none;
    border: none;
    border-radius:2px
}