文本编辑器 改变文字颜色的一个问题(ie)

为文本编辑器做的一个颜色选择器，在firefox中一切正常。在ie中却出现了很怪的问题，选中文本后点击“改变文字颜色”按钮，选择颜色后，选中文字颜色不变，光标跳到了文档的开头……而且每次点“改变文字颜色”，光标都跳到最前面。头疼…… 各位有空的就当解解闷，看看代码吧，帮我看看哪里出了问题。不胜感激！！！！！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
#td_code { padding:8px 3px; }
#td_editor { width:595px; border: 1px solid #c5c5c5; line-height:130%; }
#toolbar { margin:0; padding: 0; width: 100%; list-style: none; border-bottom: 1px solid #c5c5c5; background: url(../images/toolbarbg.gif) repeat-x; height: 31px; }
</style><body>
<script type="text/javascript">
// JavaScript Documentvar colorPicker = function(){ this.colorPool = ["#000000","#993300","#333300","#003300","#003366","#000080","#333399","#333333","#800000","#FF6600","#808000","#008000","#008080","#0000FF","#666699","#808080","#FF0000","#FF9900","#99CC00","#339966","#33CCCC","#3366FF","#800080","#999999","#FF00FF","#FFCC00","#FFFF00","#00FF00","#00FFFF","#00CCFF","#993366","#CCCCCC","#FF99CC","#FFCC99","#FFFF99","#CCFFCC","#CCFFFF","#99CCFF","#CC99FF","#FFFFFF"]}
colorPicker.prototype.initialize = function(idStr){

 var count=0;
 var html = '';
 var self = this;
    html+= '<table cellspacing="5" cellpadding="0" border="2" bordercolor="#000000"  style="cursor:pointer;background:#ECE9D8" >';
   // html+= '<tr><td align="center" colspan="8" width="160" height="20" id="currentColor" bgcolor="#ffffff">当前颜色</td></tr>';
    
    for(var i=0;i<5;i++)
    {
        html+= "<tr>";
        for(j=0;j<8;j++)
        {
           html+= '<td align="center" width="20" height="20" style="background:'+ this.colorPool[count]+'"  onClick="('+ self.setColor +')(\''+ this.colorPool[count]+'\')">&nbsp;</td>';
            count++;
        }
        html+= "</tr>";
    }
    html+= '</table>';

this.trigger = document.getElementById(idStr);

this.div = document.createElement('div');
this.div.innerHTML = html;
this.div.id = 'myColorPicker';
this.div.style.position = 'absolute';

this.div.style.left = 0;

this.trigger.parentNode.appendChild(this.div);
this.hide();
this.trigger.onclick = function(){
if(self.div.style.display == 'none'){
self.show();
return false;
}else{
self.hide();
return false;
}
}
}
colorPicker.prototype.setColor = function(c){

proEditor.setColor(c);

}
colorPicker.prototype.hide = function(){
this.div.style.display = 'none'
}
colorPicker.prototype.show = function(){
this.div.style.display = 'block'
}function $(str){return document.getElementById(str)}
function a_addEvent(oElm , strEvent , fuc) {
strEvent = strEvent.replace(/^on/i , '') ;
if(window.attachEvent)
oElm.attachEvent('on' + strEvent , fuc) ;
else 
oElm.addEventListener(strEvent , fuc , false) ;
}
function stopEvent(evt , type){
if (evt.preventDefault) {
if(type == 'v' || type == null) evt.preventDefault();
if(type == 'b' || type == null) evt.stopPropagation();
}
else{
if(type == 'v' || type == null) evt.returnValue = false;
if(type == 'b' || type == null) evt.cancelBubble = true;     
}
}
// ======================= 编辑器  =======================
var proEditor =  { ed  : null ,

edt : null,

storeBak : '', set : function(s , v) { this.ed.focus() ;
this.ed.document.execCommand(s,false,v||null);

} , display : function(ele , type , event) {
this.hide(ele) ;
switch(type) {
case 'color' :
break ;

}
} , hide : function(ele) {
} , onload : function(content) {
var test = new colorPicker() ;
test.initialize('dlg_setColor');

content = content || '' ;
this.ed = document.getElementById("ifm_editarea").contentWindow;
this.edt = document.getElementById("ifm_editarea").contentWindow.document; try{
this.ed.document.designMode = 'On';
this.ed.document.contentEditable = true;
}
catch(e) {
alert('目前只支持IE5.5,Firefox1.0+')
} this.ed.document.open();
this.ed.document.writeln('<html><head><style type="text/css">body { margin: 0; padding: 0px;}</style></head><body>' + content + '</body></html>')
this.ed.document.close();
var thisObj = this ;
a_addEvent(document , "onclick" , function() {thisObj.hide()}) ;
a_addEvent(this.ed.document , "onclick" , function() {thisObj.hide()}) ;
} , setColor : function(color) {

this.set('forecolor'  , color) ;

document.getElementById('myColorPicker').style.display = 'none'
} ,     editorHTML :         '<div id="td_editor" style="margin:0 auto;width:645px">' +
  '<ul id="toolbar" onclick="stopEvent(event , \'b\')" >' +
 
 
  '<li style="position: relative;"><a  href="javascript://" id="dlg_setColor" onclick="proEditor.display(this,\'color\' , event)" title="颜色"><img border="0" width="169" height="35" alt="点击更换文字颜色" title="点击更换文字颜色" src="" /></a></li>' +
 
  '</ul>' +
  '<iframe id="ifm_editarea" src="about:blank" frameborder="0"></iframe>' +
  '</div>' +

</div>'+
                          '<div class="rBot"></div></div>',
create : function(){

var div = document.createElement('div');
div.innerHTML = this.editorHTML;

document.body.appendChild(div)

div.style.position = 'absolute';
div.style.left = 0;
div.style.top = 0;
proEditor.onload();
}
}
</script><script type="text/javascript">
proEditor.create();


