Question

我正在尝试创建一个html列表，用户可以在页面上编辑项目，并使用文字处理应用程序中的标准键和惯用语来浏览它们。有点像http://www.workflowy.com

的东西

我通过为每个列表项提供textarea来实现这一点。最初，文本编辑器的样式隐藏它，但如果列表项类设置为“editor”，则显示textarea而列表文本不显示。 http://jsfiddle.net/WWkWc/13/

上的示例

如果您转到该示例，您会注意到当您单击列表项时，它看起来大多与您期望的一样（在此示例中，您只能通过单击项目而不是使用箭头键来导航）。唯一真正的问题是文本框比文本行高，所以当文本框显示时，列表项变得更高。我无法弄清楚如何摆脱这种影响。

干杯

Answer 1

您是否有机会使用contenteditable？

http://jsfiddle.net/WWkWc/16/

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

更多例子：

http://html5demos.com/contenteditable

如果您不想使用可编辑的内容，那么诀窍是让h2元素和textarea元素具有完全相同的属性。在这种情况下，我给他们相同的，font-size，font-family和height。我还将textarea设置为block，因为h2是块级元素。最后我设置溢出：隐藏以防止滚动箭头。我也简化了你的javascript。

http://jsfiddle.net/HM5V5/1/

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;
}

Answer 2

如果您不想重新发明轮子，请查看http://aloha-editor.org/或http://jejacks0n.github.com/mercury/。两者都是HTML5编辑器。

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

2 个答案: