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

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

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

转载于:https://www.cnblogs.com/xiangxs/p/5120574.html