由于项目需要,最近做了个自制的编辑器,其实,回头来看编辑器的实现觉得也蛮容易的吗。不过话说回来,如果做成现在的(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,要下载文本编辑器。请点击新浪文本编辑器下载, 2,解压后,把文件夹中Edit文件夹夹复制到网站的根目录下, 3,在界面上引用编辑器 <iframe ID=...
之前做过高度自适应,但是始终效果不理想,后来看到一个比较好的办法,实现了之后,特保留一份模板,方便以后类似应用,测试过firefox,chrome,ie8,safari
百度ueditor是一个很好的编辑器,但是由于安全机制,不允许带iframe的内容提交(会自动过滤)。经过小编的多处的修改代码后,现在这个编辑器也支持使用iframe了!有需要的朋友可以下载来用!方便,有效!
用在线编辑器或许都会存在一个问题,即内容发表后呈现的样式会与编辑时的不一样,原因是编辑器其实是个内嵌的iframe,它里面用的大多是浏览器默认的样式(ckeditor 在其中另外定义了字体以及ul, ol 的缩进值),而...
手撸简单版前端富文本编辑器。基本原理:由于富文本内容不想收到所在页面或者前端框架的影响,或者说写一个完全单独的纯编辑器,采用原生iframe+js+jquery实现。
实时代码编辑器 我构建了一个实时代码编辑器。 我学习了如何使用iframe广告代码。 我还学习了如何使用JavaScript事件监听器onkeyup编写HTML,CSS和JavaScript的值并编译结果。
百度编辑器UEditor开发版 v1.1.7更新说明去掉了iframe.css 改为在editor_config.js中配置,避免css文件找不到的问题给下拉菜单添加了默认的文字说明Ueditor.css去掉了对外部页面css的影响修正了ie9下,编辑器的...
javascript简单编辑器;包括两种1.textarea实现所见非所得编辑器 2.iframe实现所见即所得编辑器
主要介绍了JS实现iframe编辑器光标位置插入内容的方法,可实现文本与图片的插入功能,并兼容IE和Firefox浏览器,需要的朋友可以参考下
ASP常用的后台编辑器,带图片上传功能 调用方法如下例子: <textarea name="nr" ROWS="20" COLS="70">%=Server.HTMLEncode(rs("nr"))%></textarea> <iframe ID="eWebEditor1" src="../eWebEditor/...
这是一个解决fixed在iframe中失效的解决案例,只要把文件放到编辑器中打开即可看到效果
把所有的图片文件做成了一个图片,可以大幅度提升加载速度,然后摒弃了前二者冗余的功能,仅保留了使用频率最高的功能,最后继承了eWebEditor的Iframe调用方式,不过比eWebEditor强悍的是,该编辑器可以在调用页直接...
Umeditor,简称UM,是百度编辑器Ueditor的Mini版本。是为满足广大门户网站对于简单发帖框,或者回复框需求所定制的在线富文本编辑器。 UM的主要特点就是容量和加载速度上的改变。全版本的代码量为125k,而且放弃了使用...
相关联的保存编辑内容的表单项名,也就是提交保存页要引用的表单项名 style 使用的样式名,可以是标准的样式名或自定义的样式名,如果使用默认的 coolblue 可留空 originalfilename 相关联的保存上传原文件名列表的...
修改过的编辑器的,比较好用,editor/upload.asp 里可以修改上传路径。 <textarea name="sContent" id="sContent" style="display:none"></textarea> <iframe src="/sEdit/editor....
网易编辑器用法演示 ; charset=gb2312" /> 网易编辑器用法演示 body{font-size:12px;color:#333333;} <form name="form1" method="post" action=""> ...
前段时间有个需求是开发富文本编辑器,这个之前随做过,但看了需求,发现有些地方还需google
兼容火狐和IE插入图片的js代码,IE9不兼容showModalDialog的处理方法。
新浪在线html编辑器 功能简介: 1.添加图片时增加上传功能(ASP无组件上传) 2.加入了iframe自适应编辑器尺寸功能 3.IFRAME方式调用 用法类似eWebEditor