在线编辑器的焦点问题！急
在JavaScript区提问没人回答！晕死！自己想做一个在线编辑器，结果遇到问题了。
工具栏按钮是一个一个的小Div。
编辑区域是Iframe。
现在问题是在Iframe中选中一些文字，当点击Div做的按钮的时候Iframe就失去焦点了，结果什么也没执行。
function runCMD(cmd,value){
ctlEditorWin.focus();
ctlEditorWin.document.execCommand(cmd, false, value);//
ctlEditorWin.focus();
return false;
}
这样写的话在FF下正常执行了。但是在IE7下就不能正常执行了。
高手帮忙啊！
在线等着呢！ --------------------编程问答-------------------- ctlEditorWin.focus();
这个地方的应该这样写吧document.getElementById('iframeid吧').foucs();你试试 --------------------编程问答-------------------- ctlEditorWin我这就是一个Iframe，这个Focus也起作用了，但是由选中一个区域变成一个在整个文档首部的光标了 --------------------编程问答-------------------- var ifrm=document.getElementById('iframeID');//得到iframe
ifrm.contentWindow.document.body.focus();//焦点至于iframe内部 --------------------编程问答-------------------- function runCMD(cmd,value){
var ifrm=document.getElementById('iframeID');
ctlEditorWin=ifrm.contentWindow;
ctlEditorWin.document.body.focus();
ctlEditorWin.document.execCommand(cmd, false, value);
return false;
}
这样写还是不行啊！晕了！ --------------------编程问答-------------------- 给楼主参考一下我自己写的代码
--------------------编程问答-------------------- 上面的代码在ie7和ff中正常使用
function PostEditor(tId,vId){
this.textareaId = tId;
this.viewerId = vId;
this.Undo = new Array();
if(this.viewerId)
this.changeEditMode('view');
}
PostEditor.prototype = {
changeEditMode : function(em){ //切换编辑方式
var code = document.getElementById(this.textareaId);
var view = document.getElementById(this.viewerId);
if(em == 'code'){
code.style.display = 'block';
var sHtml = view.contentWindow.document.body.innerHTML;
code.focus();
if(this.editMode != em) //如果编辑模式改变,则统一两种模式中的代码
code.value = this.convertHtmlToCode(sHtml);
view.style.display = 'none';
this.editMode = em;
}else if(em == 'view'){
code.style.display = 'none';
view.style.display = 'block';
view.focus();
view.style.width = code.style.width;
view.style.height = code.style.height;
var doc = view.contentWindow.document;
if(this.editMode != em) //如果编辑模式改变,则统一两种模式中的代码
doc.body.innerHTML = this.convertCodeToHtml(code.value);
doc.designMode = 'On';
this.editMode = em;
}
},
getText : function() //获取文本
{
var post;
if(this.editMode == 'code'){
if(typeof this.textareaId == 'string')
post = document.getElementById(this.textareaId);
else if(this.textareaId.type == 'textarea')
post = this.textareaId;
}else{
if(typeof this.viewerId == 'string')
post = document.getElementById(this.viewerId).contentWindow;
else if(this.viewerId.type == 'iframe')
post = this.viewerId.contentWindow;
}
if(window.getSelection){//firefox
// if(typeof post.selectionStart == 'number'){
return this._getTextSelectionForFirefox(post);
// }
}else{
// if(post.isTextEdit){ //ie
return this._getTextSelectionForIE(post);
// }
}
return '';
},
_getTextSelectionForFirefox : function(post){
if(this.editMode == 'code'){
var start = post.selectionStart;
var end = post.selectionEnd;
var text = post.value.substring(start,end);
if(!text) text = '';
return {
start:start,
end:end,
text:text,
element:post
}
}else{
var window = post.window;
var text = window.getSelection();
return {
text:text,element:post
}
}
},
_getTextSelectionForIE : function(post){
post.focus();
var sel= post.document.selection;
var rng= sel.createRange();
if((sel.type =="Text" || sel.type == "None") && rng !=null){
if(rng.text.length > 0)
return { text:rng.text,element:post};
}
return {text:'',element:post};
},
setText : function(str,undo) //应用文本
{
var post = this.getText();
var elem = post.element;
if(window.getSelection){
this._setTextForFirefox(str,elem,undo);
}else{
this._setTextForIE(str,elem,undo);
}
},
newUndo : function(str){
if(str==undefined){str='';}
if(str!=this.Undo[this.Undo.length-1]){this.Undo.push(str);}
},
getUndo : function(){ //撤销功能
var arrUndo = this.Undo;
if(arrUndo.length>0){
arrUndo.pop();
var str = arrUndo[arrUndo.length-1]==undefined?'':arrUndo[arrUndo.length-1];
this.setText(str,true);
return;
}
this.setText('',true);
},
_setTextForFirefox : function(str,elem,undo){
if(this.editMode == 'code'){//源代码编辑模式
var textarea = elem;
var post = this.getText(elem.id);
if(undo){
textarea.value = str;
}else{
var text = textarea.value;
this.newUndo(text); //保存编辑前状态
var str1 = text.substring(0,post.start);
var str2 = text.substring(post.end);
textarea.value = str1 + str + str2;
this.newUndo(textarea.value); //保存编辑后状态
}
}else{ //视图编辑模式
if(undo){
elem.document.body.innerHTML = this.convertCodeToHtml(str);
}else{
this.newUndo(this.convertHtmlToCode(elem.document.body.innerHTML));//保存编辑前状态
elem.document.execCommand('insertHTML',false,str);
this.newUndo(this.convertHtmlToCode(elem.document.body.innerHTML));//保存编辑后状态
}
}
},
_setTextForIE : function (str,elem,undo){
var sel = elem.document.selection;
var r = sel.createRange();
if(this.editMode == 'view'){
if (sel.type != "None"){
sel.clear() ;
}
if(undo){
elem.document.body.innerHTML = this.convertCodeToHtml(str);
}else{
try{
this.newUndo(this.convertHtmlToCode(elem.document.body.innerHTML));//保存编辑前状态
r.pasteHTML(str) ;
this.newUndo(this.convertHtmlToCode(elem.document.body.innerHTML));//保存编辑后状态
}catch(err){}
}
}else{
if(undo){
elem.value = str;
}else{
this.newUndo(elem.value);//保存编辑前状态
if(r.text==''){
document.all ? this._insertAtCaret(elem, str) : elem.value += str;
}else{
r.text=str;
}
this.newUndo(elem.value);//保存编辑后状态
}
}
},
_insertAtCaret : function (textEl, text){
if (textEl.createTextRange && textEl.caretPos){
var caretPos = textEl.caretPos;
caretPos.text += caretPos.text.charAt(caretPos.text.length - 2) == ' ' ? text + ' ' : text;
} else if(textEl) {
textEl.value += text;
} else {
textEl.value = text;
}
}
用textArea实现源代码编辑 ,通过iframe实现designMode
convertHtmlToCode和convertCodeToHtml是自己定义的ubb和html之间的转换 --------------------编程问答-------------------- 楼主好强啊！都自己做在线编辑器了。
这个需要JavaScript技术相当高吧。 我的JS水平不高。学习 了！ --------------------编程问答-------------------- 现在关键时鼠标一点Div类型的按钮Iframe就失去焦点了，当再用ctlEditorWin.focus()让Iframe获得焦点的时候，原来的选区没了，只剩一个光标在文档首部了！
大侠们帮帮我吧，分不够我可以再加分，我在Web/Javascript区也提问了，不过到现在还没人回复！ --------------------编程问答-------------------- 不能用focus吧，一用了focus原来的选择点就没有了。楼主是怎么获得选区的文字的代码贴一帖？ --------------------编程问答-------------------- 我没有获得选区文字的代码！我就是直接执行IE里的方法execCommand的，代码在FF下运行正常，在IE下就会失去选区。 --------------------编程问答-------------------- 你是不是应该用
ctlEditorWin.tt.focus();
ctlEditorWin.tt.document.execCommand(...);
假设tt是textarea的id.
--------------------编程问答-------------------- 我的ctlEditorWin是个iframe.contentWindow对象.
关键是我现在根本就获得不到选区。-_-! --------------------编程问答-------------------- --------------------编程问答-------------------- 顶一下，问题还没解决不能让帖子沉了 --------------------编程问答--------------------
楼主没有看到我在5楼写的代码吗????
我用着一直都没有问题啊,你使用有问题的话,告诉我一声,我好修改 --------------------编程问答-------------------- 我发布的资源中有完整的原创小巧精美的WebEditor控件,Vs2008/Asp.net3.5环境下使用,可以简易修改后能在asp.net2.0环境中使用, --------------------编程问答-------------------- http://download.csdn.net/source/527801 --------------------编程问答-------------------- 还是没解决焦点的问题,哪位高手有空留个Email帮我看一下代码吧! --------------------编程问答-------------------- 参考5楼的
楼主你用 mousedown 别用 click 就可以了 --------------------编程问答-------------------- jfzr
补充：.NET技术 , ASP.NET
