jquery UI 포틀릿의 편집 가능한 컨텐츠

Question

편집 가능한 컨텐츠 (예 : 텍스트 영역 또는 선택 상자)가있는 jquery UI 포틀릿을 작성하려고합니다. 지금까지 나는 성공하지 못했습니다.

는이 같은 포틀릿 "의 contentEditable"만들려고 :

<div class="portlet"> 
    <div class="portlet-header">News</div> 
    <div class="portlet-content" contenteditable="true"> 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</div> 
</div> 

포틀릿 내용이으로 잘라 & 붙여 넣기 것들에 의해 다음 변경입니다,하지만 키보드를 통해.

는 또한 텍스트 영역 추가하려고 :

<div class="portlet"> 
    <div class="portlet-header">Feeds</div> 
    <div class="portlet-content"> 
     <textarea>bla bla bla</textarea> 
    </div> 
</div> 

다시 텍스트 영역이으로 잘라 & 붙여 넣기 것들에 의해 변경입니다,하지만 키보드를 통해.

이 작업을 수행하는 예제가 없습니다. 이것이 가능합니까?

누군가 jquery없이이 작업을 수행하는 방법을 알고 있다면 나는 그것에 대해 배울 것이 기쁘다.

Answer 1

나는 jeditable를 사용하여 솔루션을 자신을 발견

자바 스크립트 :

// handle autogrow editable areas in portlets 
    $(".autogrow").editable(function(value, settings) { 
     console.log(this); 
     console.log(value); 
     console.log(settings); 
     return(value); 
     }, { 
     indicator : "Saving...", 
     tooltip : "Click to edit...", 
     type  : 'autogrow', 
     submit : 'OK', 
     cancel : 'cancel', 
     autogrow : { 
       lineHeight : 16, 
       minHeight : 32 
      } 
    }); 

HTML :

<div class="portlet"> 
     <div class="portlet-header">jeditable autogrow portlet</div> 
     <div class="portlet-content" > 
     <div> 
      <pre class="autogrow" id="paragraph1"> 
      editable text area inside of portlet 
      </pre> 
     </div> 
     </div> 
    </div> 

난 아직도 데 유일한 문제는 넣을 수는 없습니다이다 텍스트 커서를 마우스로 해당 위치로 클릭하여 편집 할 수있는 올바른 위치로 커서를 이동하십시오. 편집 모드가되면 키보드로 텍스트 커서 만 이동할 수 있습니다. 포틀릿 외부의 자동 증가 영역에서는 다른 점이 있습니다. 누군가가 그 문제를 해결하는 방법에 대한 힌트가 있다면?

UPDATE : 가 마침내 (포틀릿에서 jeditable 영역 내에서 마우스 클릭을 통해 커서 을 배치 할 수없는) 마지막 문제에 대한 간단한 원인을 발견 그냥 사용하지 않는 "disableSelection을()" 공식 portlet demo에서 사용 된.

$(function() { 
    $(".column").sortable({ 
     connectWith: ".column" 
    }); 

    $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all") 
     .find(".portlet-header") 
     .addClass("ui-widget-header ui-corner-all") 
     .prepend("<span class='ui-icon ui-icon-minusthick'></span>") 
     .end() 
     .find(".portlet-content"); 

    $(".portlet-header .ui-icon").click(function() { 
     $(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick"); 
     $(this).parents(".portlet:first").find(".portlet-content").toggle(); 
    }); 

    //COMMENT THIS OUT: $(".column").disableSelection(); 
});