求助jscript高手，如何维持网页中选择的内容不失去焦点？

Question

editor.js
------------------------------------------------------
function HTMLEditor(id,bindObj,w,h,value)
{
    this.id      = id;
    this.width   = w;
    this.height  = h;
    this.obj     = null;
this.Textobj = null;
this.HTMLobj = null;
this.body = null;
    this.value = value;
this.mode  = "design";
this.bindObj   = bindObj;
this.init = function (){
bindObj.style.display="none";
this.obj = document.createElement("div");
this.obj.id = this.id;
this.obj.name = this.id;
this.obj.parentObj = this;
this.obj.style.width=w;
this.obj.style.height=h;
this.obj.innerHTML='<div style="width:100%;height:21px;padding-top:5px;"></div><div style="width:100%;top:30px;height:'+(h-50)+'px;"></div><div style="width:100%;top:50px;height:'+(h-50)+'px;display:none;font-size:9pt;"></div><div style="width:100%;height:15px;font-size:9pt;padding-top:5px;"><span style="padding:5px 5px 5px 5px;cursor:hand;" onclick=HTMLEditor_changeMode("'+this.id+'","design")>Design</span>&nbsp;&nbsp;<span style="padding:5px 5px 5px 5px; color:#DDDDDD;cursor:hand;" onclick=HTMLEditor_changeMode("'+this.id+'","html")>HTML</span></div>';

this.Textobj=this.obj.children[2];
this.Textobj.style.border="1px solid #000000";
this.Textobj.style.padding="10px 10px 10px 10px";
this.Textobj.style.overflow="auto";
this.Textobj.contentEditable="true"; this.HTMLobj=this.obj.children[1];
this.HTMLobj.style.border="1px solid #000000";
this.HTMLobj.style.overflow="auto";
this.HTMLobj.style.padding="10px 10px 10px 10px";
this.HTMLobj.contentEditable="true";
bindObj.parentNode.appendChild(this.obj);

this.HTMLobj.onfocusout=function(){this.focus();return false;};
this.HTMLobj.onblur=function(){this.focus();return false;}; this.obj.children[0].onmousemove = function() {
if (this.OldObj!=undefined)
this.OldObj.style.border="";
if (this.OnMoveObj!=undefined){
this.OnMoveObj.style.border="1px solid #000000";
this.OldObj=this.OnMoveObj;
}
}
this.obj.children[0].onmouseout = function() {
if (this.OnMoveObj!=undefined)
this.OnMoveObj.style.border="";
}

this.loadToolBar();
this.setValue("<p>Please input some words here...</p>");
this.HTMLobj.focus();
//this.obj.document.close();
external.raiseEvent("onready",window.event);
} this.loadToolBar = function (){
this.addToolButton("Bold");
this.addToolButton("Italic");
this.addToolButton("Underline");
this.addToolButton("StrikeThrough");
this.addToolButton("Subscript");
this.addToolButton("Superscript");
this.addToolButton("CreateLink");
this.addToolButton("MoveLink");
this.addToolButton("JustifyCenter");
this.addToolButton("JustifyFull");
this.addToolButton("JustifyLeft");
this.addToolButton("JustifyRight");
var l=new HTMLList("FontSize","Font: ");
this.obj.children[0].appendChild(l.obj);
l.setValue("Test");
l.AddItem("1",'1');
l.AddItem("2",'2');
l.AddItem("3",'3');
} this.init();
}HTMLEditor.prototype.setValue = function (v){
this.value=v;
this.Textobj.innerText=v;
this.HTMLobj.innerHTML=v;
this.refreshBind();
}HTMLEditor.prototype.getValue = function (){
return this.value;
}HTMLEditor.prototype.bind = function (obj){
this.bindObj=obj;
}HTMLEditor.prototype.refreshBind = function (){
if(this.bindObj.tagName=="INPUT")
this.bindObj.value=this.value;
else
this.bindObj.innerText=this.value;
}HTMLEditor.prototype.addToolButton = function (cmd){
var h='<span style="padding:1px 1px 1px 1px;cursor: default;" title="'+cmd+'" onclick=HTMLEditor_toolbarClick("'+this.id+'","'+cmd+'") onmouseover="this.parentNode.OnMoveObj=this;"><img border=0 src="images/button.'+cmd+'.gif"></span>';
this.obj.children[0].innerHTML+=h;
}function HTMLEditor_toolbarClick(id,cmd,para){
var editor=document.getElementById(id).parentObj;
if (editor.mode!="design")
return;

var edit = document.selection.createRange();
if (cmd=="Bold"||cmd=="Italic"||cmd=="Underline"||cmd=="StrikeThrough"||cmd=="Subscript"||cmd=="Superscript"||cmd=="JustifyCenter"||cmd=="JustifyFull"||cmd=="JustifyLeft"||cmd=="JustifyRight")
{
if (!edit.text=="") edit.execCommand(cmd); else alert("Please select some text first!");
return;
}
else if (cmd == "FontColor")
{
theColor = document.all.fontcolor.value;
if (theColor != "")
edit.execCommand("ForeColor", false, theColor);
}
else if (cmd == "FontSize")
{
theSize = para;
if (theSize != ""){
edit.execCommand("FontSize", false, theSize);
}
}
else if (cmd == "FontName")
{
theName = para;
if (theName != "")
edit.execCommand("FontName", false, theName);
}
else if (cmd == "InsertImage")
{
theImg = para;
if (theImg != "")
edit.execCommand("InsertImage", false, theImg);
}
else if (cmd== "CreateLink"){
if (!edit.text==""){
edit.execCommand("CreateLink");
}
else
alert("Please select some blue text!");
}
else if (cmd== "MoveLink"){
if (!edit.text==""){
if (edit.parentElement().tagName=="A"){
var t=edit.parentElement().innerText;
edit.parentElement().removeNode(true);
edit.text=t; 
}}
else
alert("Please select some blue text of the link!");
}
}

