Použitie editora TinyMCE v aplikácii WordPress [Sprievodca]

Aj keď nemusia poznať jeho meno, každý, kto používa WordPress, je oboznámený s Editor TinyMCE. Je to editor, ktorý používate pri vytváraní alebo úpravách svojho obsahu - ten s tlačidlami pre vytvorenie tučného textu, nadpisov, zarovnávania textu atď. Na tomto príspevku sa budeme zaoberať a ukážem vám to ako môžete pridať funkčnosť a ako ju môžete použiť vo svojich doplnkoch.

Editor je postavený na platforme nezávislý Javascript systém nazvaný TinyMCE, ktorý sa používa v mnohých projektoch na webe. To má skvelý API, ktoré WordPress vám umožní vybrať si vytvoriť svoje vlastné tlačidlá a pridať ho do iných miest v rámci WordPress.

Pridávanie dostupných tlačidiel

WordPress používa niektoré možnosti, ktoré sú k dispozícii v TinyMCE na vypnutie určitých tlačidiel - napríklad horného indexu, dolného indexu a horizontálnych pravidiel - s cieľom vyčistiť rozhranie. Môžu byť pridané späť bez prílišnej povahy.

Prvým krokom je vytvorenie doplnku. Pozrite sa na kód WordPress, ako to urobiť. Stručne povedané, môžete vytvoriť priečinok s názvom "my-mce-plugin" v priečinku wp-content / plugins. Vytvorte súbor s rovnakým názvom s príponou PHP: my-vm-plugin.php.

Do tohto súboru vložte nasledovné:

  
Po dokončení by ste mali mať možnosť vybrať tento doplnok v aplikácii WordPress a aktivovať ho. Celý kód odteraz môže byť vložený do tohto súboru.
 
Takže, späť do umožňuje niektoré vstavané, ale skryté tlačidlá. Tu je kód, ktorý nám umožňuje povoliť 3 tlačidlá, ktoré som spomenul:
 
 add_filter ('mce_buttons_2', 'my_tinymce_buttons'); funkcia my_tinymce_buttons ($ tlačidlá) $ tlačidlá [] = 'horný index'; $ tlačidlá [] = 'dolný index; $ tlačidlá [] = hr; vrátiť tlačidlá $;  
 
 
 
Ak chcete zistiť, ktoré tlačidlá sa dajú pridať a čo sa nazývajú, pozrite sa na zoznam nachádzajúci sa v dokumentácii TinyMCE pre ovládacie prvky.
 
Vytváranie vlastných tlačidiel
 
Čo robiť vlastné tlačidlá od začiatku? Mnoho webových stránok používa Prism na zvýraznenie kódu, ktorý používa veľmi sémantický prístup k označeniu segmentov kódu. Musíte zabaliť svoj kód  a 
 tagy, niečo takéto:
 
$ variable = 'hodnota'
 
Vytvorme si tlačidlo, ktoré to urobí pre nás!
 
Ide o trojstupňový proces. Budete musieť pridať tlačidlo, načítať súbor javascript a skutočne napísať obsah súboru Javascript. Začnime!
 
Pridávanie tlačidla a načítanie súboru jazyka Javascript je dosť jednoduché, tu je kód, ktorý som použil, aby som to urobil:
 
 add_filter ('mce_buttons', 'pre_code_add_button'); funkcia pre_code_add_button (tlačidlá $) $ tlačidlá [] = 'pre_code_button'; vrátiť tlačidlá $;  add_filter ('mce_external_plugins', 'pre_code_add_javascript'); funkcia pre_code_add_javascript ($ plugin_array) $ plugin_array ['pre_code_button'] = get_template_directory_uri (). '/Tinymce-plugin.js'; vrátiť $ plugin_array;  
 
Keď vidím tutoriály o tomto, často vidím 2 problémy.
 
Zanedbávajú to spomenúť názov tlačidla pridaný do funkcie pre_code_add_button () musí byť rovnaký ako kľúč pre premennú $ plugin_array vo funkcii pre_code_add_javascript (). Budeme tiež musieť použite rovnaký reťazec v našom jazyku Javascript neskôr.
 
Niektoré návody tiež použite ďalší admin_head hák, aby ste všetko zabalili. Aj keď to bude fungovať, nie je to potrebné a odkedy ho kódex nepoužíva, pravdepodobne by sa tomu malo vyhnúť.
 
Ďalším krokom je napísať nejaký Javascript pre implementáciu našich funkcií. Tu je to, čo som získal 
 a  tagy výstup všetky naraz.
 
 (funkcia () tinymce.PluginManager.add ('pre_code_button', funkcia (editor, url) editor.addButton ('pre_code_button', text: tinyMACE.activeEditor.selection.getContent (); var content = '
'+ vybrané +'
,; editor.insertContent (obsah + "\ n"); ); ); ) (); 
 
