CKEditor 在 chrome 的弹出窗口中第二次打开时不可编辑答案

【问题标题】：CKEditor is not editable when opened second time on popup in chromeCKEditor 在 chrome 的弹出窗口中第二次打开时不可编辑
【发布时间】：2011-12-23 07:41:09
【问题描述】：

当我在弹出窗口（颜色框或花式框）中打开 CKEditor 时，它第一次可以正常工作。

第二次关闭并打开弹窗时，内容区域不可点击/编辑，也不显示内容。

但是当我单击“源”按钮然后它在设计视图中可用时会显示内容。这在 IE 和 Firefox 中很好，但问题在于 CHROME。

我已按照CKEditor loading in Colorbox not working [ Google Chrome ] 中所说的进行操作，但我仍然有这个问题。

以下是我的应用程序中的示例代码：

    <html>
<head>
    <title>CKEditor Sample</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="http://ckeditor.com/apps/ckeditor/3.6.2/ckeditor.js?1324772165"></script>

    <link href="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" media="screen" />

    <script type="text/javascript" src="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.js"></script>

    <script type="text/javascript">

        $(function() {
            if (CKEDITOR.instances['taCKEditor']) {
                delete CKEDITOR.instances['taCKEditor'];
            }
            CKEDITOR.config.height = '500px';
            CKEDITOR.config.width = '500px';
            CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR;
            CKEDITOR.config.shiftEnterMode = CKEDITOR.ENTER_P;
            CKEDITOR.config.startupFocus = true;
            CKEDITOR.config.baseFloatZIndex = 9000;
            CKEDITOR.replace('taCKEditor',
        {
            uiColor: '#fdd1ad',
            toolbar:
            [
                ['Source', '-', 'NewPage', 'Preview'],
                ['Cut', 'Copy', 'Paste', 'PasteText', '-', 'Print', 'SpellChecker'],
                ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
                '/',
                ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
                ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
                ['Link', 'Unlink', 'Anchor'],
                ['Image', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],
                '/',
                ['Styles', 'Format', 'Font', 'FontSize'],
                ['TextColor', 'BGColor']
            ]
        });

            $("#various1").fancybox({
                'titlePosition': 'inside',
                'transitionIn': 'none',
                'transitionOut': 'none'
            });
        });
    </script>

</head>
<body>
    <a id="various1" href="#inline1" ">Open CKEditor</a>
    <div id="inline1">
        <textarea id="taCKEditor" name="taCKEditor" rows="2" cols="5">This is the sample text inside CKEditor</textarea>
    </div>
</body>
</html>

【问题讨论】：

链接将有助于查看问题
@JFK，我已将示例包含在问题中。
有没有人解决这个问题？ CHROME 还是有问题。
这有帮助：在 replace() 之后使 CKEDITOR.instances["ckeditor"].setData( CKEDITOR.instances["ckeditor"].getData );

标签： jquery fancybox ckeditor colorbox

【解决方案1】：

您需要创建表单并在表单内插入文本区域。将 fancybox 分配给表单 ID。在 javascript 触发器中单击表单。在 fancybox 回调 beforeLoad 中使用 CKEditor 加载器，它将检查实例是否存在，如果不存在，它将删除它。在 beforeLoad 中从 html 块加载到 ckeditor 内容。

【讨论】：

【解决方案2】：

我想我以前遇到过同样的问题。你试过CKEDITOR.replace()。例如：

CKEDITOR.replace('taCKEditor');

然后执行CKEDITOR.instance。

或者您不认为delete 会导致问题。无论如何，我只是假设。

【讨论】：