使用 jeditable 和 autogrow 的问题答案

【问题标题】：Problems using jeditable and autogrow使用 jeditable 和 autogrow 的问题
【发布时间】：2010-09-14 04:55:38
【问题描述】：

我使用jQuery 和CakePHP 从事一个Web 项目。我使用jeditable 作为就地编辑插件。对于 textareas，我使用 autogrow plugin 扩展它。

嗯，我有两个问题：

首先，自动增长仅适用于 Firefox，不适用于 IE、Safari、Opera 和 Chrome。
其次，我需要一个 jeditable 的回调事件，当它完成显示编辑组件时，重新计算 scrollbar

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

我还找到了Growfield，它适用于其他浏览器，但没有可编辑的集成...

（对不起我的英语）

【问题讨论】：

标签： javascript jquery ajax jeditable autogrow

【解决方案1】：

我没有发现在任何浏览器中使用带有 jeditable 的 Autogrow 有任何问题，但这里是带有 jeditable 的 Growfield 的实现。它的工作方式与 jeditable 的 Autogrow 插件的工作方式非常相似。您为 jeditable 创建了一个特殊的输入类型，然后将 .growfield() 应用于它。必要的javascript如下，可以found here做demo。

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

【讨论】：

【解决方案2】：

knight_killer：Autogrow 仅适用于 FireFox 是什么意思？我刚刚用 FF3、FF2、Safari、IE7 和 Chrome 进行了测试。与所有这些都很好。我没有 Opera。

Alex：您的 Growfield Jeditable 自定义输入是否有下载链接？我想从我的博客链接它。真的很棒！

【讨论】：

我不知道究竟是什么错误...当我单击应该可编辑的元素时，我在 Autogrow-Library 的 IE7 中遇到了 javascript-Error。 Texarea 正在显示，但没有自动增长。在其他浏览器上，我没有收到错误消息...

【解决方案3】：

Mika Tuupola：如果你对我修改过的 jeditable（添加了两个回调事件）感兴趣，可以get it here。如果您能在您的 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
  }
});

【讨论】：

【解决方案4】：

谢谢 Alex！ 您的 growfield-Plugin 有效。与此同时，我设法解决了另一个问题。我又拿了一个Scroll-Library 并将一个回调事件入侵到 jeditable-plugin 中。没有我想的那么难……

【讨论】：