Použití editoru TinyMCE v aplikaci WordPress [Průvodce]

I když nemusí znát jeho jméno, každý, kdo používá WordPress je obeznámen s Editor TinyMCE. Je to editor, který používáte, když vytváříte nebo upravujete obsah - ten s tlačítky pro vytváření tučného textu, nadpisů, zarovnání textu a podobně. To je to, na co se v tomto příspěvku podíváme, a já vám to ukážu jak můžete přidávat funkce a jak jej můžete použít ve svých zásuvných modulech.

Editor je postaven na platformě nezávislém Javascript systému zvaném TinyMCE, který se používá v řadě projektů na webu. Má skvělé API, které WordPress umožňuje klepnutím na vytvořit vlastní tlačítka a přidat ji do dalších míst v rámci WordPress.

Přidání dostupných tlačítek

WordPress používá některé možnosti dostupné v TinyMCE k zakázání jednotlivých tlačítek - jako je horní index, dolní index a horizontální pravidla - za účelem vyčištění rozhraní. Mohou být přidány zpět bez přílišného rozruchu.

Prvním krokem je vytvoření pluginu. Podívejte se na kodex WordPress, jak to udělat. Stručně řečeno, můžete vytvořit složku s názvem 'my-mce-plugin' ve složce wp-content / plugins. Vytvořte soubor se stejným názvem s příponou PHP: my-mce-plugin.php.

