メタボックスにWordPressのリンク挿入ダイアログを使用しますか？

Question

私はカスタム代謝物をかなり頻繁に使用します。非常にしばしば私は代謝物に「リンク」フィールドを持っています。私は単純なテキスト入力フィールドを使ってきましたが、WordPressのコンテンツエディタが使用する同じ「リンクを挿入」ダイアログを呼び出すボタンを入れる方法を理解しようとしています。それは可能ですか？

Answer 1

wordpressエディタはtinyMCEをエディタとして使用します。しかし、投稿に関連するカスタムフィールドは特別な可動ボックスに表示され、投稿のthe documentation that creates the edition boxは、WYSIWYGエディタが追加されるとDOMの周りを移動できないため、そのような種類に追加することはできませんボックスの。

これは、探している機能の種類を追加する場合、おそらくその画面がどのように生成されるのかをコード内で手でトレースすることによって、ほとんどのものを再実装する必要があることを意味します。

Answer 2

リンクボックスを呼び出すには、まず必要なjsをエンキューしてから、wp-link jsファイルメソッドと対話します。

はあなたのUIを設定/

1/wp_enqueue_script('wp-link');

2 WP-リンクをエンキューしていることを確認してください。私は通常、リンクダイアログを呼び出すためのボタンとリンクURLを扱うためのテキストフィールドを使用します。

3 /呼び出しリンク対話

$('body').on('click', '.link-btn', function(event) { 
      wpActiveEditor = true; //we need to override this var as the link dialogue is expecting an actual wp_editor instance 
      wpLink.open(); //open the link popup 
      return false; 
     }); 

4 /ハンドルリンクは

$('body').on('click', '#wp-link-submit', function(event) { 
      var linkAtts = wpLink.getAttrs();//the links attributes (href, target) are stored in an object, which can be access via wpLink.getAttrs() 
      $('your_url_textfield').val(linkAtts.href);//get the href attribute and add to a textfield, or use as you see fit 
      wpLink.textarea = $('body'); //to close the link dialogue, it is again expecting an wp_editor instance, so you need to give it something to set focus back to. In this case, I'm using body, but the textfield with the URL would be fine 
      wpLink.close();//close the dialogue 
//trap any events 
      event.preventDefault ? event.preventDefault() : event.returnValue = false; 
      event.stopPropagation(); 
      return false; 
     }); 

5 /ハンドルリンクは

$('body').on('click', '#wp-link-cancel, #wp-link-close', function(event) { 
     wpLink.textarea = $('body'); 
     wpLink.close(); 
     event.preventDefault ? event.preventDefault() : event.returnValue = false; 
     event.stopPropagation(); 
     return false; 
    }); 

行う必要がありますについては、それをキャンセル保存します。私はメタボックスクラスで同じアプローチを使用し、それは問題なく動作するようです。私はリンクダイアログのhtml要素への参照をハードコーディングしているので、そのハックのabit。対話には外部APIが必要です。 WPに追加するのは難しいかもしれません。