用contentEditable和designMode实现可编辑的页面

2009 6 4 12:59 PM 3861次查看

分类：HTML 标签：HTML

今天看到有人问textarea里怎么插入图像。由于textarea是只能显示文本的，所以实际上是没法做到的（IE例外，因为不符合规范）。

但Discuz!和PHPWind有所见即所得模式，于是研究了一下，便找到替代方法了。

DOM元素有一个contentEditable属性，当这个属性为true时，就可以编辑了。这个编辑包括插入、删除、复制、粘贴和拖动等，甚至可以粘贴图像和表格。（经我测试，支持IE 6、Chrome 3、Firefox 3和Safari 4，但Opera 9.62不能复制图像、样式和拖动元素。）

此外，document.body还有个designMode属性，当它为"on"时，这整个页面就能编辑了。不过由于只有body有这个属性，所以一般是用iframe来实现的。

最后给个例子：
你可以编辑这里。

0条评论 你不来一发么↓

    想说点什么呢？