用DIV做文本编辑器

今天的主角是我们大家都非常熟知的元素div，它可以说是前端布局里的核心标签了。 在几年前DIV+CSS是前端工作者所必须掌握的核心能力。但是，今天的这个属性并不是热门属性， contenteditable一个瞬间可以让div化身为富文本输入框的属性。

基本倒腾

这属性真有那么神?

为了验证它真正的实力，我们现在就来用用看。

<div class="t_edit" contenteditable="true"></div>

上面我们只是简简单单的将contenteditable设置为true就把div变成了文本编辑器， 现在我们可以在div中输入文本。但是聪明的大家不难发现，这样用起来好像和普通的文本输入框没有半毛钱分别呀。

超简单区别富文本

那么我们现在来区分一下它富文本到底“富”在哪里。

现在除了一个div文本框还为大家准备了一张图片，大家将它拖入到文本框中可以发现神奇的事情。 是的，它做到了，它成功的将图片插入到文本框中了。不过这还不算，我们随便复制一段页面中的文本， 可以发现我们的文本带着CSS样式被复制进了文本框。这就是它的“富”。

overflow限制内容

我们在上面的文本框中输入过多内容或拖入过多图片会发现内容超出了DIV的范围， 所以就算是在可编辑状态下其依然保持着DIV原本的特性，其内容也是一样。 那么我们可以通过overflow来对其内容进行限制。

overflow:hidden内容超出部分不显示

 

overflow:auto内容超出部分使用下拉条

 

让文本输入时内容更有趣

在我看来可编辑div和input之间最大的区别在于输入的过程中可编辑div的内容依然保留HTML特性。 而input内容只是普通文本。那么拥有HTML特性的内容我们可以用来做什么呢？奇思妙想时间到了。 下面是通过自己的想法做的一个简单的输入文本动画效果。

输入内容动画例子

结束语

最近因为想自己开发文本编辑器所接触到的这个属性，不过奋战了一段时间还是没有成功的做出完善的输入中着色。 后来就选择了使用CodeMirror作为文本编辑器了。不过后面会继续尝试的， 如果能独立制作出着色器的话还是很有成就感的。

文章为原创内容并且是个人观点和见解，如有错误或问题欢迎指出
本文的地址为 : http://www.evillcg.com/blog/item/1467185423/