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