使用jeditable和autogrow的问题

我使用jQuery和CakePHP在Web项目上工作。我使用jeditable作为就地编辑插件。对于textareas，我使用autogrow plugin来扩展它。使用jeditable和autogrow的问题

嗯，我有两个问题：

首先，自动增长不只是在Firefox上运行，而不是在IE，Safari浏览器，歌剧和铬。
其次，我需要jeditable，当其完成后显示编辑组件的回调事件，重新计算scrollbar

我不是那么熟悉JavaScript，因此我不能扩展/纠正这种两个库我自己一个人。有没有人使用另一个js库进行就地编辑与自动生长textareas（没有像TinyMCE完整的编辑器，我需要一个纯文本解决方案）？

我还发现Growfield，它将适用于其他浏览器，但没有jeditable整合...

（对不起，我的英语）

2008-09-30 Roman Ganz

使用自动增长与我没有看到任何问题在任何浏览器中都可以使用，但这里使用了可扩展的Growfield。它的工作原理与Autodesk的可插入插件相同。您可以创建一个特殊的可输入类型，只需将.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 
    }); 
})

来源

2008-09-30 18:38:19

谢谢亚历克斯！ Your growfield-Plugin的作品。在此期间，我设法解决了另一个问题。我又拿了一个Scroll-Library，并将一个回调事件插入jeditable-plugin。这并不难，因为我认为...

来源

2008-10-01 10:33:55

knight_killer：你是什么意思Autogrow只适用于FireFox？我刚刚测试过FF3，FF2，Safari，IE7和Chrome。对所有人都适用。我没有Opera可用。

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

来源

2008-10-02 08:56:22

我不知道确切的错误是什么......当我点击应该可编辑的元素时，IE7中的自动增长库中出现javascript-错误。 Texarea正在展示，但没有自动增长。在其他浏览器上，我没有收到错误信息... – 2008-10-03 13:26:32

Mika Tuupola：如果您对我的修改过的jeditable感兴趣（添加了两个回调事件），您可以get it here。如果您能够在正式版本中提供这些活动，那将是非常棒的！

这是我的（简化的）集成代码。我将这些事件用于更多，然后仅用于悬停效果。这只是一个用例。

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

来源

2008-10-03 13:46:54

使用jeditable和autogrow的问题

回答

相关问题