2013-03-14 4 views
3

나는 colorbox를 통해 표시되는 팝업에 wysiHtml5 텍스트 영역이 있습니다는 colorBox에서 텍스트 영역을 wysihtml5을 가져올 수 없습니다

$j.colorbox({ 
       inline: true, 
       href: "#popup", 
       scrolling: false, 
       onLoad: function() { 
        $('#cboxClose').remove(); 
       }, 
       onCleanup: function() { 
        $j("div#popup").hide(); 

       }, 
       onClosed: function() { 
        editor = null; 
       }, 
       onComplete: function() { 

        var editor = new wysihtml5.Editor("wysiwygText", { // id of textarea element 
         toolbar: "wysihtml5-toolbar", // id of toolbar element 
         parserRules: wysihtml5ParserRules, // defined in parser rules set 
         stylesheets: ["Styles/wysihtml5.css", "Styles/wysihtml5.css"] 
        }); 


       } 
      }); 

에디터 잘 최초의 작동을 colorbox가 튀는 시간. 그러나 닫히고 다시 열린 경우 사용자는 편집기를 클릭 할 수 없습니다.

에디터 개체를 다시 만들려고하는 것과 관련이 있는지 궁금합니다. 문제는 컬러 박스가 시작되기 전에 컬러 박스를 만들면 컬러 박스가 시작될 때 편집기가 깨지게된다는 것입니다. (예 : #popup을 표시하도록 설정하면 페이지가로드 될 때 편집 할 수 있지만 색상 상자를 실행하면 다시 내용을 편집 할 수 없습니다.

동작은 텍스트를 볼 수 있습니다. 지역,하지만 난 그것을 "에 클릭"수 없습니다.

답변

2

이것은 도움이되지 않을 수도 있지만 이런 문제가 있습니다. 요소가 대화 상자로 설정된 후에 편집기를 작성해야했습니다.

   $(".addtext").click(function(){ 

        $("#editorcontainer").dialog({ 
         width: 737 
        }); 

        (function($){ 
         $("#wysihtml5-textarea").wysihtml5(); 
        })($1_7_2); 

       }); 

유일한 문제는 대화 상자가 동시에 열리는 wysihtml5 편집기의 복제입니다. 내가 고칠 때 나는 다시 게시 할 것이다.

편집 : 아마 무슨 일이 벌어지는 지 이해하려면 wysihtml5 코드를 읽어야 할 시간이 필요 하겠지만 지금은 너무 많은 시간을 소비하지 않습니다. wysihtml5()가 호출 될 때마다 편집자가 dom 요소를 생성하고 있음을 알게되었습니다. 이것은 복제 된 요소를 만들고 있었기 때문에 컨테이너 요소를 사용하고 대화 상자가 열릴 때 내부 내용을 만들고 대화 상자가 닫힐 때 내부 내용을 파괴하는 것이 아이디어입니다. 필자는 프로그래머가 자신의 디자인을 문서화하지 않을 때 정말 싫어한다.

//button click event 
$(".addtext").click(function(){ 
     $("#editorcontainer").dialog({ 
      width: 737, 

      open: function(event, ui){ 
        //create inner html 
        $(this).html("<form><textarea id=\"wysihtml5-textarea\" \ 
        placeholder=\"Enter your text ...\" \ 
        autofocus></textarea></form>"); 
      }, 

      close: function(event, ui){ 
        //remove inner html 
        $(this).html(""); 
       } 

      }); 

      //older version of jQuery aliased to $1_7_2 
      (function($){ 
       //invoke the editor 
       $("#wysihtml5-textarea").wysihtml5(); 
      })($1_7_2); 

}); 
+0

JQuery Dialog를 사용 했습니까? (아직 시도하지는 않았지만 다음 단계였습니다) – Ben

+0

예, Fyi, bootstrap-wysihtml5를 사용하고 있습니다. [link] (https://github.com/) jhollingworth/bootstrap-wysihtml5) – MageNewbie

0

를이 기능을 제거하고 팝업이 닫힐 때 에디터 인스턴스를 파괴하지 않으면 어떻게.

onClosed: function() { 
    editor = null; 
} 

당신이 오류에 있나요

+0

onClosed 함수를 제거하면 같은 문제가 발생하지 않습니다. :-( – Ben

관련 문제