在contenteditable中模拟拖动类型文本/普通行为

Question

如果你拖动，例如text / plain或text / html，您要删除的contenteditable元素将插入符/光标放在您放置拖动内容的位置。

显示我的意思的一个非常基本的小提琴：example

<div contenteditable="true">DROP TEXT HERE</div>
This text wants to be dropped.

如何针对自定义数据类型模拟此行为？或者：如何在悬停时始终将插入符号放在鼠标指针旁边？

Answer 1

你可以使用CSS：那个

的空伪选择器

[contenteditable="true"] {
    border: 2px solid #ccc;
    min-height: 1em;
}
[contenteditable="true"]:empty:before {
    content: 'DROP TEXT HERE';
    color: #999;
}

example