在线编辑器原理 这是一个以前写的帖子
关于研究在线编辑器原理的文章
很多人都用过这样或那样的在线编辑器
比较有名的国产在线编辑器有 ewebsoft ,但为什么能实现在线编辑呢
首先需要 ie 的支持,在 ie 5
5 以后就有一个编辑状态
就是利用这个编辑状态,然后用 javascript 来控制 在线编辑的
下面给出一个简短的例子: 首先要有一个编辑框
这个编辑框其实就是一个 可编辑状态的 网页
我们这里用 iframe 来建立编辑框 并且在 加上 javascript 代码来指定 HtmlEdit 有编辑功能: function document
onreadystatechange() { HtmlEdit
document
designMode="On"; } HtmlEdit
document
innerHTML 这句可以获得 HtmEdit 里面的html 代码
一般的我们会用这样的 javascript 将 iframe 里的内容传递给一个 textarea 然后提交给服务器处理
function getIframeData(){ document
value=HtmlEdit
document
innerHTML; } function sentIframeData(){ HtmlEdit
document
innerHTML=document
value; } var sel = HtmlEdit
document
selection
createRange(); 而这一句可以获得选取的焦点: 下面我就演示一个完成的例子
一个拥有加粗功能的在线编辑器,有兴趣的朋友可以在此基础上完成其他功能
function getIframeData(){ document