CKEditor внутри jQuery Dialog, как мне его собрать?

Question

Итак, я работаю с CKEditor и jQuery, пытаюсь создать всплывающий редактор. Ниже приведено то, что я кодировал до сих пор, и я не могу заставить его работать так, как я хочу. По сути, нажмите ссылку «Изменить», появится диалоговое окно с содержимым для редактирования, загруженным в CKEditor.

Также не обязательно, но полезно, если вы можете подсказать, как это сделать. Кажется, я не могу понять, как заставить кнопку сохранения работать в CKEditor (хотя я думаю, что форма сделает это).

Заранее спасибо за любую помощь.

$(document).ready(function(){
    var config = new Array();
    config.height = "350px";
    config.resize_enabled = false;
    config.tabSpaces = 4;
    config.toolbarCanCollapse = false;
    config.width = "700px";
    config.toolbar_Full = [["Save","-","Cut","Copy","Paste","-","Undo","Redo","-","Bold","Italic", "-", "NumberedList","BulletedList","-","Link","Unlink","-","Image","Table"]];

    $("a.opener").click(function(){
        var editid = $(this).attr("href");
        var editwin = \'<form><div id="header"><input type="text"></div><div id="content"><textarea id="content"></textarea></div></form>\';

        var $dialog = $("<div>"+editwin+"</div>").dialog({
            autoOpen: false, 
            title: "Editor", 
            height: 360, 
            width: 710, 
            buttons: {
                "Ok": function(){
                    var data = $(this).val();
                }
            }  
        });
 //$(this).dialog("close");

        $.getJSON("ajax/" + editid, function(data){
            alert("datagrab");
            $dialog.("textarea#content").html(data.content).ckeditor(config);
            alert("winset");
            $dialog.dialog("open");
        });

        return false;
    });
});

Answer 1

После нескольких копаний и исследований я собрал рабочее решение моей проблемы. Я пишу здесь на случай, если кому-то еще понадобится сделать что-то вроде этого:

function redirect(url, outsite){if(outsite){location.href = url;}else{location.href = 'http://siteurl.com/' + url;}}

function editdialog(editid){
    var editwin = '<div><form action="formprocess/'+editid+'" method="post" class="inform"><div id="editorheader"><label for="coltitle">Column Title: </label><input type="text" name="coltitle" id="coltitle"></div><br><div id="editorcontent"><textarea id="ckeditcolcontent"></textarea></div><input type="hidden" value="edit"></form></div>';
    var $dialog = $(editwin).dialog({
        autoOpen: false, title: "Editor", 
        height: 520, width: 640, 
        closeOnEscape: false, modal: true, 
        open: function(event, ui){
            $(this).parent().children().children(".ui-dialog-titlebar-close").hide();
        }, 
        buttons: {
            "Save and Close": function(){
                var editor = $("#ckeditcolcontent").ckeditorGet(); 
                var coltitle = $("#coltitle").val(); 
                var colcontent = $("#ckeditcolcontent").val(); 
                $.post("formprocess/"+editid, {
                        coltitle: coltitle, 
                        colcontent: colcontent
                    }, function(data){
                        redirect(location.href, 1);
                    }
                );
            }, 
            "Cancel": function(){
                redirect(location.href, 1);
            }
        }
    });     

    $.getJSON("ajax/" + editid, function(data){
        $("#coltitle").attr("value", data.header); 
            $("#ckeditcolcontent").val(data.content).ckeditor(config);
            $("<div></div>").addClass("ui-widget-overlay").appendTo(document.body).css({width:$(document).width(),height:$(document).height()});
        $dialog.dialog("open");
    }); 
}

var config = new Array();
config.height = "280px"; 
config.resize_enabled = false; 
config.tabSpaces = 4; 
config.toolbarCanCollapse = false; 
config.width = "600px";
config.toolbar_Full = [["Cut","Copy","Paste","-","Undo","Redo","-","Bold","Italic","Underline", "-", "NumberedList","BulletedList","-","Link","Unlink","-","Image","Table"]];

$(document).ready(function(){
    $("a.admineditlink").click(function(){
        var editid = $(this).attr("href"); 
        editdialog(editid); 
        return false;
    });
});