3

バックグラウンド

Dave Hauenstein のedit-in-placeと jQuery のオートコンプリートプラグインを使用する WYSIWYG エディターの作成。

ソースコード

このコードには、HTML、インプレース編集、およびオートコンプリートの部分があります。

HTML

その場で編集テキスト フィールドになる HTML 要素:

<span class="edit" id="edit">Edit item</span>

その場で編集

edit-in-place プラグインを使用する JavaScript コード:

  $('#edit').editInPlace({
    url           : window.location.pathname,
    hover_class   : 'inplace_hover',
    params        : 'command=update-edit',
    element_id    : 'edit-ac',
    on_edit       : function() {
      return '';
    }
  });

これは、ユーザーが関連付けられた要素on_editをクリックしたときに関数を呼び出すカスタム コードです。span返された値は、テキスト入力フィールドをシードするために使用されます。span理論的には、プラグインはDOM 内の要素を次のような要素に置き換える必要がありますinput。

<input type="text" id="edit-ac" />

オートコンプリート

オートコンプリート コード:

  $('#edit-ac').autocomplete({
    source    : URL_BASE + 'search.php',
    minLength : 2,
    delay     : 25
  });

問題

エディットインプレース コードのタイミングに対して、オートコンプリート コードのタイミングが正しくないようです。

フィールドが DOM に追加された後、その場で編集プラグインがautocompleteコード スニペットを呼び出す必要があると思います。input

質問

2 つのプラグインをどのように統合して、ユーザーがその場で編集フィールドをクリックしたときに、その場で編集によって追加された DOM 要素でオートコンプリート コードがオートコンプリート機能を提供するようにしますか?

ありがとうございました！

4

1 に答える 1

2

解決

入力フィールドに識別子を追加するようにコードに指示することにより、jQueryインプレースエディターのソースコードを変更します。

jQueryインプレースエディターの更新

このセクションでは、必要な更新について詳しく説明します。

タイプ定義

デフォルト設定で新しい属性を提供します。

  editor_id:    "inplace_id", // default ID for the editor input field
  on_create:    null, // function: called after the editor is created

inputNameAndClass

設定inputNameAndClassを使用するように機能を変更します。editor_id

  /**
   * Returns the input name, class, and ID for the editor.
   */
  inputNameAndClass: function() {
    var result = ' name="inplace_value" class="inplace_field" ';

    // DJ: Append the ID to the editor input element.
    if( this.settings.editor_id ) {
      result += 'id="' + this.settings.editor_id + '" ';
    }

    return result;
  },

replaceContentWithEditor

replaceContentWithEditorcreate関数を呼び出すように関数を変更します。

  replaceContentWithEditor: function() {
    var buttons_html  = (this.settings.show_buttons) ? this.settings.save_button + ' ' + this.settings.cancel_button : '';
    var editorElement = this.createEditorElement(); // needs to happen before anything is replaced
    /* insert the new in place form after the element they click, then empty out the original element */
    this.dom.html('<form class="inplace_form" style="display: inline; margin: 0; padding: 0;"></form>')
      .find('form')
        .append(editorElement)
        .append(buttons_html);

    // DJ: The input editor is part of the DOM and can now be manipulated.
    if( this.settings.on_create ) {
      this.settings.on_create( editorElement );
    }
  },

オートコンプリートカップリング

オートコンプリート機能を有効にできるようになり、インプレース編集が表示されます。

複合通話

HTMLスニペットは以前と同じままです。次のような新しい呼び出しeditInPlace：

  $('#edit').editInPlace({
    url           : window.location.pathname,
    hover_class   : 'inplace_hover',
    params        : 'command=update-edit',
    editor_id     : 'edit-ac',
    on_create     : function( editor ) {
      $('#edit-ac').autocomplete({
        source    : URL_BASE + 'search.php',
        minLength : 2,
        delay     : 25
      });
    },
    on_edit       : function() {
      return '';
    }
  });

これにより、インプレースエディターがアクティブ化されるたびに、オートコンプリート機能がインプレースエディターにアタッチされます。

于 2012-10-06T02:32:16.130 に答える