Question

我使用jQuery和CakePHP处理Web项目。我使用jeditable作为内部编辑插件。对于textareas，我使用autogrow plugin扩展它。

嗯，我有两个问题：

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

我对Javascript不太熟悉，所以我无法通过自己扩展/纠正这两个库。有没有人使用另一个js-library进行内部编辑和自动增长textareas（没有像TinyMCE这样的完整编辑器，我需要纯文本解决方案）？

我还发现Growfield，它适用于其他浏览器，但没有可合并的集成......

（对不起我的英文）

Answer 1

在任何浏览器中我都没有看到使用Autogrow和jeditable的任何问题，但这里是一个带有jeditable的Growfield的实现。它的工作方式与jeditable的Autogrow插件的工作方式相同。您为jeditable创建一个特殊的输入类型，并将.growfield（）应用于它。下面是必要的javascript，演示可以是found here。

<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 ：你是什么意思Autogrow只适用于FireFox？我刚刚测试了FF3，FF2，Safari，IE7和Chrome。适合所有人。我没有Opera。

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

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

Answer 4

谢谢Alex！你的growfield-Plugin有效。与此同时，我设法解决了另一个问题。我又拿了一个Scroll-Library并将一个回调事件攻入了jeditable-plugin。这并不像我想的那么难......

使用jeditable和autogrow的问题

4 个答案: