2

jQueryと CakePHPを使用して Web プロジェクトに取り組んでいます。インプレース編集プラグインとしてjeditableを使用しています。テキストエリアについては、 autogrow プラグインを使用して拡張します。

さて、これには2つの問題があります。

  • まず、autogrow は Firefox でのみ機能し、IE、Safari、Opera、Chrome では機能しません。
  • 次に、スクロールバーを再計算するために、編集コンポーネントの表示が終了したら、jeditable のコールバック イベントが必要です。

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

私もGrowfieldを見つけました。他のブラウザーでも機能しますが、合理的な統合はありません...

（私の英語でごめんなさい）

4

4 に答える 4

3

どのブラウザーでも 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
    });
})

于 2008-09-30T18:38:19.807 に答える
1

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
  }
});
于 2008-10-03T13:46:54.977 に答える
1

Knight_killer : Autogrow は FireFox でしか動作しないというのはどういう意味ですか? FF3、FF2、Safari、IE7、Chrome でテストしました。それらのすべてで正常に動作します。Opera を利用できませんでした。

アレックス: Growfield Jeditable カスタム入力のダウンロード リンクはありますか? 私のブログからリンクしたいと思います。それは本当に素晴らしいです！

于 2008-10-02T08:56:22.667 に答える
0

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

于 2008-10-01T10:33:55.827 に答える