????最近被安排做了一个HTML在线编译功能，也利用这个机会对HTML在线编译，关键字高亮，富文本编辑器等的实现做了一些比较表面的研究，做简要记录，以便再次遇到作为参考。
????在线HTML编译
????首先需要一个能够输入及展示HTML代码的文本框，若只是显示普通HTML代码，使用即可(w3school在线编译功能即如此)。若还要在其中实现标签及关键字高亮，则使用
(百度在线编译功能)，这里需要将设置为contentEditable="true",将其设置为可编辑状态。
????使用实现，textarea为代码输入框，旁边需要一个iframe来展示代码运行结果。
????核心JS代码：
????function run(){
var iframeContent=$(".mysource").val();
var iFrame=document.getElementById("container").contentWindow;
iFrame.document.open();
iFrame.document.write(iframeContent);
iFrame.document.close();
}
????var iframeContent=$(".mysource").val()来获取textarea内容；
????var iFrame=document.getElementById("container").contentWindow得到iframe对象；
????iFrame.document.write(iframeContent)将textarea内容写入iframe得到结果。
????若涉及到从外部向textarea导入代码，可考虑设置不可见iframe在textarea之前，iframe中也需设置textarea，获取iframe中textarea内容，并将其赋给显示代码处的textarea，核心代码如下：
????function go1(){
????var win = document.getElementById(‘demo1‘).contentWindow.document.getElementById(‘code‘).value;
????document.getElementById("mysource").value=win;
}
????文本关键字高亮
????通常用
来实现，核心思想为获取div中文本，并用设置了高亮的相同内容替换之。
????核心JQ代码：
????$(document).ready(function() {
???? var key = "高亮字";
???? $("#keyword").html(function() {
???? return $(this).text().replace(key,""+key+"");
???? });
????多关键字：
????
txt.innerHTML = txt.innerHTML.replace(/(文章)|(关键字)|(功能)/gi,"$1$2$3");
txt为div。
????富文本编辑器
????富文本编辑器往往需要对字体大小，颜色，插入图片，表情等做众多改变，目前用得最多、兼容性最好的还是iframe方式。
????先将iframe标签通过：
????var edit=document.getElementById("myedit").contentWindow;
????edit.document.designMode="On";
????edit.document.contentEditable="ture";????
将其设置为可编辑状态。换而言之，HTML在线编辑器就是一个可编辑的iframe。
具体功能实现：
浏览器已经提供了实现这些功能的接口execCommand：
iframe.contentWindow.document.execCommand(cmd, isDefaultShowUI, value);
????execCommand具体使用参见下篇博文。
????
????以上为在线HTML编译，文本关键字高亮，富文本编辑器实现大致思路，由于他们功能看似类似，实则不然，所以放在一起以便对比讨论。
????新手，欢迎高手批评指正。
原文：/xiangxs/p/5120574.html
