Javascript 如何使textarea元素看起来像普通文本

我正在尝试创建一个html列表，用户可以在其中编辑页面上显示的项目，并使用文字处理应用程序中的标准键和习惯用法浏览这些项目。有点像

我通过给每个列表项一个textarea来实现这一点。最初，文本编辑器的样式会将其隐藏，但如果列表项类设置为“编辑器”，则会显示文本区域，而列表文本不会显示。举例

如果您转到该示例，您会注意到，当您单击列表项时，它看起来就像您期望的那样（在本示例中，您只能通过单击项来导航，而不能使用箭头键）。唯一真正的问题是文本框比文本行高，因此当文本框显示列表项时，列表项会变得更高。我想不出如何消除这种影响

---

干杯

以防您不想重新发明轮子，请检查一下，或者哪一个轮子正是这样做的。两者都是HTML5编辑器。

你有没有可能改用它

---

这看起来很好，我可能最终会使用它，但我仍然想知道如何使用textarea大小解决这个问题，主要是想知道如果在另一个场景中出现问题，如何解决它。@Alexjg-好的，更新我的答案

<li contenteditable>
  <h2>Item text</h2>
</li>

h2, ul li textarea {
    font-size: 16px; 
    font-family: arial; 
    height: 19px;
}

ul li textarea {
    display: none;
    /*border: 1px solid gray;*/
    outline: 1;
    border: 0;
    resize:none;
    overflow: hidden;
}

ul li.editor textarea {
    display: block;
}
ul li.editor h2{
    display:none;
}