jQuery對話框中的CKEditor，我該如何構建它？

所以，我正在與CKEditor和jQuery合作，嘗試構建一個彈出式編輯器。下面是我編碼到目前爲止，我似乎無法得到它按我想要的方式工作。基本上，點擊'編輯'鏈接，彈出對話框，將要編輯的內容加載到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; 
    }); 
});

來源

2010-03-12 Ben Dauphinee

在做了一些更深入的挖掘和研究之後，我一起攻擊了我的問題的工作解決方案。我在這裏發帖，以防其他人需要這樣做：

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

來源

2010-03-12 21:27:33

jQuery對話框中的CKEditor，我該如何構建它？

回答

相關問題