使 DIV 风格化为 textarea 并包含可编辑的格式化文本

Question

我有这个 div：

<div class="textarea"></div>

我用这个 css 将其风格化为 textarea：

.textarea {
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    border: 1px solid gray;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    height: 28px;
    overflow: auto;
    padding: 2px;
    resize: both;
    width: 100%;
}

现在，如果我在这个 div 中添加一些 html 代码，甚至光标也不显示在那里。 我可以使这个 div 可编辑吗？

Answer 1

只需将contentEditable属性更改为 true，即可排序

 .textarea { -moz-appearance: textfield-multiline; -webkit-appearance: textarea; border: 1px solid gray; font: medium -moz-fixed; font: -webkit-small-control; height: 28px; overflow: auto; padding: 2px; resize: both; width: 100%; }

 <div class="textarea" contentEditable="true"></div>