JQuery DOM AJAX проблема с Ckeditor - PullRequest
       12

JQuery DOM AJAX проблема с Ckeditor

2 голосов
/ 17 декабря 2011

Я понимаю, что, возможно, я делаю это совершенно неправильно, но вот моя проблема ...

Я использую jQuery, чтобы получить заполненную форму (для редактирования содержимого) с помощью ajax.Эта форма содержит текстовое поле, которое я заменяю на CKEditor.Это начинается, когда вы выбираете запись, которую хотите редактировать, из выпадающего списка.Затем он извлекает соответствующую информацию из базы данных и заполняет форму, которая отправляется обратно, и мой код помещается в div.

Сначала у меня была форма на статической странице, когда jQuery + ajax перетягивал данные взаполните поля.Но это не обновит CKEditor с содержимым textarea.Затем я заставил ajax возвращать всю форму, а не только данные, и мой jQuery поместил форму на страницу.Это работает в первый раз, когда вы выбираете что-то для редактирования, но если вы затем изменяете то, что редактируете, CKEditor не заменяет текстовое поле, и я получаю сообщение об ошибке javascript:

i.contentWindow isnull

в моем файле ckeditor.js.

Вот мой сценарий (причина в том, что есть так много закомментированных частей, потому что я много чего пробовал, чтобы заставить это работать...):

<script type="text/javascript">
//$(document).ready(textEditor());
$("select#news").change(function(){
    if ($(this).val() != "NULL"){
        $.ajax({
            url: "/?r=Content_News_Edit",
            global: false,
            type: "POST",
            data: {news_id : $("option:selected",this).attr('value')},
            dataType: "html",
            async:false,
            success: function(data){
                $("div#fillContent").html(data);
            /*  //create jquery object from the response html
                var $response=$(data);

                //query the jq object for the values
                $("input#news_id").val($response.filter("div#news_id").text());
                $("input#news_heading").val($response.filter("div#news_heading").text());
                $("input#news_body").text($response.filter("div#news_body").text());
            */  
                textEditor();
            }
        });
    }
});

function textEditor(){
    var instance = CKEDITOR.instances['news_body'];
    if(instance){
        instance.destroy();
    }
    instance = null;

    CKEDITOR.replace( 'news_body',{
        height              : "600",
        width               : "550",
        filebrowserBrowseUrl        : '<?=$system['resource']?>/ckeditor/ckfinder/ckfinder.html',
        filebrowserImageBrowseUrl   : '<?=$system['resource']?>/ckeditor/ckfinder/ckfinder.html?Type=Images',
        filebrowserFlashBrowseUrl   : '<?=$system['resource']?>/ckeditor/ckfinder/ckfinder.html?Type=Flash',
        filebrowserUploadUrl        : '<?=$system['resource']?>/ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
        filebrowserImageUploadUrl   : '<?=$system['resource']?>/ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
        filebrowserFlashUploadUrl   : '<?=$system['resource']?>/ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
    });
};
</script>

Помощь очень признательна.

решена

Наконец-то разобралась.Вот мой код:

<script type="text/javascript">
$("select#news").change(function(){
    if ($(this).val() != "NULL"){
        $.ajax({
            url: "/?r=Content_News_Edit",
            global: false,
            type: "POST",
            data: {news_id : $("option:selected",this).attr('value')},
            dataType: "html",
            async:false,
            success: function(data){
                //create jquery object from the response html
                var $response=$(data);

                //query the jq object for the values
                $("input#news_id").val($response.filter("div#news_id").text());
                $("input#news_heading").val($response.filter("div#news_heading").text());
                $("input#news_body").text($response.filter("div#news_body").text());

                var instance = CKEDITOR.instances['news_body'];
                instance.setData($response.filter("div#news_body").text())
            }
        });
    }
});

