A TinyMCE szerkesztő használata a WordPress programban [Útmutató]

Bár nem ismerik a nevét, mindenki, aki a WordPress-et használja, ismeri a TinyMCE szerkesztő. Ez a szerkesztő, amelyet a tartalom létrehozásakor vagy szerkesztésénél használ - az a, amelyik a félkövér szöveg, a fejlécek, a szöveg igazítása stb. Létrehozásához szükséges gombokkal rendelkezik. Ezt nézzük meg ebben a hozzászólásban, és megmutatom neked hogyan lehet hozzáadni a funkciókat és hogyan lehet használni a bővítményeiben.

A szerkesztő egy platformfüggetlen Javascript rendszerre épül, amelyet a TinyMCE-nek hívnak, amelyet számos internetes projektben használnak. Nagyszerű API-ja van, melynek segítségével a WordPress segítségével saját gombokat hozhat létre, és a WordPress más helyszíneire is hozzáadhatja..

Elérhető gombok hozzáadása

A WordPress néhány lehetőséget kínál a TinyMCE-ben, hogy letiltja az egyes gombokat - mint például a felső indexet, az indexet és a horizontális szabályokat - a felület tisztítása érdekében. Ezeket vissza lehet adni anélkül, hogy túl sok dühös lenne.

Az első lépés egy plugin létrehozása. Vessen egy pillantást a WordPress kódexére, hogy hogyan kell ezt megtenni. Dióhéjban egy „my-mce-plugin” nevű mappa létrehozásával érhető el a wp-content / plugins mappában. Hozzon létre egy azonos nevű fájlt PHP kiterjesztéssel: my-fe-plugin.php.

A fájl belsejében illessze be a következőket:

  
Ha elkészült, ezt a bővítményt ki kell választania a WordPress-ben, és aktiválnia kell. Mostantól minden kód beilleszthető a fájlba.
 
Szóval, vissza egyes beépített, de rejtett gombok engedélyezése. Íme a kód, amely lehetővé teszi számunkra, hogy engedélyezzük a 3 megemlített gombot:
 
 add_filter ('mce_buttons_2', 'my_tinymce_buttons'); funkció my_tinymce_buttons ($ gombok) $ gombok [] = 'felirat'; $ gombok [] = 'index'; $ gombok [] = hr; $ gombok visszatérése;  
 
 
 
Ha meg szeretné tudni, hogy mely gombokat lehet hozzáadni, és mit hívnak, nézd meg a TinyMCE dokumentációban található listákat a vezérlésekhez.
 
Saját gombok létrehozása
 
Mi lenne a saját gombjaink megalkotása a semmiből? Számos webhely használja a Prism kódot a kiemeléshez, amely nagyon szemantikus megközelítést alkalmaz a kódszegmensek megjelölésére. A kódot be kell csomagolni  és 
 címkék, ilyesmi:
 
$ változó = 'érték'
 
Hozzunk létre egy gombot, ami ezt teszi számunkra!
 
Ez egy háromlépéses folyamat. Meg kell adnia egy gombot, betöltenie kell egy javascript fájlt, és meg kell írnia a Javascript fájl tartalmát. Kezdjük el!
 
A gomb hozzáadása és a Javascript fájl betöltése meglehetősen egyszerű, itt van az a kód, amit én csináltam:
 
 add_filter ('mce_buttons', 'pre_code_add_button'); funkció pre_code_add_button ($ gombok) $ gombok [] = 'pre_code_button'; $ gombok visszatérése;  add_filter ('mce_external_plugins', 'pre_code_add_javascript'); funkció pre_code_add_javascript ($ plugin_array) $ plugin_array ['pre_code_button'] = get_template_directory_uri (). '/Tinymce-plugin.js'; $ plugin_array;  
 
Amikor látok oktatóanyagot erről, gyakran 2 problémát látok.
 
Elhanyagolják ezt a pre_code_add_button () függvényben hozzáadott gombnévnek meg kell egyeznie a $ plugin_array változó kulcsával a pre_code_add_javascript () függvényben. Szükségünk lesz rá használja ugyanazt a karakterláncot a Javascript-ben később.
 
Néhány oktató is használjon további admin_head horogot, hogy mindent fel lehessen csomagolni. Bár ez működni fog, nem szükséges, és mivel a Codex nem használja, valószínűleg el kell kerülni.
 
A következő lépés az, hogy néhány JavaScript-t írjunk be a funkcionalitásunk megvalósításához. Itt van az, amit kaptam 
 és  címkék egyidejűleg kerülnek kiadásra.
 
 (függvény () tinymce.PluginManager.add ('pre_code_button', függvény (szerkesztő, url) editor.addButton ('pre_code_button', szöveg: 'Prism', ikon: false, onclick: function () var selected = tinyMCE.activeEditor.selection.getContent (); var content = '
'+ kiválasztott +'
„ editor.insertContent (tartalom + "n"); ); ); ) (); 
 
