可编辑元素中插入按钮contenteditable user-select:none

需求

1. 可以进行文本输入
2. 可以动态插入按钮
3. 插入按钮之后可以继续输入

分析

1. 因为input、textarea这些元素是纯文本的，所以想要插入按钮，就只能用其他的元素例如div这些

解决

1. contentEditable：
   1. 先来认识一下这个属性，内容可编辑设置
   2. true：内容可编辑
   3. false：默认，内容不可编辑
2. 代码：

<div contentEditable="true">
  xxxx
  <button contentEditable={false}>xxxx</button>
  xxxx
</div>

3. 插入之后的结构大概长这样就可以了，插入的方法无论是原生的appendChild或者是react的动态生成等都是可以的

新问题：光标

1. 在button元素动态插入之后，我发现光标开始不正常了
2. 问题视频

解决

1. 找了一圈发现把antd的Button放进去是可以的，对比了一下，发现我这边的button少了一个css属性：user-select
2. user-select：用户是可以可选择
3. 猜测一番是如果用户对按钮可选择，点击button后面的时候，捕获到button身上了，并且button是可选择不可编辑的，所以光标就出不来了
4. 代码：

button {
  user-select: none;
}

5. 成果视频：