0

我正在我的页面上使用 jquery 适配器和 ckeditor 进行一些 php 编程。让我展示一下我所拥有的。我正在处理的页面是 index.php

一个 jquery 适配器：

    function sendid(id)
     {
    jQuery('#mydiv').showLoading();
    $.ajax({
        type: "POST",
        url: "",
        data: id,
        error: function(){

          alert('error');
      },
      success: function(data){
        jQuery('#mydiv').hideLoading();
            $('#mydiv').html(data);
  }
  });
}
}

该函数向 index.php 发送一个 id。有了这个 ID，我正在获取我的数据库并获取一些记录。有了我得到的记录，我通过 ckeditor 显示它，如下所示：

          <?php
            $ckeditor = new CKEditor();
            $ckeditor->basePath  = 'ckeditor/' ;
            CKFinder::SetupCKEditor( $ckeditor, 'ckfinder/' ) ;
            $config['height'] = '300';
            $initialValue = $queryresult['content'];
            $ckeditor->editor('FCKeditor1', $initialValue, $config);
        ?>

每当我单击调用 sendid() 函数的按钮时，ckeditor 就会出现在 id 列表上方。当我第一次调用 sendid() 函数时，它可以正常工作并将记录放入 ckeditor。但是我第二次调用 sendid() 函数 ckeditor 消失了。

我在此链接中找到了一个主题：

CKEditor 实例已经存在

但对我来说，将链接中提到的代码放在哪里变得非常困难。据我了解，每次单击将 id 发送到 sendid() 函数的按钮时，我都必须杀死或销毁编辑器。但是，每当我将 destroy 或 kill ckeditor 放入 sendid() 函数时，它都不起作用。

你能帮我解决这个问题吗？

4

2 回答 2

2

请从http://ckeditor.com/download下载最新的 CKEditor 。在您的服务器上解压缩它，以便您可以运行它，例如http://localhost/ckeditor_test/（在您喜欢的任何地方）。

现在，将以下代码保存在所有编辑器文件已解压缩（等）的同一目录中ckeditor.js，并保存为.ckeditor_php5.phpindex.php

打开网站并享受单击按钮的乐趣。该示例（实际上是沙盒）将让您了解如何动态替换编辑器并销毁现有实例以避免冲突。

<?php if ( $_SERVER[ 'REQUEST_METHOD' ] === 'POST' ): ?>
    <?php
        include( 'ckeditor_php5.php' );

        $ckeditor = new CKEditor();
        $ckeditor->editor( $_POST[ 'id' ], 'This is my initial value!', array(
            'height' => '300'   // Config to be used
        ));
    ?>
<?php else: ?>

    <!DOCTYPE html>
    <html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    </head>
    <body>
        <div id="mydiv" style="outline: 2px dashed orange; padding: 20px; margin: 0 0 20px;">
            This is where the editor will be loaded.
        </div>
        <button id="load" type="submit">Load the editor via AJAX!</button>
        <script>

            (function( $ ) {
                var id = 'idOfTheEditor';

                $( '#load' ).on( 'click', function() {
                    $.ajax({
                        type: 'POST',
                        url: 'index.php',
                        data: {
                            id: id
                        },
                        error: function(){
                            console.log( 'Error?' );
                        },
                        success: function( data ) {
                            if ( window.CKEDITOR && CKEDITOR.instances[ id ] ) {
                                console.log( 'Desytroying an existing instance!' );
                                CKEDITOR.instances[ id ].destroy();
                            }
                            $( '#mydiv' ).html( data );
                        }
                    });
                });

            })( jQuery );

        </script>
    </body>
    </html>
<?php endif ?>

您最终可以像这样封闭，$( '#mydiv' ).html( data )以setTimeout查看您的代码以“慢动作”运行：

setTimeout( function() {
        $( '#mydiv' ).html( data );
}, 1000 );

玩得开心！

于 2012-09-18T12:03:15.833 回答
1

我相信你的 jQuery 代码应该看起来像这样才能使补丁工作：

function sendid(id)
     {
    jQuery('#mydiv').showLoading();
    $.ajax({
        type: "POST",
        url: "",
        data: id,
        error: function(){

          alert('error');
      },
      success: function(data){
        jQuery('#mydiv').hideLoading();

        var instance = CKEDITOR.instances['FCKeditor1'];
        if(instance) {
            instance.destroy(true);
        }
        CKEDITOR.replace('FCKeditor1');

        $('#mydiv').html(data);
  }
  });
}
}
于 2012-09-18T08:48:00.190 回答