????最近被安排做了一个HTML在线编译功能，也利用这个机会对HTML在线编译，关键字高亮，富文本编辑器等的实现做了一些比较表面的研究，做简要记录，以便再次遇到作为参考。

????在线HTML编译

????首先需要一个能够输入及展示HTML代码的文本框，若只是显示普通HTML代码，使用<textarea>即可（w3school在线编译功能即如此）。若还要在其中实现标签及关键字高亮，则使用<div>（百度在线编译功能），这里需要将<div>设置为contentEditable="true",将其设置为可编辑状态。

????使用<textarea>实现，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>来实现，核心思想为获取div中文本，并用设置了高亮的相同内容替换之。

????核心JQ代码：

????$(document).ready(function() {

???? var key = "高亮字";

???? $("#keyword").html(function() {

???? return $(this).text().replace(key,"<font color=\"blue\">"+key+"</font>");

???? });

????多关键字：

????<script language="JavaScript">

txt.innerHTML = txt.innerHTML.replace(/(文章)|(关键字)|(功能)/gi,"<font color=red>$1$2$3</font>");

</script>

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编译，文本关键字高亮，富文本编辑器实现大致思路，由于他们功能看似类似，实则不然，所以放在一起以便对比讨论。

????新手，欢迎高手批评指正。

在线HTML编译，文本关键字高亮显示，富文本编辑实现大概思路

原文：http://www.cnblogs.com/xiangxs/p/5120574.html