项目中有很多时候输入框是需要支持粘贴图片的，这时候使用textarea输入框就满足不了需求了，就需要把输入框改成富文本输入框，即使用div标签，并且给标签设置contenteditable属性。
<div class="form-control"
placeholder="填写优化的要求和目标（不少于5个字），支持粘贴图片"
contenteditable>
</div>
要实现placeholder的效果，即输入框中没有内容的时候显示提示，用户输入内容后提示就消失。
介绍一个伪元素，是css3新增加的伪类元素
:empty
:empty用来选中没有子节点的元素，这里的子节点包括元素节点和文本节点（包括空格），注释、处理指令和通过css设置的content属性不会影响:empty判断是否为空。
在HTML中，处理指令是一种特殊的标记或注释，用于向浏览器提供关于如何解析、渲染或执行HTML文档的特定指示。以下是常见的处理指令：
<!DOCTYPE>：该指令定义了文档的类型，帮助浏览器正确解析和渲染页面。
<!-- -->：这是HTML中的注释标记，在此处编写的内容不会被浏览器呈现给用户，只是作为开发者的备注信息。
<?xml?>：这是XML声明指令，用于指定XML文档的版本和编码方式。
<?php ?>：这是PHP的处理指令，用于嵌入服务器端的PHP代码到HTML文档中，实现动态内容生成。
<% %>：这是ASP和JSP等服务器端脚本语言的处理指令标记，类似于<?php ?>，用于嵌入相应的脚本代码。
请注意，除了注释之外，大部分处理指令都是与服务器端交互相关的，并且需要服务器端进行相应的处理才能生效。
我们可以通过:empty伪元素设置富文本框没有内容时的样式，但是需要注意，div的起始标签和结束标签之间不能有换行和空格，因为空格和换行也会被当做有子节点。
<style>
div.form-control:empty:before{
content: attr(placeholder);
color:#bbb;
}
</style>
<div class="form-control="
placeholder="填写优化的要求和目标（不少于5个字），支持粘贴图片"
contenteditable></div>
初始展示：
输入文本：
