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

Question

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

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

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

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

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

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

Answer 1

Я не видел проблем с использованием Autogrow с jeditable ни в одном браузере, но вот реализация Growfield с jeditable. Он работает так же, как и плагин Autogrow для jeditable. Вы создаете специальный тип ввода для jeditable и просто применяете .growfield () к нему. Необходимый javascript ниже, демо-версия может быть найдена здесь .

<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

Мика Туупола : Если вы заинтересованы в моем измененном jeditable (добавлено два события обратного вызова), вы можете получить его здесь . Было бы здорово, если бы вы предоставили эти события в официальной версии 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 3

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

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

Answer 4

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