Answer 1

function HTMLEditor_changeMode(id,mode){
var editor=document.getElementById(id).parentObj;
if (mode=="html")
{
editor.setValue(editor.HTMLobj.innerHTML);
editor.HTMLobj.style.display="none";
editor.Textobj.style.display="block";
editor.mode=="html";
editor.Textobj.focus();
editor.obj.children[3].children[0].style.color="#dddddd";
editor.obj.children[3].children[1].style.color="#000000";
}
else{
editor.setValue(editor.Textobj.innerText);
editor.Textobj.style.display="none";
editor.HTMLobj.style.display="block";
editor.mode=="design";
editor.obj.children[3].children[1].style.color="#dddddd";
editor.obj.children[3].children[0].style.color="#000000";
editor.HTMLobj.focus();
}
editor.value=editor.HTMLobj.innerHTML;
}function HTMLList(id,caption,w,h){
if (w==undefined) w=80;
if (h==undefined) h=20;
this.id      = id;
this.caption = caption;
    this.width   = w;
    this.height  = h; this.obj = document.createElement("span");
this.obj.id = this.id;
this.obj.parentObj = this;
this.obj.style.fontSize="9pt";
this.obj.style.padding="0px 1px 1px 5px";
this.obj.style.position="relative";
this.obj.style.top="-7px";
this.obj.innerHTML='<span>'+caption+'</span><span style="border:1px solid #000000;width:'+w+'px;height:18px; overflow:hidden;" OnClick="return HTMLList_OnClick(\''+id+'\',this);"><div style="float:right; border-left:1px solid #000000; height:18px; width:15px; vertical-align:middle; text-align:center;"><img src="images/toolbar.expand.gif"></div><div style="padding:2px 1px 1px 2px;"></div></span>';
this.obj.innerHTML+='<div style="visibility:hidden;position:absolute;z-index:999;width:150px; border:1px solid #000000;overflow:auto;background-color:#FFFFFF;"></div>';

this.DropDownobj=this.obj.children[2];
this.obj.onmouseover = function() {
this.parentNode.OnMoveObj=undefined;
}
this.obj.children[2].onmousemove = function() {
if (this.OldObj!=undefined)
this.OldObj.style.border="1px solid #dddddd";
if (this.OnMoveObj!=undefined){
this.OnMoveObj.style.border="1px solid #0000dd";
this.OldObj=this.OnMoveObj;
}
}
this.obj.children[2].onmouseout = function() {
if (this.OnMoveObj!=undefined)
this.OnMoveObj.style.border="1px solid #dddddd";
}
}HTMLList.prototype.setValue= function(v){
this.obj.children[1].children[1].innerText=v;
}HTMLList.prototype.AddItem= function(v,cmd){
this.obj.children[2].innerHTML+='<div OnClick="return HTMLListItem_OnClick(\''+this.id+'\',\''+cmd+'\',this);" onmouseover="this.parentNode.OnMoveObj=this;" style="width:100%;border:1px solid #dddddd;padding:2px 2px 2px 2px;margin:2px 2px 2px 2px;">'+v+'</div>';
}HTMLList.prototype.getParent= function(){
//get HTMLEditor
return this.obj.parentNode.parentNode.parentObj;
}function HTMLList_OnClick(id,obj){
var list=document.getElementById(id).children[1];
var ldrop=document.getElementById(id).children[2].style;
ldrop.left=list.clientLeft+list.offsetLeft;
ldrop.top=list.clientTop+list.offsetTop+18;
if(ldrop.visibility=="hidden")
ldrop.visibility="visible";
else
ldrop.visibility="hidden";
return false;
}function HTMLListItem_OnClick(id,cmd,obj){
var list=document.getElementById(id).parentObj;
HTMLEditor_toolbarClick(list.getParent().id,list.id,cmd);
list.setValue(obj.innerText);
list.DropDownobj.style.visibility="hidden";
return false;
}
------------------------------------------------

Answer 2

HTMLList.prototype.AddItem= function(v,cmd){
this.obj.children[2].innerHTML+='<img src="" width="64" height="16" alt="'+v+'" value="'+v+'" OnClick="return HTMLListItem_OnClick(\''+this.id+'\',\''+cmd+'\',this);" onmouseover="this.parentNode.OnMoveObj=this;" style="width:100%;border:1px solid #dddddd;padding:2px 2px 2px 2px;margin:2px 2px 2px 2px;">';
}function HTMLListItem_OnClick(id,cmd,obj){
var list=document.getElementById(id).parentObj;
HTMLEditor_toolbarClick(list.getParent().id,list.id,cmd);
list.setValue(obj.value);
list.DropDownobj.style.visibility="hidden";
return false;
}

Answer 3

一个DIV对象获得焦点那之前取得焦点的DIV肯定就失去焦点了,除了img之外,你可以用个按钮什么的来做出一个效果和你要求的基本差不多的样子来