contenteditable——html5新增的一个允许用户直接在页面中编辑文本内容的属性

contenteditable 是 HTML5 为所有元素提供的一个新属性，它允许用户直接在页面上编辑文本内容。

解决方案：

1. 使用 contenteditable 属性

<div contenteditable="true">这是一个可编辑的div元素</div>

2. 使用 JavaScript 来动态切换 contenteditable 属性

<div id="editable" style="background-color: #e0e0e0;">这是一个可编辑的div元素</div>
<button onclick="makeEditable()">编辑</button>
<button onclick="makeUneditable()">保存</button>
 
<script>
function makeEditable() {
    document.getElementById('editable').contentEditable = true;
}
 
function makeUneditable() {
    document.getElementById('editable').contentEditable = false;
}
</script>

3. 使用 CSS 来设置可编辑区域的样式

<div id="editable" style="background-color: #e0e0e0; border: 1px solid #ccc;">这是一个可编辑的div元素</div>
<button onclick="document.getElementById('editable').focus();">点击进入编辑模式</button>
 
<style>
    #editable:empty:before {
        content: "双击这里开始编辑";
        color: #ccc;
    }
</style>

注意：在使用 contenteditable 属性时，需要考虑兼容性问题，因为并不是所有的浏览器都支持这个属性。