我在使用jQuery和CakePHP的Web项目上工作。我将jeditable用作就地编辑插件。对于textareas，我使用autogrow插件对其进行扩展。

好吧，我对此有两个问题：

• 首先，自动增长仅适用于Firefox，不适用于IE，Safari，Opera和Chrome。
• 其次，当jeditable完成显示edit-component时，我需要一个回调事件来重新计算滚动条

我对Java语言不是很熟悉，所以我不能自己扩展/更正这两个库。有没有人使用另一个js库通过自动增长的文本区域进行就地编辑(没有像TinyMCE这样的完整编辑器，我需要一个纯文本解决方案)？

我还找到了Growfield，它可以在其他浏览器上使用，但是没有可编辑的集成...

(对不起我的英语不好)

解决方案

在任何浏览器中使用带有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
    });
})

谢谢亚历克斯！growfield-Plugin可以正常工作。
同时，我设法解决了另一个问题。我使用了另一个Scroll-Library，并在jeditable-plugin中入侵了一个回调事件。这并不像我想的那么难...

knight_killer：我们是什么意思自动增长只能与FireFox一起使用？我刚刚测试了FF3，FF2，Safari，IE7和Chrome。与他们所有工作正常。我没有Opera。

亚历克斯：Growfield可编辑自定义输入是否有下载链接？我想从我的博客链接它。真的很棒！

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