如何在具有可编辑内容的元素之间标记文本？

Question

我必须这样做，以便用户可以通过单一拖放操作从代码段中选择文本。用javascript可以吗？这两个相同的div具有可编辑的内容，其中包含其他元素。如果它们不可编辑，您可以选择跨元素的文本，但是像这样将它们锁定在该元素中，并且无论css如何都可以使所有文本都可以选择。另外，我不能真正使用不同的CSS来使文本无法选择，因为div需要具有相同的html。唯一的区别可能是div的不可选部分将不可见，因为父级将具有overflow:hidden。

它没有javascript，因为我在网上找不到任何东西来帮助我开始。这个网站不是代码编写服务，所以如果可以做我要问的事情，你至少可以在使用搜索引擎时给我一个短语吗？

.edit-div {
  border: 1px solid;
  margin: 20px;
  width: 400px;
}

<div contenteditable="true" class="edit-div">Lorizzle ipsizzle dolizzle sit amizzle, shizzlin dizzle yippiyo elit. Nullam dizzle velizzle, for sure volutpizzle, suscipit shizzle my nizzle crocodizzle, gravida vizzle, izzle. Pellentesque egizzle tortor. <b>Sizzle eros. yo dolor dapibizzle boom shackalack shiz tempor.</b> <i>Maurizzle pellentesque nibh izzle yo. Gangsta izzle tortor. Pellentesque eleifend rhoncizzle own yo'.</i> In crazy get down get down owned dictumst. Fo shizzle mah nizzle fo rizzle, mah home g-dizzle dapibizzle. Boofron tellizzle urna, pretium eu, mattizzle ac, eleifend vitae, hizzle. Dang suscipizzle. Boofron semper velit fizzle its fo rizzle.</div>
<div contenteditable="true" class="edit-div">Lorizzle ipsizzle dolizzle sit amizzle, shizzlin dizzle yippiyo elit. Nullam dizzle velizzle, for sure volutpizzle, suscipit shizzle my nizzle crocodizzle, gravida vizzle, izzle. Pellentesque egizzle tortor. <b>Sizzle eros. yo dolor dapibizzle boom shackalack shiz tempor.</b> <i>Maurizzle pellentesque nibh izzle yo. Gangsta izzle tortor. Pellentesque eleifend rhoncizzle own yo'.</i> In crazy get down get down owned dictumst. Fo shizzle mah nizzle fo rizzle, mah home g-dizzle dapibizzle. Boofron tellizzle urna, pretium eu, mattizzle ac, eleifend vitae, hizzle. Dang suscipizzle. Boofron semper velit fizzle its fo rizzle.</div>