Väčšina z toho je diktovaná tým, ako sa predpokladá kódovanie doplnku TinyMCE, v dokumentácii TinyMCE nájdete nejaké informácie o tom. Zatiaľ všetko, čo potrebujete vedieť, je to názov vášho tlačidla (Pre_code_button) by sa mali použiť v riadku 2 a 3. Hodnota "text" v riadku 4 sa zobrazí, ak nepoužívate ikonu (pozrite sa na pridanie ikon v okamihu).
 
Metóda onclick určuje, čo toto tlačidlo robí pri kliknutí. Chcem ho použiť na zabalenie vybraného textu v štruktúre HTML, ktorá bola spomenutá skôr.
 
Zvolený text je možné uchopiť pomocou tinyMCE.activeEditor.selection.getContent (). Potom obklopím prvky okolo neho a vložím ich a nahradím zvýraznený obsah novým prvkom. Pridal som aj nový riadok, aby som mohol ľahko začať písať za prvok kódu.
 
Ak chcete použiť ikonu, navrhujem vybrať si jednu z množiny Dashicons, ktorá sa dodáva s WordPressom. Referencia vývojára má skvelý nástroj na vyhľadávanie ikon a ich CSS / HTML / Glyph. Nájdite kódový symbol a všimnite si unicode pod ním: f475.
 
Budeme musieť pridať štýlový list do nášho pluginu a potom pridať jednoduchý štýl zobrazujúci našu ikonu. Po prvé, pridáme náš štýl do programu WordPress:
 
 add_action ('admin_enqueue_scripts', 'pre_code_styles'); funkcia pre_code_styles () wp_enqueue_style ('pre_code_button', plugins_url ('/style.css', __FILE__));  
 
Vráťte sa späť na Javascript a vedľa ikony vo funkcii addButton nahraďte “nepravdivý” s triedou, ktorú by ste chceli vaše tlačidlo mať - použil som pre_code_button.
 
Teraz vytvorte súbor style.css v adresári pluginov a pridajte nasledujúci CSS:
 
 i.mce-i-pre_code_button: skôr ako font-family: dashicons; obsah: "\ f475";  
 
 
 
Upozorňujeme, že tlačidlo dostane mce-i- [vaša trieda tu] triedy, ktorú môžete použiť na zacielenie a pridávanie štýlov. Zadajte písmo ako dashicons a obsah pomocou hodnoty unicode z predchádzajúcich.
 
Použitie TinyMCE na inom mieste
 
Pluginy často vytvárajú textare pre zadávanie dlhšieho textu, nebolo by skvelé, keby sme mohli použiť aj TinyMCE? Samozrejme, že môžeme, a je to dosť jednoduché. Funkcia wp_editor () nám umožňuje vysielať kdekoľvek v admine, tak ako to vyzerá:
 
wp_editor ($ initial_content, $ element_id, $ nastavenia);
 
Prvý parameter nastaví počiatočný obsah pre daný okienko. To možno použiť napríklad na načítanie možnosti z databázy. Druhý parameter nastavuje ID prvku HTML. Tretím parametrom je súbor nastavení. Ak chcete prečítať o presných nastaveniach, ktoré môžete použiť, pozrite sa na dokumentáciu editora wp.
 
Najdôležitejšie nastavenie je textarea_name. Toto obsadzuje atribút názvu prvku textarea, ktorý vám umožňuje ľahko uložiť dáta. Tu je náhľad, ako môj editor pri používaní na stránke možností:
 
$ settings = pole ('textarea_name' => 'buyer_bio');
 
wp_editor (get_option ('buyer_bio'), 'buyer_bio', $ nastavenia);
 
Toto je ekvivalentné napísaniu nasledujúceho kódu, ktorý by mal za následok jednoduché textarea:
 
<?php get_option( 'buyer_bio' ) ?>
 
záver
 
Editor TinyMCE je užívateľsky prívetivý spôsob, ktorý užívateľom umožňuje väčšiu flexibilitu pri vstupe obsahu. Umožňuje tým, ktorí nechcú formátovať svoj obsah, aby ho jednoducho napísali a urobili s ňou, a tými, ktorí chcú s ním hrať, aby trávili toľko času, ako potrebujú dostať to správne.
 
Vytváranie nových tlačidiel a funkčnosti sa dá robiť veľmi modulárnym spôsobom a len povrchy možností sme len poškriabali. Ak poznáte mimoriadne dobrý doplnok TinyMCE alebo prípad, ktorý vám pomohol veľa, dajte nám vedieť v nižšie uvedených komentároch!