使用可编辑和自动增长的问题

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中入侵了一个回调事件。 并不像我想的那么难...