Cara menggunakan "Tambah tautan" yang muncul untuk widget WordPress

12

Di editor WYSIWYG WordPress Anda mendapatkan pop up jika Anda ingin menambahkan tautan untuk teks. Apakah ada kemungkinan untuk mengakses fungsi ini? Karena saya ingin menggunakan pop up ini untuk widget WordPress yang saya buat sehingga Anda dapat menambahkan tautan ke widget jika Anda mengkonfigurasinya di backend.

Ini adalah screenshot dari apa yang saya maksud: masukkan deskripsi gambar di sini

posts links api wysiwyg html-editor Benny Neugebauer
sumber

Jawaban:

8

Saya mencoba sedikit dan tidak bisa membuat ini bekerja dengan sempurna, tetapi sudah dekat, sulit untuk memperpanjang dengan <form>untuk gaya popup yang hardcode, pikir mungkin dengan lebih banyak pekerjaan.

Untuk memulai, Anda dapat:

Enqueue tautan popup javascript dan gaya, file .js utama adalah wp-includes/wplink.js. Bergantung pada tempat Anda memuat ini, Anda mungkin perlu menambahkan lebih banyak atau lebih sedikit skrip / gaya karena bergantung pada beberapa (kotak tebal, jQuery-ui, ui-dialog, dll ).

wp_enqueue_script('wplink');
wp_enqueue_script('wpdialogs-popup'); //also might need this

// need these styles
wp_enqueue_style('wp-jquery-ui-dialog');
wp_enqueue_style('thickbox');

Setel variabel yang dapat diterjemahkan:

var wpLinkL10n = {"title":"Insert\/edit link","update":"Update","save":"Add Link","noTitle":"(no title)","noMatchesFound":"No matches found."};

Sekarang Anda harus dapat memperluas wpLinkfungsi menggunakan sesuatu seperti:

// test button
<button class="link-btn">Click button for Links</button>

jQuery('.link-btn').on('click', function(event) {
  wpActiveEditor = true;
  wpLink.title = "Hello"; //Custom title example
  wpLink.open();    // Open the link popup
  return false;
});

Anda memerlukan <form>elemen untuk pop-up yang menurut defualt terlalu lama untuk di-paste di sini, Anda dapat melihat defualt di sini: https://gist.github.com/wycks/6402573

Sekarang ada masalah besar dengan ini yaitu saya tidak menambahkan penutupan atau penyerahan (atau memeriksa) javascript ke fungsi, seperti wpLink.closeatau wpLink.textarea, jadi lihat wplink.jsinfo lebih lanjut.

Maaf, ini hanya butuh waktu lama untuk bermain-main, kecuali saya melewatkan sesuatu yang mendasar, tetapi itu akan membuat Anda mengerti.

Wyck
sumber
Terima kasih banyak atas bantuan Anda. Saya memecahkan referensi style / script dengan menggunakan: <? wp_editor ('', ''); ?> - Jadi mungkin saya bisa mendapatkan solusi yang lebih pendek! Tetapi masih ada pertanyaan tentang bagaimana menerima tautan yang dipilih.
Benny Neugebauer
Terima kasih telah memposting ini; itu membuat saya menemukan jawaban yang saya butuhkan. Dalam kasus saya, saya hanya harus secara eksplisit membuat skrip "wpdialogs", yang tidak berfungsi ketika ditetapkan sebagai dependensi. wp_enqueue_script('wpdialogs');
Inigoesdr