CKEDITOR.replace( 'news_body',{
    height              : "600",
    width               : "550",
    filebrowserBrowseUrl        : '<?=$system['resource']?>/ckeditor/ckfinder/ckfinder.html',
    filebrowserImageBrowseUrl   : '<?=$system['resource']?>/ckeditor/ckfinder/ckfinder.html?Type=Images',
    filebrowserFlashBrowseUrl   : '<?=$system['resource']?>/ckeditor/ckfinder/ckfinder.html?Type=Flash',
    filebrowserUploadUrl        : '<?=$system['resource']?>/ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
    filebrowserImageUploadUrl   : '<?=$system['resource']?>/ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
    filebrowserFlashUploadUrl   : '<?=$system['resource']?>/ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
});
</script>

Я переместил форму обратно на страницу, которая вызывала метод ajax, и сразу же заменил текстовое поле на CKEditor.Затем запускается ajax, и я помещаю экземпляр CKEditor в переменную.Я ДОЛЖЕН сделать это, иначе я получу сообщение об ошибке "CKEDITOR.instances.news_body не определен".Во всяком случае, тогда я просто использовал переменную для установки данных в экземпляре CKEditor.Изменения данных работают нормально, и отлично сохраняются в базе данных.Надеюсь, это поможет кому-то еще.

Кроме того, я нашел этот ответ в основном точным на Как добавить данные в CKEditor с помощью JQuery от @PanJanek, и проголосовал за его ответ, потому что первоначальный автор ответилего собственный вопрос через 2 часа с ответом ПанДжанека, с добавлением "F5" ... -.-

1 Ответ

0 голосов
/ 17 декабря 2011

(Разместите ответ здесь, чтобы его можно было закрыть.)

Наконец-то разобрался.Вот мой код:

<script type="text/javascript">
$("select#news").change(function(){
    if ($(this).val() != "NULL"){
        $.ajax({
            url: "/?r=Content_News_Edit",
            global: false,
            type: "POST",
            data: {news_id : $("option:selected",this).attr('value')},
            dataType: "html",
            async:false,
            success: function(data){
                //create jquery object from the response html
                var $response=$(data);

                //query the jq object for the values
                $("input#news_id").val($response.filter("div#news_id").text());
                $("input#news_heading").val($response.filter("div#news_heading").text());
                $("input#news_body").text($response.filter("div#news_body").text());

                var instance = CKEDITOR.instances['news_body'];
                instance.setData($response.filter("div#news_body").text())
            }
        });
    }
});

CKEDITOR.replace( 'news_body',{
    height              : "600",
    width               : "550",
    filebrowserBrowseUrl        : '<?=$system['resource']?>/ckeditor/ckfinder/ckfinder.html',
    filebrowserImageBrowseUrl   : '<?=$system['resource']?>/ckeditor/ckfinder/ckfinder.html?Type=Images',
    filebrowserFlashBrowseUrl   : '<?=$system['resource']?>/ckeditor/ckfinder/ckfinder.html?Type=Flash',
    filebrowserUploadUrl        : '<?=$system['resource']?>/ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
    filebrowserImageUploadUrl   : '<?=$system['resource']?>/ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
    filebrowserFlashUploadUrl   : '<?=$system['resource']?>/ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
});
</script>

Я переместил форму обратно на страницу, которая вызывала метод ajax, и сразу же заменил текстовую область на CKEditor.Затем запускается ajax, и я помещаю экземпляр CKEditor в переменную.Я ДОЛЖЕН сделать это, иначе я получу сообщение об ошибке "CKEDITOR.instances.news_body не определено".Во всяком случае, тогда я просто использовал переменную для установки данных в экземпляре CKEditor.Изменения данных работают нормально, и отлично сохраняются в базе данных.Надеюсь, это поможет кому-то еще.

Кроме того, я нашел этот ответ в основном точным на Как добавить данные в CKEditor с помощью JQuery от @PanJanek, и проголосовал за его ответ, потому что первоначальный автор ответилего собственный вопрос через 2 часа с ответом ПанДжанека, с добавлением "F5" ... -.-

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...