Colorbox 中的 CKEditor 加载不起作用 [ Google Chrome ]

发布于 2024-12-16 14:08:29 字数 2327 浏览 2 评论 0原文

我在我的项目中使用 Colorbox。我已将 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>

问候尼沙德·阿利亚尔

原文

I am using Colorbox in my project. I have integrated CKEditor in colorbox. Its working fine in all browsers, but a small issue in Google Chrome - Editor will open properly on first click, After closing the pop up and try the editor on second time without loading the page , I can't type text in the editor, Editor will enable on clicking on the source. I am not using the source toolbar in basic editor.

I spent more than 5 days for for finding a solution for this issue and try help from others - No result yet. Expecting better feedback...

Thanks for help in advance.

I have set up a test code for this...
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>

Regards
Nishad Aliyar

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不打扰别人 2024-12-23 14:08:30

我得到了相同的解决方案，只需在 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

I got the solution for the same , just include the jquery and jquery adapter in index2.html. Please see below for example...

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>

Regards

Nishad Aliyar

回复收藏 0 原文

~没有更多了~