效果图：
使div可被编辑 ```html ``` 可编辑的div被选中后有一个黑框，是因为开启默认编辑后，当选中的时候，会给div一个outline。清除掉就没有那个黑框框了。
比较完整的实现代码：
#article-box {
border: solid rgb(225,225,230) 1px;
border-radius: 8px;
height: 300px;
background-color: #f3f2f2;
padding: 10px 15px;
font-size: 16px;
overflow: auto;
color: gray;
}
/* 为输入内容时，显示提示内容 */
#article-box:empty:before{
content: "在这里输入文本，将会根据输入的文本产生词云~~";
color: gray;
}
/* 获取焦点时，清除内容 */
#article-box:focus:before {
content: none;
}
/* 输入框获取焦点时，清除默认黑框，并且给阴影 */
#article-box:focus {
outline: none; /* 有黑框是因为默认给了轮廓 */
box-shadow: 0 0 2px blue inset;
}
<body>
<div id="article-box" contenteditable="true"></div>
</body>
感谢网上的分享！感谢被查阅到的文章！希望能帮到你！
650
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
