`

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;/.可以包含HTML
initEditor();

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的话,就弹出层。就可以了。

写字太难受,略写了一下,如果需要详细,下次发源码。

 

  • 大小: 5.3 KB
分享到:
评论
1 楼 astarring 2014-06-16  
快发源码上来呀,哥. 我也正在研究这东东呢.

相关推荐

    新浪文本编辑器,网页编辑器

    新浪文本编辑器,很不错的编辑器,做网站有很多地方都可能会用到 1,要下载文本编辑器。请点击新浪文本编辑器下载, 2,解压后,把文件夹中Edit文件夹夹复制到网站的根目录下, 3,在界面上引用编辑器 &lt;iframe ID=...

    可编辑iframe高度自适应(编辑器所见即所得模式)

    之前做过高度自适应,但是始终效果不理想,后来看到一个比较好的办法,实现了之后,特保留一份模板,方便以后类似应用,测试过firefox,chrome,ie8,safari

    ueditor【去除Iframe限制版】

    百度ueditor是一个很好的编辑器,但是由于安全机制,不允许带iframe的内容提交(会自动过滤)。经过小编的多处的修改代码后,现在这个编辑器也支持使用iframe了!有需要的朋友可以下载来用!方便,有效!

    解决文本编辑器展示样式不一致

    用在线编辑器或许都会存在一个问题,即内容发表后呈现的样式会与编辑时的不一样,原因是编辑器其实是个内嵌的iframe,它里面用的大多是浏览器默认的样式(ckeditor 在其中另外定义了字体以及ul, ol 的缩进值),而...

    简单js+jquery+iframe富文本编辑器

    手撸简单版前端富文本编辑器。基本原理:由于富文本内容不想收到所在页面或者前端框架的影响,或者说写一个完全单独的纯编辑器,采用原生iframe+js+jquery实现。

    live-code-editor:我构建了一个实时代码编辑器。 我学习了如何使用iframe广告代码。 我还学习了如何使用JavaScript事件监听器onkeyup编写HTML,CSS和JavaScript的值并编译结果

    实时代码编辑器 我构建了一个实时代码编辑器。 我学习了如何使用iframe广告代码。 我还学习了如何使用JavaScript事件监听器onkeyup编写HTML,CSS和JavaScript的值并编译结果。

    百度编辑器UEditor v1.1.7 开发版

     百度编辑器UEditor开发版 v1.1.7更新说明去掉了iframe.css 改为在editor_config.js中配置,避免css文件找不到的问题给下拉菜单添加了默认的文字说明Ueditor.css去掉了对外部页面css的影响修正了ie9下,编辑器的...

    javascrip简单编辑器

    javascript简单编辑器;包括两种1.textarea实现所见非所得编辑器 2.iframe实现所见即所得编辑器

    JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)

    主要介绍了JS实现iframe编辑器光标位置插入内容的方法,可实现文本与图片的插入功能,并兼容IE和Firefox浏览器,需要的朋友可以参考下

    eweb编辑器(带图片上传功能)

    ASP常用的后台编辑器,带图片上传功能 调用方法如下例子: &lt;textarea name="nr" ROWS="20" COLS="70"&gt;%=Server.HTMLEncode(rs("nr"))%&gt;&lt;/textarea&gt; &lt;iframe ID="eWebEditor1" src="../eWebEditor/...

    解决iframe中fixed失效的问题

    这是一个解决fixed在iframe中失效的解决案例,只要把文件放到编辑器中打开即可看到效果

    ezEditor在线编辑器

    把所有的图片文件做成了一个图片,可以大幅度提升加载速度,然后摒弃了前二者冗余的功能,仅保留了使用频率最高的功能,最后继承了eWebEditor的Iframe调用方式,不过比eWebEditor强悍的是,该编辑器可以在调用页直接...

    百度编辑器Mini完整版.7z

    Umeditor,简称UM,是百度编辑器Ueditor的Mini版本。是为满足广大门户网站对于简单发帖框,或者回复框需求所定制的在线富文本编辑器。 UM的主要特点就是容量和加载速度上的改变。全版本的代码量为125k,而且放弃了使用...

    eWebEditor强大的文本编辑器

    相关联的保存编辑内容的表单项名,也就是提交保存页要引用的表单项名 style 使用的样式名,可以是标准的样式名或自定义的样式名,如果使用默认的 coolblue 可留空 originalfilename 相关联的保存上传原文件名列表的...

    HEML在线编辑器—新浪修改版

    修改过的编辑器的,比较好用,editor/upload.asp 里可以修改上传路径。 &lt;textarea name="sContent" id="sContent" style="display:none"&gt;&lt;/textarea&gt; &lt;iframe src="/sEdit/editor....

    网易编辑器用法演示===编辑器

    网易编辑器用法演示 ; charset=gb2312" /&gt; 网易编辑器用法演示 body{font-size:12px;color:#333333;} &lt;form name="form1" method="post" action=""&gt; ...

    javascript开发随笔3 开发iframe富文本编辑器的一点体会

    前段时间有个需求是开发富文本编辑器,这个之前随做过,但看了需求,发现有些地方还需google

    iframe编辑器火狐和IE插入图片的区别

    兼容火狐和IE插入图片的js代码,IE9不兼容showModalDialog的处理方法。

    新浪在线html编辑器

    新浪在线html编辑器 功能简介: 1.添加图片时增加上传功能(ASP无组件上传) 2.加入了iframe自适应编辑器尺寸功能 3.IFRAME方式调用 用法类似eWebEditor

Global site tag (gtag.js) - Google Analytics