Question

So, I’m working with CKEditor and jQuery, trying to build a pop-out editor.
Below is what I have coded so far, and I can’t seem to get it working the way I want it to.
Basically, click the ‘Edit’ link, dialog box pops up, with the content to edit loaded into the CKEditor.

Also, not required, but helpful if you can suggest how to do it. I can’t seem to find out how to make the save button work in CKEditor (though I think the form will do it).

Thanks in advance for any help.

$(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

After doing some more digging and research, I have hacked together a working solution to my problem. I’m posting here in case anyone else needs to do something like this:

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;
    });
});