jeditableとautogrowの使用に関する問題

StackOverflow https://stackoverflow.com/questions/152104

質問

jQuery とCakePHPを使用してWebプロジェクトで作業しています。インプレース編集プラグインとして jeditable を使用します。テキストエリアの場合、 autogrowプラグインを使用して拡張します。

まあ、これには2つの問題があります：

  • まず、自動拡張はFirefoxでのみ機能し、IE、Safari、Opera、Chromeでは機能しません。
  • 次に、jeditableのコールバックイベントが必要です。edit-componentの表示が終了したら、スクロールバー

Javascriptにあまり詳しくないので、この2つのライブラリを自分で拡張/修正することはできません。自動成長するテキストエリアでのインプレース編集に別のjsライブラリを使用した人はいますか（TinyMCEのような完全なエディタはありません、プレーンテキストのソリューションが必要です）

Growfield も見つかりました。他のブラウザでも機能しますが、編集可能な統合はありません...

（私の英語は申し訳ありません）

役に立ちましたか？

解決

どのブラウザでもjeditableでAutogrowを使用しても問題はありませんでしたが、ここではjeditableでGrowfieldを実装しています。 jeditableのAutogrowプラグインと同じように機能します。 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
    });
})

他のヒント

knight_killer ：AutogrowはFireFoxでのみ機能するとはどういう意味ですか？ FF3、FF2、Safari、IE7、Chromeでテストしました。それらすべてで問題なく動作します。 Operaを利用できませんでした。

Alex ：Growfield Jeditableカスタム入力のダウンロードリンクはありますか？ブログからリンクしたいと思います。本当に素晴らしい！

Mika Tuupola ：修正したjeditable（2つのコールバックイベントを追加）に興味がある場合は、ここで入手。 jeditableの公式バージョンでこれらのイベントを提供することは素晴らしいことです！

これは私の（簡略化された）統合コードです。ホバー効果のためだけにイベントを使用します。ユースケースは1つです。

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

ありがとうアレックス！ growfield-Pluginが機能します。 その間、私は他の問題を解決することができました。別の Scroll-Library を取得し、コールバックイベントをjeditable-pluginにハッキングしました。 。思ったほど難しくなかった...

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top