</script></body>
</html>

解决方案 »

  1.   

    我也跑不起来
    proEditor  未定义....
      

  2.   

    不好意思，代码弄丢了一个引号。重新粘下代码.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    <style type="text/css">
    #td_code { padding:8px 3px; }
    #td_editor { width:595px; border: 1px solid #c5c5c5; line-height:130%; }
    #toolbar { margin:0; padding: 0; width: 100%; list-style: none; border-bottom: 1px solid #c5c5c5; background: url(../images/toolbarbg.gif) repeat-x; height: 31px; }
    </style><body>
    <script type="text/javascript">
    // JavaScript Documentvar colorPicker = function(){    this.colorPool = ["#000000","#993300","#333300","#003300","#003366","#000080","#333399","#333333","#800000","#FF6600","#808000","#008000","#008080","#0000FF","#666699","#808080","#FF0000","#FF9900","#99CC00","#339966","#33CCCC","#3366FF","#800080","#999999","#FF00FF","#FFCC00","#FFFF00","#00FF00","#00FFFF","#00CCFF","#993366","#CCCCCC","#FF99CC","#FFCC99","#FFFF99","#CCFFCC","#CCFFFF","#99CCFF","#CC99FF","#FFFFFF"]}
    colorPicker.prototype.initialize = function(idStr){
        
         var count=0;
         var html = '';
         var self = this;
        html+= '<table cellspacing="5" cellpadding="0" border="2" bordercolor="#000000"  style="cursor:pointer;background:#ECE9D8" >';
       // html+= '<tr><td align="center" colspan="8" width="160" height="20" id="currentColor" bgcolor="#ffffff">当前颜色</td></tr>';
        
        for(var i=0;i<5;i++)
        {
            html+= "<tr>";
            for(j=0;j<8;j++)
            {
               html+= '<td align="center" width="20" height="20" style="background:'+ this.colorPool[count]+'"  onClick="('+ self.setColor +')(\''+ this.colorPool[count]+'\')">&nbsp;</td>';
                count++;
            }
            html+= "</tr>";
        }
        html+= '</table>';
        
        this.trigger = document.getElementById(idStr);
        
        this.div = document.createElement('div');
        this.div.innerHTML = html;
        this.div.id = 'myColorPicker';
        this.div.style.position = 'absolute';
        
        this.div.style.left = 0;
        
        this.trigger.parentNode.appendChild(this.div);
        this.hide();
        this.trigger.onclick = function(){
            if(self.div.style.display == 'none'){
                self.show();
                return false;
            }else{
                self.hide();
                return false;
            }
        }        
    }
    colorPicker.prototype.setColor = function(c){
        
        proEditor.setColor(c);
        
    }
    colorPicker.prototype.hide = function(){
        this.div.style.display = 'none'
    }
    colorPicker.prototype.show = function(){
        this.div.style.display = 'block'
    }function $(str){return document.getElementById(str)}
    function a_addEvent(oElm , strEvent , fuc) {
        strEvent = strEvent.replace(/^on/i , '') ;
        if(window.attachEvent)
            oElm.attachEvent('on' + strEvent , fuc) ;
        else 
            oElm.addEventListener(strEvent , fuc , false) ;
    }
    function stopEvent(evt , type){
        if (evt.preventDefault) {
            if(type == 'v' || type == null) evt.preventDefault();
            if(type == 'b' || type == null) evt.stopPropagation();
        }
        else{
            if(type == 'v' || type == null) evt.returnValue = false;
            if(type == 'b' || type == null) evt.cancelBubble = true;     
        }
    }
    // ======================= 编辑器  =======================
    var proEditor =  {    ed  : null ,
        
        edt : null,
        
        storeBak : '',    set : function(s , v) {        this.ed.focus() ;
            this.ed.document.execCommand(s,false,v||null);
            
        } ,    display : function(ele , type , event) {
            this.hide(ele) ;
            switch(type) {
                case 'color' :
                    break ;
            
            }
        } ,    hide : function(ele) {
        } ,    onload : function(content) {
            var test = new colorPicker() ;
            test.initialize('dlg_setColor');
            
            content = content || '' ;
            this.ed = document.getElementById("ifm_editarea").contentWindow;
            this.edt = document.getElementById("ifm_editarea").contentWindow.document;        try{
                this.ed.document.designMode = 'On';
                this.ed.document.contentEditable = true;
            }
            catch(e) {
                alert('目前只支持IE5.5,Firefox1.0+')
            }        this.ed.document.open();
            this.ed.document.writeln('<html><head><style type="text/css">body { margin: 0; padding: 0px;}</style></head><body>' + content + '</body></html>')
            this.ed.document.close();
            var thisObj = this ;
            a_addEvent(document , "onclick" , function() {thisObj.hide()}) ;
            a_addEvent(this.ed.document , "onclick" , function() {thisObj.hide()}) ;        
        } ,    setColor : function(color) {
            
            this.set('forecolor'  , color) ;
            
            document.getElementById('myColorPicker').style.display = 'none'
        } ,     editorHTML :         '<div id="td_editor" style="margin:0 auto;width:645px">' +
                              '<ul id="toolbar" onclick="stopEvent(event , \'b\')" >' +
                             
                             
                              '<li style="position: relative;"><a  href="javascript://" id="dlg_setColor" onclick="proEditor.display(this,\'color\' , event)" title="颜色"><img border="0" width="169" height="35" alt="点击更换文字颜色" title="点击更换文字颜色" src="" /></a></li>' +
                             
                              '</ul>' +
                              '<iframe id="ifm_editarea" src="about:blank" frameborder="0"></iframe>' +
                              '</div>' +
                        
                            '</div>'+
                              '<div class="rBot"></div></div>',        
            create : function(){
                
                var div = document.createElement('div');
                div.innerHTML = this.editorHTML;
                
                    document.body.appendChild(div)    
                
                div.style.position = 'absolute';
                div.style.left = 0;
                div.style.top = 0;
                proEditor.onload();
            }
            }
        </script><script type="text/javascript">
        proEditor.create();
        
        
    </script></body>
    </html>
      

  3.   

    this.ed.focus() ;IE 一设置 focus 就重新设定你的选中啦
      

  4.   

    a.doc.execCommand('useCSS',false,true);
    a.frame.focus()IE 的设置颜色要这样写
      

  5.   

    谢谢JaggerLee ！ 去掉 this.ed.focus() ; 能解决光标跳文档开头的问题。可是，改变选中颜色还是不行啊
      

  6.   

    JQuery 里这样写的//a.iframe.rng 判定是否被选中
    if(a.iframe.rng)
        a.iframe.rng.select();//$.browser.msie 判定是否IE
    if(!$.browser.msie)
        a.doc.execCommand('useCSS',false,false);a.frame.focus();
    a.doc.execCommand(this.colorcmd,false,b);if(!$.browser.msie)
    a.doc.execCommand('useCSS',false,true);
    a.frame.focus()
      

  7.   

    还是没有解决。 csdn 的帖子不能编辑真郁闷。代码少了一个引号，不能改。代码重新粘贴在了3楼，谢谢各位。
      

  8.   

    貌似根源在于这里： this.ed.focus() ;
    其实不然．
    当浏览者在点击你的图片按按扭的时候，焦点就已经不在浏览器上了．
    而恰恰IE没有给提供记住焦点的功能．
    LZ要是想做一个大型的editor建议将焦点缓存起来（譬如放在你的proEditor 中）以便以后应付更复杂的焦点问题．
    但是，LZ这个可以给你的按扭和弹出层用＂不获取焦点＂的属性 unselectable="on"来解决．
    如：<a  href="javascript://" id="dlg_setColor" onclick="proEditor.display(this,\'color\' , event)" title="颜色"><img border="0" width="169" height="35" alt="点击更换文字颜色" title="点击更换文字颜色" src="" /></a>
    其实可以不用a标签，直接
    <img border="0" width="169" height="35"　id="dlg_setColor" onclick="proEditor.display(this,\'color\' , event)"  alt="点击更换文字颜色" title="点击更换文字颜色" src=""  style="cursor:pointer;"  unselectable="on"/>还有弹出层上：
    html+= '<td align="center" width="20" height="20" style="background:'+ this.colorPool[count]+'"  onClick="('+ self.setColor +')(\''+ this.colorPool[count]+'\')" unselectable="on">&nbsp;</td>';
     
      

  9.   

    然后如楼上所说将focus方法放下面．
    this.ed.document.execCommand(s,false,v||null);
             this.ed.focus(); 
      

  10.   

    zowell  麻烦告诉我一下 js 怎么保存选中信息,怎么恢复选中信息
    谢谢
      

  11.   

    在网景中：选区为var sel=window.getSelection();
             选中范围为　sel.getRangeAt(0);
    　　　　　在选中范围内可以有相应的一些方法．比如insertNode ，cloneRange 等等．
    　　　　　可以将选中范围或选区放在外部变量或特定存储区域中，以便后来再用．
    　　　　　具体方法参见mozilla的文档．
    在IE中就比较熟悉了．
    　　　　　但是选区不在window域下，而在document下
                  var sel=document.selection;
             选中范围为　range = sel.createRange();
    　　　　　在选中范围内可以有相应的一些方法．比如pasteHTML，select等等(不和mozilla一样的)．总之要做好兼容很麻烦．建议为他做个适配器，将方法统一出来
      

  12.   

    看看这个吧 希望对你有帮助 ~ http://bbs.blueidea.com/thread-2891476-1-1.html ~ 要做编辑器 建议先阅读一些现成的简单 editor 的源码，会比较有帮助：）
      

  13.   

    十分感谢zowell，回答得很细致，说到了根源与点子上! 另外也谢谢各位！