超简易实时HTML编辑器

许多人或许都曾使用过Web编辑器, 像等等, 除了Word等本地编辑器之外, Web编辑器亦是极为常用且无比方便的Web内容来源。这些在线编辑器存在一个短板, 限制之处颇多, 无法实现实时反馈在线效果。在本文中, 虫虫为大家介绍一种极为简易的无限制在线Html编辑器, 能够达成所写即所得, UI以及样式可实时刷新, JS代码也能够进行热加载执行并重新渲染, 并且这些实现均极为简单, 仅运用了数量极少的html和css代码。

Html内容可编辑—

想要让Html能够进行编辑, 事实上是蛮简单的, 仅仅只要一个body标签那就足够了。这个body的属性, 或许很少有人知道, 实际上它所具备的功能, 乃是去达成Html文档能够被编辑。我们创设一个新的Html文档（Cc.html）, 接着把如下这般的代码复制粘贴到该文档当中:

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

你能够于这个页面随意输入文本, 甚至能够粘贴图片, 兼容基本上具备所有基本功能的浏览器, IE同样可以, 还能够支持Ctr+Z进行撤销以及重做。

样式实时变化

我们知道

标签里面的文字, 都会于页面呈现出来, 而之中以及里面的, 都是引用前端脚本的代码, 像是JS这类, 是需要借助浏览器引擎执行渲染才呈现出来的, 那么这些代码可不可以在呈现出来呢? 实际上在多数浏览器只是经由CSS样式给隐藏掉的, 我们借助重写在div>…

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

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

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

此刻, 我们能够, 凭借在线编辑style{}的内容, 促使页面的呈现实时发生变化, 比如说, 字体再增添10pt, 颜色转变为蓝色。

留意, 输入之际内容会实时产生变化, 像是你将20pt修改成30pt的过程中, 你所使用的字体就会变为2, 它是极小极小的, 接着将2删除便会恢复成默认的正常状态, 你无需去理会, 继续输入30, 字体就会变成30pt, 其他参数亦是如此。

该方法可以实时刷新样式显示

借助浏览器去打开, 接着进行编辑, 把//alert("Hello!")前面的//注释给去掉, 随后在按键shift的时候按Enter键。

结果如上图就可以弹出一个消息窗口。

基础模版和完善

经由上面所讲此种方式, 我们达成了个能够进行编辑的, 位于上端之处的在线编辑器。于先前代码的奠定之上的情形下, 我们给予了一个具备基础特性的模版以供大家去加以使用, 完整状态的代码呈现如下：

存放上面的代码成为html格式, 接着运用浏览器开启从而达成了一个简易的在线html编辑器。

完善功能

这个用于在线编辑的模版现下异常粗糙, 虽说是简陋不堪, 倘若能够增添诸如语法高亮以及自动完成这般的功能, 或许会变得相当不错, 然而这可是需要投入极大工作量的, 对此抱有兴趣的人可以试着去做一下。也能够借助引入某些第三方的库进行操作, 比如说采用微软所拥有的库来达成自动完成功能。

就语法高亮而言, 通常的做法是，把所有的内容放置到标签里面, 并且针对其开展着色操作, 这儿大多数其他基于html的编辑器施行的都是这般做法, 然而如此一来, 会致使自动刷新以及热加载功能的简单性遭受破坏。

完善内容

或许你还期望去处理那种与纯粹编辑本身不同的实在内容, 这事儿不难, 只需于body里边增添另外一个元素, 而做到这一点能够借助JS脚本来达成该行为, 同时还能够再添加更多的元素, 比如说一个按钮, 或者仅仅是通过对快速HTML框进行修改来达成, 所有这些都能够在已给出的模版的基础之上, 依据需求去增添或者修改。

总结

在本文里, 我们于属性的基础之上达成了, 在线Html编辑器能够实现内容以及样式的实时更新这件事, 还实现了JS代码的热加载。尽管这个在线编辑器仍旧极为简陋, 不过把它当作一个想法以及基础来“抛砖引玉”, 渴望大家能够实现一个功能完备, 更为实用的在线编辑器。