很多人可能都用过Web编辑器，比如Ckedit等，除了Word等本地编辑器外Web编辑器也是最常用最方便Web内容来源。这些在线编辑器的一个短板限制很多，不能实时反馈在线效果。本文虫虫给大家介绍一种很简单的无限制在线Html编辑器，实现所写即所得UI和样式实时刷新，JS代码也能进行热加载执行重新渲染，而且这些实现都非常简单，只用到了很少的html和css代码。
Html内容可编辑—contenteditable
要使Html可以编辑实际上很简单只要一个body标签就足矣。contenteditable这个body属性可能鲜为人知，实际上它的功能就是实现Html文档可编辑。我们新建一个Html文档（Cc.html），然后将如下代码复制粘贴到文档中：
bodycontenteditable=true/body
通过浏览器打开这个文档，怎么样，神奇的事情发生了把？
你可以在这个页面任意输入文本甚至还可以粘贴图片。（兼容基本上所有的浏览器，IE也可以）。还可以支持Ctr+Z撤销和重做。
style…/style样式实时变化
我们知道div…/div和p…/p标签内的文字都会在页面显示，而script…/script和style…/style中的都是引用的前端脚本的代码（JS）等需要通过浏览器引擎执行渲染显示出来的，那么这些代码是不是可以在显示出来呢？实际上在大多数浏览器只是通过CSS样式隐藏起来的，我们通过重写在div…/div中增加script,style{display:block;}即可：
body
style
script,style{display:block;}
/style
script
console.log(HelloChongchong!);
/script
/body
通过将其粘贴到html文件并在浏览器中打开它，显示如下：
而且，我们也可以将这个页面也设置为contenteditable，并且style/style增加样式显示，比如我们修改字体的大小为20pt，颜色为绿色：
bodycontenteditable=true
style
script,style{display:block;font-size:20pt;color:green}
/style
script
console.log(HelloChongChong!);
/script
/body
现在我们可以，通过在线编辑style{}的内容，让页面的呈现实时变化，比如字体再增加10pt，颜色变成蓝色。
注意，输入时候内容会实时变化的，比如你修改20pt为30pt途中，你字体会变成2，很小很小，继续删除2就会恢复成默认正常默认，你不用理会继续输入30字体就会变成30pt，其他参数也类似。
该方法可以实时刷新样式显示style/style标签，对于JS代码，由于其只会在页面加载时候执行一次，你可以修改script…/script内容，但是不能实时执行生效。
JS代码热加载
上面我也说，JS代码的修改需要重新加载才能执行。为了实现重新加载，我们首先使用简单的按键（Shift+enter）触发重新加载的方法：
bodycontenteditable=true
style
script,style{display:block;font-size:20pt;color:green}
/style
script
//alert(HelloChongChong!);
document.onkeydown=function(e){
varkey=window.event?event:e;
if(key.shiftKeykey.keyCode==13){
eval(window.getSelection().focusNode.parentNode.innerHTML);
}
};
/script
/body
通过浏览器打开，并且编辑去掉//alert(HelloChongChong!)前面的//注释,然后按键shift时按Enter键。
结果如上图就可以弹出一个消息窗口。
基础模版和完善
通过上面的方法我们实现了一个可编辑上面在线编辑器。在前面代码的基础上，我们提供一个基础的模版供大家使用，完整代码如下：
bodycontenteditable=truespellcheck=false
titleeditor/title
stylescript,
style{
display:block;
white-space:pre-wrap;
background-color:#eeeeee;
border:solid;
border-radius:10px;
padding:20px;
}
body{
font-family:Menlo,Monaco,monospace;
font-size:12pt;
tab-size:4;
}
script.success{
background-color:#ccffcc;
border:solid,#00cc00;
}
script.error{
background-color:#ffcccc;
border:solid,#ff;
}
/style
scripttype=text/javascriptclass=success
//alert(HelloChongchong!);
document.onkeydown=function(e){
varkey=window.event?event:e;
varnode=window.getSelection().focusNode;
if(key.shiftKey){
if(key.keyCode==13){
node.parentNode.classList.remove(error);
node.parentNode.classList.remove(success);
try{
eval(node.parentNode.innerHTML);
node.parentNode.classList.add(success);
}catch(e){
node.parentNode.classList.add(error);
}
returnfalse;
}
}else{
if(key.keyCode==13){
document.execCommand(insertHTML,false,\n);
returnfalse;
}
if(key.keyCode==9){
document.execCommand(insertHTML,false,\t);
returnfalse;
}
}
}
/script
/body
将上面代码保存为html，然后用浏览器打开就实现了一个简单的在线html编辑器。
完善功能
该在线编辑器模版还非常简陋，如果能增加语法高亮和自动完成等一些功能可能很好，但是这是很大工作量，有兴趣的可以尝试着做下。也可以通过引入一些第三方的库来做下，比如使用微软的language-server-protocol库来实现自动完成功能。
至于语法高亮，一般做法是将所有内容填充到标签中并对其进行着色（大多数其他基于html的编辑器都这样做），但是这样会破坏自动刷新和热加载功能的简单性。
完善内容
你可能还希望处理实际内容，而不仅仅是编辑本身。这个简单，只需在contenteditablebody中添加另一个元素，该操作可以通过JS脚本实现该操作。还可以添加更多元素，例如一个按钮或者只是通过修改快速HTML框来实现。这些都可以在提供的模版的基础上按需增加修改。
总结
本文我们在contenteditable属性的基础上实现了，在线Html的编辑器实现内容和样式的实时更新、实现了JS代码的热加载。虽然此在线编辑器还非常简陋，但是以此作为一个想法和基础抛砖引玉，希望大家可以实现一个功能完善，更加实用的在线编辑器。