Ckeditor和Lightbox不起作用

时间:2015-05-08 06:00:42

标签: jquery ckeditor lightbox frontend web-deployment

美好的一天!我通过这个http://ckeditor.com/addon/lightbox指令做了所有事情,但是我总是产生这个错误(当按下按钮灯箱时):未捕获的TypeError:无法读取属性' split'未定义的

代码:

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

1 个答案:

答案 0 :(得分:0)

我得到了同样的错误。该插件不起作用。由于没有在dialogs / lightbox.js的第20行定义变量gal,所以发生了这个特殊错误(尽管同样适用于第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而图库标识为test时,它会生成如下代码:

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

我认为上述代码的想法是抓住ckelightboxgallerytest并拆分“test”,这样它就可以把它变成data-lightbox =“test”。