使用可編輯和自動增長的問題

Question

我使用jQuery和CakePHP開發Web項目。 我使用jeditable作為就地編輯插件。 對於textareas，我使用autogrow插件對其進行擴展。

好吧，我對此有兩個問題：

• 首先，自動增長僅適用於Firefox，不適用於IE，Safari，Opera和Chrome。
• 其次，當jeditable完成顯示edit-component時，我需要一個回調事件來重新計算滾動條

我不太熟悉Javascript，因此我無法自行擴展/更正這兩個庫。 是否有人使用自動擴展的textareas使用其他js庫進行就地編輯（沒有像TinyMCE這樣的完整編輯器，我需要一個純文本解決方案）？

我還找到了Growfield ，它可以在其他瀏覽器上使用，但是沒有可編輯的集成...

（對不起我的英語不好）

Answer 1

在任何瀏覽器中使用帶有jeditable的Autogrow時，我都沒有看到任何問題，但這是帶有jeditable的Growfield的實現。 它的工作方式與jeditable的Autogrow插件相同。 您為jeditable創建了一種特殊的輸入類型，並對其應用.growfield（）。 必要的JavaScript在下面，可以在此處找到演示。

<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
    });
})

Answer 2

knight_killer ：您是什么意思自動增長僅適用於FireFox？ 我剛剛測試了FF3，FF2，Safari，IE7和Chrome。 與他們所有工作正常。 我沒有Opera。

Alex ：您的Growfield可編輯自定義輸入是否有下載鏈接？ 我想從我的博客鏈接它。 真的很棒！

Answer 3

Mika Tuupola ：如果您對我修改過的jeditable（添加了兩個回調事件）感興趣，可以在此處獲取 。 如果您在正式版本的jeditable中提供這些事件，那就太好了！

這是我的（簡化的）集成代碼。 我將事件更多地用於懸停效果。 這只是一個用例。

$('.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
  }
});

Answer 4

謝謝亞歷克斯！ 您的growfield-Plugin可以正常工作。 同時，我設法解決了另一個問題。 我使用了另一個Scroll-Library，並在jeditable-plugin中入侵了一個回調事件。 並不像我想的那么難...