jquery UI에서 항목을 정렬 할 때 편집 가능한 영역이 사라집니다.

Question

제목이 이상하게 들릴 수 있습니다. 음, 그렇습니다. 여기

내 코드의 근사치입니다 (이것은 다른 물건을이 예를 들어, 일부 쓸모없는 아약스 호출이 부족하고, 단순화) : http://jsfiddle.net/pKNAz/3/

는 (이 경우 드래그 할 수있는 항목의 목록이 있다고 가정 만 드래그 할 수있다 드롭 존 (예 : 회색 사각형)으로 이동할 수있는 텍스트 상자를 추가 한 다음 드롭 다운 후 jwysiwyg 라이브러리를 사용하여 wysiwyg로 변환합니다 (필자는 "Wysiwyg 추가"라고 함). 모든 이미지를 추가하고이 플러그인 사용을 css하지만 textarea 기본 비헤이비어 (ctrl + b, ctrl + i, ctrl + u)가 작동하므로 작동한다고 가정 할 수 있습니다.

특히 낙하시에 효과적입니다. 그러나 그것은 정렬 할 때 jwysiwyg를 깨는 것으로 변합니다. 두 개의 검은 색 손잡이가있는 상태에서 어두운 회색 핸들을 드래그하여 직접 시도해 볼 수 있습니다. 당신이 분류 한 이력이 잃어버린 것을 볼 수 있습니다. $('textarea.overflow').val()을 검색하여 텍스트 영역에서 이전에 작성한 올바른 값을 얻을 수 있지만 더 이상 jwysiwyg를 사용할 수 없습니다.

아무도이 문제를 해결하는 방법에 대한 아이디어가 있습니까? 미리 감사드립니다.

Answer 1

좋아, 해결책을 얻었습니다. (귀하의 진드기를 제거해 주셔서 죄송합니다.) iframe 영역과 정렬 이벤트의 조합으로 인해 문제가 발생한 경우 왜 wysiwygs를 새로 고치는 것이 좋을지 궁금했습니다. ,

$("#sortable").sortable({ 
    stop : function(event, ui){ 
     refreshTextareas(); 
    } 
}); 

그래서, 경우에 당신이 물건을 분류 :

function refreshTextareas() 
{ 
    $('textarea.autogrow').wysiwyg('destroy'); 
    $("textarea.autogrow").wysiwyg({ 
     autoGrow: true, 
     rmUnusedControls: true, 
     controls: { 
      bold: { visible : true }, 
      italic: { visible : true }, 
      insertOrderedList: { visible : true }, 
      insertUnorderedList: { visible : true }, 
      removeFormat: { visible : true }, 
      h1: { visible: true }, 
      link : { visible: true } 
     } 
    }); 
} 

을하고 난 여기가 호출

나는 다음과 같이 jwysiwyg의 파괴 + 건설을 래핑하는 함수를 작성 당신은 그것을 재구성하고 그것과 마찬가지로 다시 작동합니다.

Answer 2

항목을 삭제할 때 wysiwyg 컨트롤이 포함 된 iframe이 비게됩니다. 최소 코드 시나리오는 오류를 재현하므로 jquery/jwysiwyg의 버그처럼 보입니다.

http://jsfiddle.net/6TcM7/2/

보고서 버그 및/또는 WYSIWYG 엔진을 전환합니다.