富文本编辑器焦点

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
</style>
</head>
<body>
<iframe id="ifr1" width="300px" height="200px"></iframe>
<input  type="button" value="focus" id="btn1"/>
<script>
window.onload=function(){
ifr = document.getElementById(‘ifr1‘);
doc =  ifr.contentWindow.document;
//alert(doc);
doc.designMode = ‘on‘;
doc.open();
doc.write(‘<html><head></head><body></body></html>‘);
doc.close();
var btn1 = document.getElementById(‘btn1‘);
btn1.onclick = function(){
console.log(‘click‘);
doc.body.focus(); //兼容 chrome IE
//这个并不会触发body.focus而是会触发ifr.contentDocument.defaultView.onfocus
ifr.contentDocument.defaultView.focus();//兼容FF chrome 
//如果有了这个上面的就不起作用了。
};
doc.body.onfocus = function(){   //直接使用会报错,ie下只有body结束所以
//doc.write(‘<html><head></head><body></body></html>‘);
console.log(‘doc.body.onfocus‘);
}
doc.body.onblur = function(){ 
console.log(‘doc.body.onblur‘);
}
//
ifr.contentDocument.defaultView.onfocus = function(){
console.log(‘contentDocument.defaultView.onfocus‘);
}
ifr.contentDocument.defaultView.onblur = function(){
console.log(‘contentDocument.defaultView.onblur‘);
}
}
/*
* 总结如下
* 获得焦点
 
if(ff){
ifr.contentDocument.defaultView.focus();
}else{
doc.body.focus();
}
* 总结如下
* 焦点事件
if(ie){
doc.body.onfocus = function(){   
console.log(‘doc.body.onfocus‘);
}
}else{
ifr.contentDocument.defaultView.onfocus = function(){
console.log(‘contentDocument.defaultView.onfocus‘);
}
}
*/
</script>

</body>
</html>

如果Jquery

$(ifr.contentDocument.defaultView).focus();

会触发两个

doc.body.onfocus 和  contentDocument.defaultView.onfocus;

慎用。。。。。

富文本编辑器焦点,布布扣,bubuko.com

时间: 2024-10-18 08:34:53

富文本编辑器焦点的相关文章

由编辑器从光标处插入图片(失去焦点后仍然可以在原位置插入)实现的富文本编辑器

转载请注明: TheViper http://www.cnblogs.com/TheViper  大家都知道,如果只是大概的实现一个简单的富文本编辑器,直接用execCommand就可以了,虽然不同浏览器对execCommand命令的反应不一样,最后效果是差不多的.当然,如果要严谨的,用像ueditor那种只有很少部分实现是用execCommand的富文本编辑器. 昨天,本屌就试着用execCommand搞一个简单的编辑器.在本屌看来,什么字体加粗,斜体,下划线,对齐,列表..直接用execCo

富文本编辑器的一些要点

重新复习了富文本编辑器的基本实现,现总结下要点: 1,iframe的创建,之所以使用iframe框架,是为了防止编辑的内容影响当前文档. 2,隐藏的textarea保存iframe的源码 3,ie下的兼容性,为了保存ie的选中范围,需要借助于textRange.getBookmark(),以及ie特有的onbeforedeactivate和onactivate 事件.onbeforedeactivate事件触发条件:焦点从当前活动对象转移到同一个document的另一个对象时触发,它和onblu

重构wangEditor(web富文本编辑器),欢迎指正!

1. 前言 (下载源码.使用说明.demo,请参见:https://github.com/wangfupeng1988/wangEditor) 前段时间做过一个基于bootstrap的富文本编辑器--wangEditor,并发布到github上(https://github.com/wangfupeng1988/wangEditor),在博客园写了篇文章(http://www.cnblogs.com/wangfupeng1988/p/4088229.html)也受到了不少关注. 之所以有这次重构

【JavaScript】富文本编辑器

这是js写的富文本编辑器,还存在一些bug,但基本功能已经实现,通过这个练习,巩固了js富文本编辑方面的知识,里面包含颜色选择器.全屏.表情.上传图片等功能,每个功能实际对应的就是一个小插件啦 部分程序: var RichEditor = function(container, params) { params = params || {}; var options = { width: 900, height: 500, borderColor: "#ddd", buttons: {

KindEditor 一款好用的HTML可视化编辑器(富文本编辑器)

KindEditor使用JavaScript编写,可以无缝的于Java..NET.PHP.ASP等程序接合. KindEditor非常适合在CMS.商城.论坛.博客.Wiki.电子邮件等互联网应用上使用,2006年7月首次发布2.0以来,KindEditor依靠出色的用户体验和领先的技术不断扩大编辑器市场占有率,目前在国内已经成为最受欢迎的编辑器之一. ---以上内容来自百度百科 怎么用呢? 下载kindeditor 官网下载地址在这里 下载完成后,解压完并放入自己的项目中,目录结构如图: 初始

富文本编辑器 CKeditor 配置使用 (带附件)

Ckeditor下载地址:http://ckeditor.com/download 1.CKeditor的基本配置 var textval=CKEDITOR.instances.TextArea1.getData(); //获取带HTML的值 var stemTxt=CKEDITOR.instances.TextArea1.document.getBody().getText();//获取纯文本 CKEDITOR.instances.TextArea1.setData(data.content)

Vue基于vue-quill-editor富文本编辑器使用心得

vue-quill-editor的guthub地址,现在市面上有很多的富文本编辑器,我个人还是非常推荐Vue自己家的vue-quill-deitor,虽然说只支持IE10+,但这种问题,帅给别人吧! 那么我们直击正题,在vue中使用quill呢,我们需要npm进行安装,安装命令如下: npm install vue-quill-editor 再安装依赖项 npm install quill 使用: 在main.js中进行引入 import Vue from 'vue' import VueQui

详解Vue基于vue-quill-editor富文本编辑器使用心得

vue-quill-editor的guthub地址,现在市面上有很多的富文本编辑器,我个人还是非常推荐Vue自己家的vue-quill-deitor,虽然说只支持IE10+,但这种问题,帅给别人吧! 那么我们直击正题,在vue中使用quill呢,我们需要npm进行安装,安装命令如下: ? 1 npm install vue-quill-editor 再安装依赖项 ? 1 npm install quill 使用: 在main.js中进行引入 ? 1 2 3 4 5 6 7 import Vue

TinyMCE(富文本编辑器)

[转]TinyMCE(富文本编辑器)在Asp.Net中的使用方法 官网演示以及示例代码:https://www.tinymce.com/docs/demo/image-tools/ 转自:http://www.cnblogs.com/hahacjh/archive/2010/07/24/1784268.html TinyMCE 在Asp.Net中的使用方法其实挺简单的,从官方网站下载TinyMCE),然后将里面的jscripts目录拷到你的网站目录 假设你的aspx页面中某一个地方需要用到编辑器