2015-05-08 145 views
0

美好的一天!我做這個http://ckeditor.com/addon/lightbox指令的一切,但我一直會產生這個錯誤(當按下按鈕燈箱):遺漏的類型錯誤:無法讀取屬性未定義Ckeditor和燈箱不工作

代碼「分裂」:

<!DOCTYPE html> 
<!-- 
Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved. 
For licensing, see LICENSE.md or http://ckeditor.com/license 
--> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Replace Textarea by Code &mdash; CKEditor Sample</title> 
     <script src="../ckeditor.js"></script> 
     <script src="../jquery-1.11.0.min.js"></script> 
    <link href="sample.css" rel="stylesheet"> 
    <link rel="stylesheet" href="lightbox.css"> 
</head> 
<body> 
    <h1 class="samples"> 
     <a href="index.html">CKEditor Samples</a> &raquo; Replace Textarea Elements Using JavaScript Code 
    </h1> 
    <form action="sample_posteddata.php" method="post"> 
     <div class="description"> 
      <p> 
       This editor is using an <code>&lt;iframe&gt;</code> element-based editing area, provided by the <strong>Wysiwygarea</strong> plugin. 
      </p> 
<pre class="samples"> 
CKEDITOR.replace('<em>textarea_id</em>') 
</pre> 
     </div> 
     <textarea cols="80" id="editor1" name="editor1" rows="10"> 

     </textarea> 
     <script> 


      CKEDITOR.replace('editor1'); 

     </script> 
     <p> 
      <input type="submit" value="Submit"> 
     </p> 
    </form> 
    <div id="footer"> 
     <hr> 
     <p> 
      CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a> 
     </p> 
     <p id="copy"> 
      Copyright &copy; 2003-2015, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico 
      Knabben. All rights reserved. 
     </p> 
    </div> 
<script type="text/javascript"> 
$(document).ready(function(){ ckeLightbox(); }); 
function ckeLightbox(){ 
    var c=0; 
    $('a.ckelightbox').each(function(){ 
     c++; 
     var g=$(this).attr('class').split('ckelightboxgallery')[1]; 
     if(!g)g=c; 
     $(this).attr('data-lightbox',g); 
     $(this).attr('data-title',$(this).attr('title')); 
    }); 
} 
</script> 
</body> 
</html> 

所有腳本加載 - http://take.ms/2Jnx8

您能否提供一個可行的例子?

這是我的測試項目 - http://take.ms/OJpKE

+0

糾正,我連接jquery-1.11.3.min.js然後在 ckeditor.js但錯誤仍然是相同的 – user3331122

+2

嗯,我沒有仔細閱讀你的代碼...我已經重新檢查它:你有'$(this).attr('class')'如果元素具有'class'屬性,則返回'String';如果元素沒有該屬性,則返回undefined。沒有'undefined'的'.split()',因爲它有錯。 [實施例](http://jsfiddle.net/d14u7wsL/)。 – Regent

回答

0

我得到同樣的錯誤。該插件不起作用。由於變量gal沒有在對話框/ lightbox.js的第20行上定義(雖然第21行和第22行也是如此),所以發生了此特定錯誤。但是,即使您檢查未定義:

if(typeof gal !== 'undefined') {gal = gal.split("ckelightboxgallery"); 
gal = gal[1]; 
a.advanced && this.setValue(gal || ""); } 

...它仍然不起作用。我敢肯定的問題與此代碼做:

<script> 
$(document).ready(function(){ ckeLightbox(); }); 
function ckeLightbox(){ 
    var c=0; 
    $('a.ckelightbox').each(function(){ 
     c++; 
     var g=$(this).attr('class').split('ckelightboxgallery')[1]; 
     if(!g)g=c; 
     $(this).attr('data-lightbox',g); 
     $(this).attr('data-title',$(this).attr('title')); 
    }); 
} 
</script> 

...因爲當我使用燈箱,並確定標題爲Test1和畫廊的測試,它會產生這樣的代碼:

<p><a class="ckelightbox ckelightboxgallerytest" href="myimage.jpg" title="test1">myimage.jpg</a></p> 

我認爲上面的代碼的想法是抓住ckelightboxgallerytest並拆分出「測試」,因此它可以把它變成data-lightbox =「test」。