html - 可编辑内容——焦点和点击问题

Question

我有一个可编辑的内容 div，用户可以向其中添加元素。用户有一个带有所有可用标签的侧边菜单，可以通过单击每个标签来添加这些标签。也可以在每个标签之前/之后输入文本。

每个标签元素都有contenteditable="false"，例如:

.keyword-item {
  background-color: #EEFDE5;
  font-weight: bold;
  border-radius: 20px;
  border: unset;
  cursor: pointer; 
  margin: 0 0.25rem 0 0.25rem;
}

img {
  padding-left: 2%;
}

span {
  padding-right: 2%;
}

<div contenteditable="true" id="expression-textarea">
  <label class="keyword-item" contenteditable="false">
    <input type="hidden" value="1">
        <img src="https://img.icons8.com/small/16/000000/download-2.png"/>
        <span>bla</span>
    </label>
  <label class="keyword-item" contenteditable="false">
    <input type="hidden" value="2">
        <img src="https://img.icons8.com/small/16/000000/download-2.png"/>
        <span>bla bla 2</span>
    </label>
  <label class="keyword-item" contenteditable="false">
        <input type="hidden" value="18">
        <img src="https://img.icons8.com/small/16/000000/download-2.png"/>
        <span>bla2</span>
     </label>
</div>

这有两个问题(至少对于 Chrome):

1. 当我使用键盘箭头浏览这些元素时，效果很好。但是，鼠标导航有点奇怪；似乎不可能将光标放在第二个和第三个图标之间。
2. 第一个元素只能通过聚焦在它前面并按 DEL 键来删除，它不会通过聚焦在它后面并按退格键来删除。

提前致谢

Answer 1

您可以使用 flex 完成您正在寻找的内容:

#expression-textarea {
  padding-left: 2px;
  display: flex;
}

.keyword-item {
  background-color: #EEFDE5;
  font-weight: bold;
  border-radius: 20px;
  border: unset;
  cursor: pointer; 
  margin: 0 0.25rem 0 0.25rem;
  white-space: nowrap;
}

img {
  padding-left: 2%;
}

span {
  padding-right: 2%;
}

<div contenteditable="true" id="expression-textarea">
  <span></span>
  <div class="keyword-item" contenteditable="false">
    <img src="https://img.icons8.com/small/16/000000/download-2.png"/>
    bla
  </div>
  <span></span>
  <div class="keyword-item" contenteditable="false">
    <img src="https://img.icons8.com/small/16/000000/download-2.png"/>
      bla bla 2
  </div>
  <span></span>
  <div class="keyword-item" contenteditable="false">
    <img src="https://img.icons8.com/small/16/000000/download-2.png"/>
    bla2
  </div>
  <span></span>
</div>

我还修改了一些标记 - 删除了 input，使用 div 代替了 label，等等。

使用上面的代码，使用箭头和鼠标进行导航的效果与您预期的一样。

左侧包装 div 的填充是为了让您可以在 div 的开头看到光标。