如何使只有列表的内容可编辑？

Question

我正在尝试创建一个内容可编辑的编辑器，其中所有内容都是一个列表。但是，如果我简单地给出一个 ul 标签 contenteditable="true"，则可以删除顶部列表项。我该怎么做才能让每一行都是一个列表，并且不能删除第一行 li 。谢谢

这是我得到的：

<ul style="height: 300px;" contenteditable="true">
    <li>Type text here. Try deleting this list item.</li>
</ul>

Answer 1

解决问题最简单的方法是在第一个 <li> 元素中插入一个空的不可编辑的 <span>。

这也不是绝对万无一失的，但会保护第一个 <li> 元素免受大多数编辑尝试。

<ul contenteditable="true">
    <li><span contenteditable="false"></span>Type text here. Try deleting this list item.</li>
    <li>editable!</li>
</ul>

如何使只有列表的内容可编辑？

How to make a contenteditable of only lists?

html

javascript

css

contenteditable