Как сделать контентным только списки?

Question

Я пытаюсь создать контентный редактор, в котором все будет списком. Однако, если я просто укажу ul тег contenteditable = "true", верхний элемент списка можно будет удалить. Как мне сделать так, чтобы каждая новая строка была списком, а верхнюю строку li нельзя было удалить. Спасибо

Вот что у меня:

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

Answer 1

Самый тривиальный способ решить вашу проблему - это вставить пустой нередактируемый <span> в первый <li> элемент.

Это тоже не совсем надежно, но защитит первый <li> элемент против большинства попыток редактирования.

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