div 可编辑_通过简单Html代码实现实时Web编辑器

很多人可能都用过Web编辑器，比如Ckedit等，除了Word等本地编辑器外Web编辑器也是最常用最方便Web内容来源。这些在线编辑器的一个短板限制很多，不能实时反馈在线效果。本文虫虫给大家介绍一种很简单的无限制在线Html编辑器，实现所写即所得UI和样式实时刷新，JS代码也能进行热加载执行重新渲染，而且这些实现都非常简单，只用到了很少的html和css代码。

Html内容可编辑—contenteditable

要使Html可以编辑实际上很简单只要一个body标签就足矣。contenteditable这个body属性可能鲜为人知，实际上它的功能就是实现Html文档可编辑。我们新建一个Html文档(Cc.html)，然后将如下代码复制粘贴到文档中：

通过浏览器打开这个文档，怎么样，神奇的事情发生了把？

你可以在这个页面任意输入文本甚至还可以粘贴图片。(兼容基本上所有的浏览器，IE也可以)。还可以支持Ctr+Z撤销和重做。

样式实时变化

我们知道

…

和

…

标签内的文字都会在页面显示，而和中的都是引用的前端脚本的代码(JS)等需要通过浏览器引擎执行渲染显示出来的，那么这些代码是不是可以在显示出来呢？实际上在大多数浏览器只是通过CSS样式隐藏起来的，我们通过重写在div>…

中增加script, style { display: block; }即可：

script, style { display: block; }

通过将其粘贴到html文件并在浏览器中打开它，显示如下：

而且，我们也可以将这个页面也设置为contenteditable，并且

script, style { display: block;font-size: 20pt;color: green}