在线HTML编辑器原理

阅读更多
为什么能实现在线编辑呢?  首先需要ie 的支持,在 ie 5.5以后就有一个编辑状态,就是利用这个编辑状态,然后用javascript 来控制在线编辑的。
下面给出一个简短的例子:
首先要有一个编辑框,这个编辑框其实就是一个 可编辑状态的 网页,我们这里用iframe 来建立编辑框



并且在 加上javascript 代码来指定 HtmlEdit 有编辑功能:

function document.onreadystatechange()
{
HtmlEdit.document.designMode="On";
}



HtmlEdit.document.body.innerHTML  这句可以获得 HtmEdit 里面的html代码. 一般的我们会用这样的javascript 将 iframe 里的内容传递给一个textarea 然后提交给服务器处理.

function getIframeData(){
document.form1.test.value=HtmlEdit.document.body.innerHTML;
}
function sentIframeData(){
HtmlEdit.document.body.innerHTML=document.form1.test.value;
}

var sel = HtmlEdit.document.selection.createRange(); 而这一句可以获得选取的焦点:

下面我就演示一个完成的例子. 一个拥有加粗功能的在线编辑器,有兴趣的朋友可以在此基础上完成其他功能!!









 










你可能感兴趣的:(HTML,JavaScript,IE)