2011-11-17 67 views
1

我在我的項目中使用了Colorbox。我已經將CKEditor集成到了colorbox中。它在所有瀏覽器中都能正常工作,但Google Chrome編輯器中的一個小問題將在第一次點擊時正常打開。關閉彈出窗口並在第二次嘗試編輯器時不加載頁面,我無法在編輯器中鍵入文本,編輯器將啓用點擊源。我沒有在基本編輯器中使用源工具欄。CKEditor在Colorbox中加載失效[Google Chrome]

我花了超過5天的時間尋找這個問題的解決方案,並嘗試從別人的幫助 - 沒有結果。期待更好的反饋...

感謝您的幫助提前。

我已經建立了這樣的測試代碼... index1.html

<!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> 
     <script type="text/javascript" src="../ckeditor/_samples/jquery-1.5.1.min.js"></script> 
     <script src="colorbox/jquery.colorbox-min.js"></script> 
     <script type="text/javascript" src="../ckeditor/ckeditor.js"></script> 
     <script type="text/javascript" src="../ckeditor/adapters/jquery.js"></script> 
     <script src="../ckeditor/_samples/sample.js" type="text/javascript"></script> 

     <link rel="stylesheet" href="colorbox.css" /> 
     <link href="../ckeditor/_samples/sample.css" rel="stylesheet" type="text/css" /> 

     <script type="text/javascript"> 
      jQuery(document).ready(function() { 
       jQuery('a.gallery').colorbox({ opacity:0.5 }); 
      }); 
     </script> 

     <style type="text/css"> 

     </style> 
    </head> 
    <body> 
     <a class='gallery' href='index2.html' style="font-size: 30px;">click here for editor</a> 
    </body> 
</html> 

index2.html

<textarea name="ckeditor_replace" id="ckeditor_replace" class="ckeditor_replace"></textarea> 
<script type="text/javascript"> 
    $(document).ready(function() { // I use jquery 
     var instance = CKEDITOR.instances['ckeditor_replace']; 
     if(instance) 
     { 
      CKEDITOR.remove(instance); 
     } 
     //CKEDITOR.config.startupFocus = true; 
     //CKEDITOR.config.startupShowBorders = false; 
     //CKEDITOR.config.startupOutlineBlocks = true; 
     //CKEDITOR.config.startupMode = 'source'; 
     $('.ckeditor_replace').val('12345'); 
     $('.ckeditor_replace').ckeditor(function() { }); 
    }); 
</script> 

問候 Nishad Aliyar

回答

0

我得到了解決同樣,只需在index2.html中包含jquery和jquery適配器即可。請參閱下面的例子...

index1.html

<!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> 
     <script type="text/javascript" src="../ckeditor/_samples/jquery-1.5.1.min.js"></script> 
     <script src="colorbox/jquery.colorbox-min.js"></script> 
     <script type="text/javascript" src="../ckeditor/ckeditor.js"></script> 
     <script type="text/javascript" src="../ckeditor/adapters/jquery.js"></script> 
     <script src="../ckeditor/_samples/sample.js" type="text/javascript"></script> 

     <link rel="stylesheet" href="colorbox.css" /> 
     <link href="../ckeditor/_samples/sample.css" rel="stylesheet" type="text/css" /> 

     <script type="text/javascript"> 
      jQuery(document).ready(function() { 
       jQuery('a.gallery').colorbox({ opacity:0.5 }); 
      }); 
     </script> 

     <style type="text/css"> 

     </style> 
    </head> 
    <body> 
     <a class='gallery' href='index2.html' style="font-size: 30px;">click here for editor</a> 
    </body> 
</html> 

index2.html

<script type="text/javascript" src="../ckeditor/_samples/jquery-1.5.1.min.js"></script> 
<script type="text/javascript" src="../ckeditor/adapters/jquery.js"></script> 

<textarea name="ckeditor_replace" id="ckeditor_replace" class="ckeditor_replace"></textarea> 
<script type="text/javascript"> 
    $(document).ready(function() { // I use jquery 
     var instance = CKEDITOR.instances['ckeditor_replace']; 
     if(instance) 
     { 
      CKEDITOR.remove(instance); 
     } 
     //CKEDITOR.config.startupFocus = true; 
     //CKEDITOR.config.startupShowBorders = false; 
     //CKEDITOR.config.startupOutlineBlocks = true; 
     //CKEDITOR.config.startupMode = 'source'; 
     $('.ckeditor_replace').val('12345'); 
     $('.ckeditor_replace').ckeditor(function() { }); 
    }); 
</script> 

問候

Nishad Aliyar