Uvnitř tohoto souboru vložte následující text:

  Jakmile budete hotovi, měli byste být schopni vybrat tento plugin ve WordPressu a aktivovat jej. Do tohoto souboru lze vložit celý kód od teď.
 Takže zpět umožnění některých vestavěných, ale skrytých tlačítek. Zde je kód, který nám umožňuje povolit 3 tlačítka, která jsem zmínil:
  add_filter ('mce_buttons_2', 'my_tinymce_buttons'); funkce my_tinymce_buttons (tlačítka $) $ buttons [] = 'horní index'; $ buttons [] = 'dolní index'; $ tlačítka [] = hr; tlačítka $ $;  
  
 Chcete-li vědět, která tlačítka mohou být přidána a co jsou volána, podívejte se na seznam nalezený v dokumentaci TinyMCE pro ovládací prvky.
 Vytvoření vlastních tlačítek
 Jak se o vytváření vlastních tlačítek od nuly? Mnoho webových stránek používá Prism pro zvýraznění kódu, který používá značně sémantický přístup k označení kódových segmentů. Musíte zabalit kód uvnitř  a 
 tagy, něco takového:
 $ variable = 'value'
 Vytvořme tlačítko, které to udělá za nás!
 Jedná se o třístupňový proces. Budete muset přidat tlačítko, načíst soubor javascript a skutečně zapsat obsah souboru Javascript. Začněme!
 Přidání tlačítka a načtení souboru Javascript je velmi jednoduché, zde je kód, který jsem použil k jeho provedení:
  add_filter ('mce_buttons', 'pre_code_add_button'); function pre_code_add_button (tlačítka $) $ buttons [] = 'pre_code_button'; tlačítka $ $;  add_filter ('mce_external_plugins', 'pre_code_add_javascript'); function pre_code_add_javascript ($ plugin_array) $ plugin_array ['pre_code_button'] = get_template_directory_uri (). '/tinymce-plugin.js'; return $ plugin_array;  
 Když vidím tutoriály o tomto často vidím 2 problémy.
 To zanedbávají název tlačítka přidaný do funkce pre_code_add_button () musí být stejný jako klíč pro proměnnou $ plugin_array ve funkci pre_code_add_javascript (). Budeme také potřebovat použijte stejný řetězec v našem Javascriptu později.
 Některé tutoriály také použít další hák admin_head zabalit všechno nahoru. I když to bude fungovat, není nutné, a protože Kodex jej nepoužívá, mělo by se zřejmě vyhnout.
 Dalším krokem je napsat nějaký Javascript pro implementaci našich funkcí. Tady je to, co jsem použil 
 a  tagy výstup všechny najednou.
  (function () tinymce.PluginManager.add ('pre_code_button', funkce (editor, url) editor.addButton ('pre_code_button', text: 'Prism', ikona: false, onclick: function () var selected = tinyMCE.activeEditor.selection.getContent (); var content = ''+ vybrané +'
"; editor.insertContent (content + "n"); ); ); ) (); 
 Většina z toho je diktována tím, jak má být plugin TinyMCE kódován, můžete najít nějaké informace o tom v dokumentaci TinyMCE. Prozatím vše, co potřebujete vědět, je to název vašeho tlačítka (pre_code_button) v řádcích 2 a 3. Hodnota "textu" v řádku 4 se zobrazí, pokud nepoužíváte ikonu (my se podíváme na přidání ikon v okamžiku).
 Metoda onclick určuje, co toto tlačítko dělá, když je klepnuto. Chci ho použít k zabalení vybraného textu v rámci struktury HTML, o které jsme mluvili dříve.
 Vybraný text je možné chytit pomocí tinyMCE.activeEditor.selection.getContent (). Pak zabalím prvky kolem něj a vložím je, nahradí zvýrazněný obsah novým prvkem. Také jsem přidal nový řádek, takže můžu snadno začít psát za kódovým prvkem.
 Pokud chcete použít ikonu, doporučuji vybrat jednu ze sady Dashicons, která je dodávána s aplikací WordPress. Reference pro vývojáře má skvělý nástroj pro hledání ikon a jejich CSS / HTML / Glyph. Najděte symbol kódu a poznamenejte si unicode pod ním: f475.
 K našemu pluginu budeme muset připojit šablonu stylů a poté přidat jednoduchý styl, abychom zobrazili naši ikonu. Nejprve přidáme náš styl do aplikace WordPress:
  add_action ('admin_enqueue_scripts', 'pre_code_styles'); function pre_code_styles () wp_enqueue_style ('pre_code_button', plugins_url ('/style.css', __FILE__));  
 Vraťte se na Javascript a vedle ikony funkce addButton nahraďte “Nepravdivé” s třídou, kterou byste chtěli mít - použil jsem pre_code_button.
 Nyní vytvořte soubor style.css v adresáři pluginů a přidejte následující CSS:
  i.mce-i-pre_code_button: before font-family: dashicons; obsah: "f475";  
  
 Tlačítko bude přijímat mce-i- [vaše třída zde] třídy, kterou můžete použít k cílení a přidání stylů. Zadejte písmo jako dashicons a obsah používající hodnotu unicode z dřívějšího.
 Použití TinyMCE jinde
 Pluginy často vytvářejí textareas pro zadávání delšího textu, Nebylo by skvělé, kdybychom tam mohli použít TinyMCE? Samozřejmě, že můžeme, a je to docela snadné. Funkce wp_editor () nám dovoluje výstup kdekoli v admin, jak to vypadá:
 wp_editor ($ initial_content, $ element_id, $ settings);
 První parametr nastavuje počáteční obsah pole. To by mohlo být například použito pro načtení možnosti z databáze. Druhý parametr nastavuje ID elementu HTML. Třetí parametr je řada nastavení. Chcete-li se dozvědět více o přesném nastavení, které můžete použít, podívejte se do dokumentace wp editoru.
 Nejdůležitější nastavení je textarea_name. To vyplní atribut name elementu textarea, což vám umožní snadno ukládat data. Jak vypadá můj editor při použití na stránce možností:
 $ settings = array ('textarea_name' => 'buyer_bio');
 wp_editor (get_option ('buyer_bio'), 'buyer_bio', $ settings);
 To odpovídá zápisu následujícího kódu, což by mělo za následek jednoduchou textarea:
 <?php get_option( 'buyer_bio' ) ?>
 Závěr
 Editor TinyMCE je uživatelsky příjemný způsob, jak uživatelům umožnit větší flexibilitu při zadávání obsahu. To umožňuje těm, kteří nechtějí formátovat svůj obsah, aby to jednoduše zadali a udělali s ním, a těm, kteří se s ním chtějí obtěžovat, aby trávili tolik času, kolik potřebují, aby se dostali do pořádku.
 Vytváření nových tlačítek a funkcionality lze provádět velmi modulárním způsobem a my jsme jen poškrábali povrch možností. Pokud víte o obzvláště dobrém TinyMCE plugin nebo případu použití, který vám hodně pomohl, dejte nám vědět v komentářích níže!