iframe实现编辑器,编辑器中可以加事件
??? 由于项目需要,最近做了个自制的编辑器,其实,回头来看编辑器的实现觉得也蛮容易的吗。不过话说回来,如果做成现在的(javaeye用的这个有点像fckeditor),那还得需要很大很大的很复杂很复杂的编码控制。这里小介绍一下,如果在编辑器中触发事件:
main.html
?
<html><body><iframe id="editor" name="editor"></iframe></body></html><script type="text/javascript">var _frame = document.getElementById("editor");var _window = _frame.contentWindow;_window.document.designMode="on";//设置为设计模式,就可以填写内容了_window.document.canHaveHTML=true;/.可以包含HTMLinitEditor();function initEditor(){//可以写一堆事件处理_window.document.onmouseup= function(){}_window.document.click= function(){}}</script>?
?这应该很简单吧,但关键是实现下面这样的功能,类似Gmail中的连接功能:
?
?
其实看起来挺简单的,但是设置起来看相当不简单,因为在编辑模式下,你没法触发click事件。但还是有方法解决的。虽然它没有click事件,但是他是一个链接,链接的实质是<a>标签,怎么加上A标签呢?先一步步来:
1.获取选择对象:
var textrange = _window.document.selection.createRange();//这样在编辑区内,选中文本,就产生对象了。
2.怎么加上A,
1)TextRange 对象有pasteHTML方法,可以加上,
2)TextRange 的execCommand(), CreateLink命令。
?
怎么加事件呢,其实本质还是一样,本身点击右事件,只是不触发了而已,但是当你点击A链接以后,获取
var event = _window.event;
alert(event.srcElement.TagName);
这样可以获取事件源,然后判断如果TagName是A的话,就弹出层。就可以了。
写字太难受,略写了一下,如果需要详细,下次发源码。
?