javascript - 选择多个内容可编辑的 div

Question

我div在页面上有一个 content-editable 的列表。我无法选择所有divs 的内容。

由于每个div都是可单独编辑的，作为替代方案，在选择和拖动时我想突出显示divs. 像下面这样一个：

.editable {
  height: 30px;
  line-height: 30px;
  padding: 5px;
}

<div>
  <div class="editable" contenteditable="true">Block 1</div>
  <div class="editable" contenteditable="true">Block 2</div>
  <div class="editable" contenteditable="true">Block 3</div>
  <div class="editable" contenteditable="true">Block 4</div>
</div>

请让我知道如何使用 jquery 或 javascript 来实现它。

标签： javascriptjquery

Answer 1

最简单的解决方案是也制作父 div contenteditable：

.editable {
  height: 30px;
  line-height: 30px;
  padding: 5px;
}

<div contenteditable>
  <div class="editable" contenteditable="true">Block 1</div>
  <div class="editable" contenteditable="true">Block 2</div>
  <div class="editable" contenteditable="true">Block 3</div>
  <div class="editable" contenteditable="true">Block 4</div>
</div>