Ennek nagy részét a TinyMCE plugin kódolásának diktálja, amit a TinyMCE dokumentációjában talál. Most már csak annyit kell tudnod, hogy a gomb neve (Pre_code_button) a 2. és 3. sorban kell használni. A 4-es sorban a "szöveg" értéke akkor jelenik meg, ha nem használ egy ikont (egy pillanat alatt megnézzük az ikonok hozzáadását).
 
Az onclick módszer azt diktálja, hogy mi a gomb, ha rákattint. Azt akarom használni, hogy a kiválasztott szöveget a korábban megtárgyalt HTML struktúrán belül tekintsük be.
 
A kiválasztott szöveg megragadható tinyMCE.activeEditor.selection.getContent (). Ezután körbevágom a körülötte lévő elemeket, és helyezem be, és a kijelölt tartalmat az új elemre cserélem. Új sort is hozzáadtam, így könnyen elkezdhetem írni a kódelem után.
 
Ha egy ikont szeretne használni, azt javaslom, hogy válasszon egyet a Dashicons készletből, amely a WordPress-el szállítja. A Fejlesztői Referencia nagyszerű eszköz az ikonok és azok CSS / HTML / Glyph keresésére. Keresse meg a kód szimbólumot, és jegyezze fel az alatta lévő unikódot: f475.
 
Csatlakoztatnunk kell egy stíluslapot a bővítményünkhöz, majd hozzá kell adnunk egy egyszerű stílust az ikon megjelenítéséhez. Először fel, add hozzá a stílust a WordPresshez:
 
 add_action ('admin_enqueue_scripts', 'pre_code_styles'); függvény pre_code_styles () wp_enqueue_style ('pre_code_button', plugins_url ('/style.css', __FILE__));  
 
Visszatérjen a Javascript-hez, és az addButton függvény ikonja mellett cserélje ki “hamis” olyan osztálysal, amellyel a gombot megnyomná - használtam pre_code_button.
 
Most hozza létre a style.css fájlt a plugin könyvtárában, és adja hozzá a következő CSS-t:
 
 i.mce-i-pre_code_button: előtt font-family: dashicons; tartalom: "475";  
 
 
 
Ne feledje, hogy a gomb megkapja a mce-i- [az osztályod itt] osztály, amelyet stílusok célzásához és hozzáadásához használhat. Adja meg a betűtípust dashicons-ként, és a tartalmat az unicode-érték alapján, a korábbi értékek alapján.
 
A TinyMCE használata máshol
 
A bővítmények gyakran szöveget hoznak létre hosszabb szövegek beviteléhez, nem lenne jó, ha ott is használnánk a TinyMCE-t? Természetesen tudjuk, és ez elég könnyű. A wp_editor () függvény lehetővé teszi számunkra, hogy a rendszergazda bármelyikén megjelenítsen, így néz ki:
 
wp_editor ($ first_content, $ element_id, $ beállítások);
 
Az első paraméter megadja a doboz kezdeti tartalmát. Ez használható például egy opció betöltésére az adatbázisból. A második paraméter a HTML elem azonosítóját állítja be. A harmadik paraméter a beállítások tömbje. A pontos beállítások megtekintéséhez olvassa el a wp szerkesztő dokumentációját.
 
A legfontosabb beállítás a textarea_name. Ez a szöveges elem elnevezését tartalmazza, így könnyen mentheti az adatokat. Íme, hogyan néz ki a szerkesztő, ha egy opcióoldalon használja:
 
$ settings = tömb ('textarea_name' => 'buyer_bio');
 
wp_editor (get_option ('buyer_bio'), 'buyer_bio', $ beállítások);
 
Ez egyenértékű a következő kód írásával, amely egyszerű szöveget eredményez:
 
<?php get_option( 'buyer_bio' ) ?>
 
Következtetés
 
A TinyMCE szerkesztő felhasználóbarát módja annak, hogy a felhasználók nagyobb rugalmasságot nyújtsanak a tartalom bevitelekor. Lehetővé teszi, hogy azok, akik nem akarják formázni a tartalmukat, egyszerűen csak írják be, és elvégezhetik vele, és azok, akik szeretnének vele körülötte lenni, annyi időt tölteni, amennyit csak kell..
 
Az új gombok és funkciók létrehozása nagyon moduláris módon történhet, és csak most megkarcoltuk a lehetőségek felületét. Ha ismeri a különösen jó TinyMCE bővítményt vagy olyan alkalmazást, amely sokat segített, tudassa velünk az alábbi megjegyzéseket!