CKEditor/jQuery-UI 모달 대화 상자 안팎으로 데이터 전달하기

Question

인사말, 오버플로!

jQuery-UI 모달 대화 상자에서 CKEditor 인스턴스를로드하는 버튼을 통해 다양한 콘텐츠 블록을 편집 할 수있는 응용 프로그램을 PHP로 작성했습니다.

나는이 스크린 샷과 같이 대화를 시작하기 위해 노력 버튼,있어 :

예는 준비 대화 상자 내부의 '주요 내용'내용을 보여줍니다 편집하다. 내가 현재하고있는 방식은 데모 목적의 해킹입니다. 숨겨진 #dialog div에 하드 코딩 된 콘텐츠가 복제되어 있습니다.

'Edit Main Content'버튼을 누르면 모든 컨텐트 (HTML, Styling, Etc)가 jQuery에 의해 편집을 위해 CKEditor 인스턴스에 전달되도록 할 수 있어야합니다. 대화 상자에서 '저장/전송'버튼을 누르면 변경 내용이 Ajax를 통해 저장되고 편집중인 페이지로 다시 전달됩니다.

이 질문의 범위를 벗어나는 WordPress Ajax API를 사용해야하므로이 시점에서 Ajax 비트가 너무 걱정되지 않습니다.

'주 콘텐츠 수정'버튼을 클릭하면 'Main_Content'div -into- #dialog의 데이터를 전달한 다음 #dialog 창에서 수정 된 데이터를 다시 전달합니다. 'Save Changes'버튼을 누른 후 'Main_Content'div를 누릅니다.

도움이 될 것입니다. 나는 완전히 붙어있다.

감사합니다. 당신이 html 기능을 찾고있는 것처럼

~ PF는

Answer 1

는 소리. '편집 주요 내용'버튼을 클릭하면

는 #dialog -into- 'Main_Content'사업부에서 데이터를 전달하려면 :

$('#edit-main-content-button').click(function() { 
    var content = $('#Main_Content').html(); 
    $('#dialog').html(content); 
}); 

가에 #dialog 창에서 편집 한 데이터를 다시 전달하려면 '변경 사항 저장'버튼을 누르면 'Main_Content'div가 다음과 같이 표시됩니다.

$('#dialog').dialog({ 
    /* 
    your other settings/buttons 
    */ 
    buttons: { 
     'Save Changes': function() { 
      // TODO: submit changes to server via ajax once its completed: 
      var content = $(this).html(); 
      $('#Main_Content').html(content); 
      $(this).dialog('close'); 
     } 
    } 
});