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

Question

我有这个div：

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

我用这个 css 将其风格化为文本区域：

.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>