Ckeditor and Lightbox not work

问题

Good day! I did everything by this http://ckeditor.com/addon/lightbox instruction, but I have always produces this error (when press button lightbox): Uncaught TypeError: Cannot read property 'split' of undefined

code:

<!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>

all scripts loaded - http://take.ms/2Jnx8

Could you please provide a working example?

this is my test project - http://take.ms/OJpKE

回答1:

I get the same error. The plugin doesn't work. This particular error is happening due to the variable gal not being defined on line 20 of dialogs/lightbox.js (although the same would apply to lines 21 and 22). However, even if you check for undefined:

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

...it still doesn't work. I'm pretty sure the problem has to do with this code:

<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>

...because when I use the lightbox and identify the title as test1 and the gallery as test, it generates code like this:

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

I think the idea of the above code is to grab ckelightboxgallerytest and split out "test" so it can turn it into data-lightbox="test."

来源：https://stackoverflow.com/questions/30116763/ckeditor-and-lightbox-not-work

标签

jquery

ckeditor

lightbox

frontend

web-deployment