Jeditable 및 Autogrow를 사용하는 문제

StackOverflow https://stackoverflow.com/questions/152104

문제

나는 WebProject를 사용하여 작업합니다 jQuery 그리고 Cakephp. 나는 사용한다 제시 가능 안락 편집 플러그인으로. TextAreas의 경우 The를 사용하여 확장합니다 자동 검토 플러그인.

글쎄, 나는 이것에 두 가지 문제가있다 :

  • 첫째, AutoGrow는 IE, Safari, Opera 및 Chrome이 아닌 Firefox에서만 작동합니다.
  • 둘째, Jeditable을위한 콜백 이벤트가 필요합니다. 스크롤 바

나는 JavaScript에 익숙하지 않으므로이 두 라이브러리를 내 자신으로 확장/수정할 수 없습니다. 자동 성장 Textareas (Tinymce와 같은 완전한 편집자가 없으므로 일반 텍스트를위한 솔루션이 필요하지 않음)와 함께 Intpace 편집에 다른 JS-Library를 사용한 사람이 있습니까?

나는 또한 발견했다 성장 필드, 그것은 다른 브라우저에서 효과가 있지만, 제시 가능한 통합은 없습니다 ...

(내 영어로 죄송합니다)

도움이 되었습니까?

해결책

나는 모든 브라우저에서 autogrow와 함께 Autogrow를 사용하는 데 아무런 문제가 없었지만 여기에는 Jeditable이있는 Growfield의 구현이 있습니다. Jeditable 용 AutoGrow 플러그인과 같은 방식으로 작동합니다. Jeditable을위한 특수 입력 유형을 만들고 .growfield ()를 적용합니다. 필요한 자바 스크립트는 아래에 있으며 데모는 여기에서 찾았습니다.

<script type="text/javascript">
/*  This is the growfield integration into jeditable
    You can use almost any field plugin you'd like if you create an input type for it.
    It just needs the "element" function (to create the editable field) and the "plugin"
    function which applies the effect to the field.  This is very close to the code in the
    jquery.jeditable.autogrow.js input type that comes with jeditable.
 */
$.editable.addInputType('growfield', {
    element : function(settings, original) {
        var textarea = $('<textarea>');
        if (settings.rows) {
            textarea.attr('rows', settings.rows);
        } else {
            textarea.height(settings.height);
        }
        if (settings.cols) {
            textarea.attr('cols', settings.cols);
        } else {
            textarea.width(settings.width);
        }
        // will execute when textarea is rendered
        textarea.ready(function() {
            // implement your scroll pane code here
        });
        $(this).append(textarea);
        return(textarea);
    },
    plugin : function(settings, original) {
        // applies the growfield effect to the in-place edit field
        $('textarea', this).growfield(settings.growfield);
    }
});

/* jeditable initialization */
$(function() {
    $('.editable_textarea').editable('postto.html', {
        type: "growfield", // tells jeditable to use your growfield input type from above
        submit: 'OK', // this and below are optional
        tooltip: "Click to edit...",
        onblur: "ignore",
        growfield: { } // use this to pass options to the growfield that gets created
    });
})

다른 팁

Knight_Killer: AutoGrow가 Firefox에서만 작동한다는 것은 무엇을 의미합니까? 방금 FF3, FF2, Safari, IE7 및 Chrome으로 테스트했습니다. 그들 모두와 잘 작동합니다. 오페라를 사용할 수 없었습니다.

알렉스: Growfield Jeditable Custom Input에 대한 다운로드 링크가 있습니까? 내 블로그에서 연결하고 싶습니다. 정말 훌륭합니다!

미카 투 폴라: 내 수정 된 Jeditable (두 개의 콜백 이벤트 추가)에 관심이 있으시면 여기에 가져 가십시오. 공식 버전의 Jeditable에서 이러한 이벤트를 제공한다면 좋을 것입니다!

다음은 (단순화 된) 통합 코드입니다. 나는 호버 효과만을 위해 이벤트를 더 많이 사용합니다. 그것은 단지 하나의 usecase입니다.

$('.edit_memo').editable('/cakephp/efforts/updateValue', {
  id            : 'data[Effort][id]',
  name          : 'data[Effort][value]',
  type          : 'growfield',
  cancel        : 'Abort',
  submit        : 'Save',
  tooltip       : 'click to edit',
  indicator     : "<span class='save'>saving...</span>",
  onblur        : 'ignore',
  placeholder   : '<span class="hint">&lt;click to edit&gt;</span>',
  loadurl       : '/cakephp/efforts/getValue',
  loadtype      : 'POST',
  loadtext      : 'loading...',
  width         : 447,
  onreadytoedit : function(value){
    $(this).removeClass('edit_memo_hover'); //remove css hover effect
  },
  onfinishededit : function(value){
    $(this).addClass('edit_memo_hover'); //add css hover effect
  }
});

알렉스 감사합니다! Growfield-Plugin이 작동합니다. 그 동안 나는 다른 문제를 해결할 수있었습니다. 나는 다른 것을 가져 갔다 스크롤 라이브러리 콜백 이벤트를 제시 가능한 플러그로 해킹했습니다. 내가 생각했던 것처럼 그렇게 어렵지 않았습니다 ...

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top