Odpowiedzi na pytania z WordUpa w Krakowie

Na ostatnim WordUpie w Krakowie po mojej prelekcji pojawiło się kilka pytań wartych opisania z odpowiedziami w formie wpisu.

Jak dodać do popupa własną logikę?

W zasadzie dobór metody zależy od poziomu skomplikowania zawartości popupa i logiki go obsługującej. Jeżeli potrzebujemy zawartości popupa mającej niewiele wspólnego z listą kontrolek to mamy do dyspozycji dwa rozwiązania – skorzystać z kontrolki typu container, która oferuje nam możliwość wstawienia własnego kodu HTML przez właściwość html oraz obsługę zdarzeń poprzez onclick, onmouseover etc. Przykładem wykorzystania tej kontrolki jest wtyczka charmap – polecam lekturę jej kodu.

Drugie wyjście to sposób w jaki rozwiązano to w wypadku wstawiania linków – istnieje wtyczka wplink, która korzysta z obiektu window.wpLink zdefiniowanego w pliku wp-includes/js/wp-link.js – w tym wypadku działa to tak, że kliknięcie przycisku powoduje wywołanie metody open obiektu window.wpLink z ID aktywnego edytora. Dzięki temu możemy wykonać w popupie w zasadzie dowolny kod a na koniec rezultaty umieścić w edytorze znając jego ID. Póki co polecam analizę kodu wspomnianej wtyczki i skryptu z nią związanego – możecie się spodziewać, że rozwinę ten temat w sierpniu na łamach bloga 😉

Jak usunąć buttony po nazwie (czy jest oddzielna metoda)?

Jest to bardzo dobre pytanie, gdyż związane jest ono z większą elastyką naszych skryptów. Wyobraźmy sobie sytuację w której korzystamy z następującego kodu:

function dziudek_remove_btn($btns) {
    unset($btns[0]);
    return $btns;
}

add_action('mce_buttons', 'dziudek_remove_btn');

Ten kod będzie działał dokładnie tak jak sobie to zaplanowaliśmy do momentu gdy użytkownik nie wpadnie na pomysł wstawienia na początku pierwszego rzędu przycisków własnego przycisku – wtedy nasz skrypt usunie ten nowo dodany przycisk a nie przycisk pogrubienia tekstu. Na szczęście możemy temu łatwo zaradzić modyfikując trochę kod usuwania przycisku:

function dziudek_remove_btn($btns) {
    $index = array_search('bold', $buttons);

    if($index !== FALSE) {
        array_splice($buttons, $index, 1);
    }

    return $btns;
}

add_action('mce_buttons', 'dziudek_remove_btn');

Powyższy kod korzysta z faktu, że przyciski są przechowywane w tablicach według nazw. Istnieje też druga metoda – można przyciski usunąć już na etapie działania filtra tinymce_before_init.

Niestety nie natrafiłem na dedykowaną funkcję służącą do usuwania przycisków po samej nazwie.

Jak wykorzystać w TinyMCE kontrolki wyboru kolorów w popupie?

Pytanie o kontrolki kolorów pojawia się bardzo często, niestety są one też najbardziej problematyczne w wykorzystaniu. Teoretycznie można umieścić kontrolkę wyboru kolorów w popupie z użyciem pola typu colorbutton. Problem polega na tym, że aby ta kontrolka zadziałała trzeba stworzyć spory kawałek kodu generujący listę kolorów – w najprostszym wypadku wymaga to skopiowania 3/4 kodu wtyczki textcolor, gdyż ta wtyczka posiada kod, który generuje całą strukturę bloku pozwalającego wybrać kolor tekstu/tła.

Mam pewien pomysł na podejście do tego problemu i myślę, że w sierpniu można spodziewać się wpisu na ten temat (podobnie jak w wypadku logiki w popupach).

Jaką korzyść dają nam przyciski wstawiające kod, który można uzyskać poprzez dostępne już w TinyMCE przyciski?

To pytanie zasugerowało mi, że sekcja prezentacji odpowiadająca na pytanie – „Dlaczego warto tworzyć wtyczki dla TinyMCE?” wymaga rozwinięcia 🙂 Przede wszystkim trzeba wziąć poprawkę na to, że moja prelekcja opisuje podstawowe funkcjonalności i rzeczywiście efekty mogą się wydawać powieleniem dostępnych już funkcji. Co nie zmienia faktu, że przy edycji dużej ilości tekstu nawet przycisk, który jednym kliknięciem zastępuje trzy kliknięcia w edytorze jest naprawdę dużym udogodnieniem (nieraz się o tym przekonałem na własnej skórze). No i pozostaje kwestia bardziej zaawansowanych rozwiązań przygotowywanych pod klientów – jeżeli musimy wstawiać np. mapy we wpisach to miło byłoby gdyby klient od razu widział podgląd tego co wstawił i nie musiał znać całego API skryptu generującego mapki – tu właśnie leży siła autorskich rozwiązań – możemy sobie i klientowi dość łatwo ułatwić życie i uniknąć zbędnych pytań.

 

Zdjęcie dzięki uprzejmości Kasi Karus – współorganizatorki WordUpa w Krakowie.

Share on Facebook0Tweet about this on TwitterShare on Google+0Email this to someonePrint this page
  • Color Picker czy inaczej tez colorbutton, szukam tego intensywnie i te poszukiwania doprowadziły mnie do Ciebie. Coś mi się nawet tak wydaje, że pisałem Ci o tym na jakiść anglojezycznym blogu?

    Znalazłem kilka trochę pobieznych odpowiedzi, których uzyłem, ale że raczej mało się znam na jQuery, nie wyszło mi to dobrze. Najpierw zrobiłem tak:

    odp.1: Jako typ pola w popupie (editor.windowManager.open) użyłem:
    type: ‚colorpicker’,

    co żeczywiscie mi dało duży colorpicker jak z Photoshopa jednak na tym się skończyło, bo nie wiem jak przenieść wartość koloru do pola value.

    Odp2:
    Innym razem uzyłem czegoś takiego:

    type: ‚colorbutton’,
    tooltip: ‚Background color’,
    selectcmd: ‚HiliteColor’,
    panel: {
    html: renderColorPicker,
    onclick: onPanelClick
    },
    onclick: onButtonClick
    jednak i to nie podziałało, b trzeba było określic te funkcje, co tez zrobiłem ale też mi cos nie wyszło.

    Znalazłem w końcu inny sposób na to a mianowicie odwołanie do własnego, zeznętrznego okienka.

    onclick: function() {
    editor.windowManager.open( {
    url: ‚external_popup.html.php’,
    title:

    I tu pole do popisu jest większe, bo można sobie bez problemu załadować color picker, tylko, że w tym znów przypadku nie wiedziałem jak przenieść wartości z formulaża do edytora i to z uwzględnieniem ich w nawiasach, tak, żeby został wstawiony gotowy shortkode.

    To tyle w temacie. Chyba przyjdzie mi czekać na sierpień.

    Pozdrwaima Cię @Dziudek

    • Ten wpis jest z zeszłego roku, wpisu o rozwiązaniu dla colorpickera nie było, bo o ile pamiętam utknąłem z tym w martwym punkcie swego czasu – niestety na tą chwilę nie mam działającego rozwiązania ani wolnego czasu by je znaleźć :/