javascript - 使用 jeditable 和 autogrow 的问题

Question

我使用 jQuery 开发 Web 项目和 CakePHP。我用 jeditable作为就地编辑插件。对于文本区域，我使用 autogrow plugin 扩展它.

好吧，我有两个问题:

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

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

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

(对不起我的英文)

Answer 1

我没有看到在任何浏览器中使用 Autogrow 和 jeditable 有任何问题，但这里是 Growfield 和 jeditable 的实现。它的工作方式与 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
    });
})