Question

我正在我的页面上使用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 instance already exists

但是对我来说变得非常困难，在哪里放置链接中提到的代码。据我所知，每次单击按钮发送id到sendid（）函数时，我都要杀死或破坏编辑器。但每当我将破坏或杀死ckeditor放入sendid（）函数时，它都无效。

你能帮我解决这个问题。

Answer 1

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

现在，将以下代码保存在所有编辑器文件已解压缩的同一目录中（ckeditor.js，ckeditor_php5.php等）index.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 );

玩得开心！

Answer 2

我相信你的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);
  }
  });
}
}

jquery适配器和ckeditor问题

2 个答案: