Проблемы с использованием jeditable и autogrow

Question

Я работаю над веб-проектом, используя jQuery и CakePHP. Я использую jeditable как плагин редактирования inplace. Для текстовых полей я расширяю его, используя autogrow plugin.

Ну, у меня есть две проблемы с этим:

• Во-первых, Autogrow, работает только на Firefox, а не IE, Safari, Opera и Chrome.
• Во-вторых, мне нужно событие обратного вызова для jeditable, когда его закончили показывать редактирования-компонент, пересчитывать scrollbar

Im не так хорошо знакомы с Javascript, поэтому я не могу продлить/исправить эти две библиотеки в одиночку. Кто-нибудь использовал другую js-библиотеку для редактирования inplace с автоматическими растущими текстовыми полями (без таких редакторов, как TinyMCE, мне нужно решение для простого текста)?

Я также нашел Growfield, он будет работать для других браузеров, но нет jeditable интеграции ...

(простите за мой английский)

Answer 1

Я не вижу никаких проблем с использованием Autogrow с jeditable в любых браузерах, но вот реализация Growfield с jeditable. Он работает так же, как и плагин Autogrow для jeditable. Вы создаете специальный тип ввода для 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

Спасибо Алекс! Работает с вашим плагином. Тем временем мне удалось решить другую проблему. Я взял еще Scroll-Library и взломал событие обратного вызова в jeditable-plugin. Это было не так сложно, как я думал ...

Answer 3

knight_killer: Что значит Autogrow работает только с FireFox? Я просто тестировал FF3, FF2, Safari, IE7 и Chrome. Прекрасно работает со всеми из них. У меня не было Opera.

Alex: Есть ли ссылка для загрузки вашего настраиваемого входа Growfield Jeditable? Я хотел бы связать его с моим блогом. Это действительно здорово!

Answer 4

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