Jak korzystać z wyskakującego okienka „Dodaj link” dla widżetu WordPress

12

W edytorze WYSIWYG WordPress pojawia się wyskakujące okienko, jeśli chcesz dodać link do tekstu. Czy istnieje możliwość uzyskania dostępu do tej funkcji? Ponieważ chcę użyć tego wyskakującego okienka dla widgetu WordPress, który utworzyłem, aby można było dodawać łącza do widżetu, jeśli skonfigurujesz go w backend.

Oto zrzut ekranu tego, co mam na myśli: wprowadź opis zdjęcia tutaj

Benny Neugebauer
źródło

Odpowiedzi:

8

Próbowałem trochę i nie udało mi się, aby działało to idealnie, ale jest blisko, trudno jest rozszerzyć, <form>ponieważ style wyskakujące są zakodowane na stałe, co jest możliwe przy większej pracy.

Aby rozpocząć, możesz:

Kolejkuj javascript i style wyskakującego łącza, głównym plikiem .js jest wp-includes/wplink.js. W zależności od tego, gdzie to ładujesz, możesz potrzebować dodać więcej lub mniej skryptów / stylów, ponieważ zależy to od kilku ( thickbox, jQuery-ui, ui-dialog itp .).

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');

Ustaw zmienną do przetłumaczenia:

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

Teraz powinieneś być w stanie rozszerzyć wpLinkfunkcję za pomocą czegoś takiego:

// 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;
});

Potrzebujesz <form>elementu do wyskakującego okienka, który przez defualt jest zbyt długi, aby go wkleić tutaj, możesz zobaczyć defualt tutaj: https://gist.github.com/wycks/6402573

Teraz są z tym poważne problemy, mianowicie nie dodałem do funkcji żadnego javascript do zamykania lub przesyłania (lub sprawdzania), takiego jak wpLink.closelub wpLink.textarea, więc zobacz wplink.jswięcej informacji.

Przepraszam, że po prostu trzeba się długo bawić, chyba że brakuje mi czegoś podstawowego, ale to powinno ci pomóc.

Wyck
źródło
Bardzo ci dziękuje za pomoc. Rozwiązałem odwołania do stylów / skryptów za pomocą: <? wp_editor ('', ''); ?> - Więc może uda mi się znaleźć krótsze rozwiązanie! Ale wciąż pozostaje pytanie, jak otrzymać wybrany link.
Benny Neugebauer,
Dzięki za opublikowanie tego; doprowadziło mnie to do znalezienia odpowiedzi, której potrzebowałem. W moim przypadku musiałem po prostu jawnie zakolejkować skrypt „wpdialogs”, który nie działał, gdy został określony jako zależność. wp_enqueue_script('wpdialogs');
Inigoesdr