jquery - jQuery 对话框中的 CKEditor，如何构建它？

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