使用jeditable和自动增长的问题 [英] Problems using jeditable and autogrow

问题描述

我的工作使用 jQuery的和CakePHP一个Webproject。我使用 jeditable 作为就地编辑插件。对于文字区域我用它扩大了自动增长插件。

I work on a Webproject using jQuery and CakePHP. I use jeditable as an inplace edit plugin. For textareas I extend it using the autogrow plugin.

嗯，我有两个问题：

• 首先，自动增长并不只适用于火狐，而不是IE浏览器，Safari浏览器，Opera和Chrome浏览器。
• 第二，我需要一个回调事件jeditable，当其完成显示编辑组件，重新计算的滚动

我不是那么熟悉JavaScript，所以我不能用我自己的扩展/纠正这种两个库。有没有人使用其它的js库的就地编辑，支持自动增长的文本域（没有完整的编辑器，如TinyMCE的，我需要为纯文本的解决方案）？

Im not so familiar with Javascript, so i can't extend/correct this two libraries by my own. Has anyone used another js-library for inplace edit with auto growing textareas (no complete editors like TinyMCE, I need a solution for plain text)?

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

I also found Growfield, it would work for other browsers, but there's no jeditable integration...

（对不起，我的英语）的

推荐答案

我没有看到使用自动增长与jeditable在任何浏览器中的任何问题，但在这里是Growfield的实现与jeditable。它的工作原理非常在自动增长插件jeditable做同样的方式。您可以为jeditable创建一个特殊的输入类型，只适用.growfield（）给它。必要的JavaScript低于，演示可以发现。

I didn't see any problems using Autogrow with jeditable in any browsers but here is an implementation of Growfield with jeditable. It works much in the same way that the Autogrow plugin for jeditable does. You create a special input type for jeditable and just apply .growfield() to it. The necessary javascript is below, a demo can be 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
	});
})

这篇关于使用jeditable和自动增长的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！