WordPress 3.9+ TinyMCE 4 Tweaks: Stílusok, gombok, betűtípusok, legördülő és felbukkanó elemek hozzáadása

A WordPress 3.9 egyik kedvenc frissítése a TinyMCE 4.0 verziójának központi verziójának készítése volt. Az új TinyMCE tisztábbnak tűnik (igazán megfelel a WP műszerfalának), és van néhány igazán szép hozzáadott funkcionalitása. Nagyon sok régi témám és beépülő modulom frissítésre szorult, hogy működjön az új TinyMCE-vel, tehát időt töltöttem az átgondolással az API és kitalálni néhány jó dolgot. Az alábbiakban néhány példát mutatok be a TinyMCE funkcionalitásának kibővítésére. Nem fogom átnézni az összes lépést vagy azt, hogy a kód pontosan mit jelent (ez a fejlesztőknek szól), de megadom a pontos kódot, amelyet átmásolhat / beilleszthet a témájába vagy a pluginbe, majd ennek megfelelően módosíthatja..


Betűméret és betűkészlet hozzáadása Kiválasztja

Alapértelmezés szerint az egyedi betűkészletek és a betűméretek nem kerülnek a TinyMCE szerkesztőbe. Az alábbi funkció mindkét legördülő menüt hozzáadja a szerkesztő bal oldalán, a második sorban. Egyszerűen változtassa meg az „mce_buttons_2” feliratot, ha egy másik sorban szeretné (pl .: a „3. sorban használja az„ mce_buttons_3 ”-t).

// Betűméret engedélyezése és betűtípuscsalád kiválasztja a szerkesztőben
if (! function_existing ('wpex_mce_buttons'))) {
funkció wpex_mce_buttons ($ gombok) {
array_unshift ($ gombok, 'fontselect'); // Betűkészlet kiválasztása
array_unshift ($ gombok, 'fontsizeselect'); // Betűméret hozzáadása
visszatérés $ gombok;
}
}
add_filter ('mce_buttons_2', 'wpex_mce_buttons');

Egyéni betűméretek hozzáadása

Alapértelmezés szerint a betűméretet pt értékekre állítják be, ami nem mindig ideális. Inkább a pixelértékeket (12px, 13px, 14px, 16px..etc) használom, és további lehetőségeket kínálok a reszelék rugalmasságához. Az alábbi funkció megváltoztatja az alapértelmezett betűméretet a legördülő menüben.

// Testreszabhatja a mce szerkesztő betűméreteit
if (! function_existing ('wpex_mce_text_sizes'))) {
wpex_mce_text_sizes függvény ($ initArray) {
$ initArray ['fontsize_formats'] = "9px 10px 12px 13px 14px 16px 18px 21px 24px 28px 32px 36px";
return $ initArray;
}
}
add_filter ('tiny_mce_before_init', 'wpex_mce_text_sizes');

Egyéni betűtípusok hozzáadása

Az alapértelmezett betűkészlet-beállítások a betűtípuscsalád-választóban alapértelmezés szerint mind „web-biztonságos” betűtípusok, de mi lenne, ha további betűkészleteket szeretne hozzáadni a választóhoz? Talán néhány Google betűtípus? Nagyon könnyű megnézni az alábbi példát.

// Adjon hozzá egyéni betűkészleteket a betűkészlet listához
if (! function_existing ('wpex_mce_google_fonts_array'))) {
funkció wpex_mce_google_fonts_array ($ initArray) {
$ initArray ['font_formats'] = 'Lato = Lato; Andale Mono = andal mono, idők; Arial = arial, helvetica, sans-serif; Arial Black = arial black, avgarde; Book Antiqua = book antiqua, palatino; Comic Sans MS = képregény sans ms, sans-serif; Courier New = új futár, futár; Georgia = georgia, palatino; Helvetica = helvetica; Impact = impakt, chicago; Szimbólum = szimbólum; Tahoma = tahoma, arial, helvetica, sans-serif; Terminál = terminál, monaco; Times New Roman = idők új római, idők; Trebuchet MS = trebuchet ms, geneva; Verdana = verdana, genva; Webhings = webdings; Wingingings = wingingings, Zapf dingbats ”;
return $ initArray;
}
}
add_filter ('tiny_mce_before_init', 'wpex_mce_google_fonts_array');

Figyelem, hogyan adtam hozzá a „Lato” -t a fenti kód listájához? Ez ennyire egyszerű! A Teljes WordPress témámban ténylegesen áthúzom a webhelyen használt egyedi betűkészleteket a témapanelen meghatározottak szerint, és hozzáadom a kiválasztó mezőhöz, így azok elérhetők legyenek a bejegyzésed / oldalad szerkesztésekor is (édes). De a kód CSAK a legördülő listába hirdeti a betűtípuscsaládot, nem varázslatosan tölti be a szkriptet, így amikor a szerkesztőben megváltoztatja a szöveget, valójában látni fogja azt az egyéni betűtípust … – Így működik az alábbi kód!

// Adja hozzá a Google Scripts-t a szerkesztőhöz való felhasználáshoz
if (! function_exists ('wpex_mce_google_fonts_styles'))) {
funkció wpex_mce_google_fonts_styles () {
$ font_url = 'http://fonts.googleapis.com/css?family=Lato:300,400,700';
add_editor_style (str_replace (',', '% 2C', $ font_url));
}
}
add_action ('init', 'wpex_mce_google_fonts_styles');

Engedélyezze a formátumok (stílusok) legördülő menüt és adjon hozzá új stílusokat

Emlékszel a „Stílusok” legördülő listára a WP 3.8-ban? Nagyon jó volt! Használhatja hozzá néhány jó osztályt, amelyet felhasználhat a post szerkesztőben (a WPExplorer rendszeren használom valójában a gombok, színes tartóelemek, dobozok stb.) Számára. A WP 3.9-ben még stílusokat adhatunk hozzá, azonban az új TinyMCE 4.0-ban átnevezték a „Formaták” -ba, így egy kicsit másképp működik. Az alábbiakban bemutatunk egy példát a Formátumok legördülő menü engedélyezésére, valamint néhány új elem hozzáadására.

A WordPress TInyMCE formátumainak legördülő menüje

Engedélyezze a Formats legördülő menüt

Ez valójában ugyanúgy történik, mint a WP 3.9 előtt, de megosztom azt az esetet, hogy nem tudtad, hogyan kell csinálni.

// Formátumok legördülő menü hozzáadása az MCE-hez
if (! function_existing ('wpex_style_select'))) {
wpex_style_select függvény ($ gombok) {
array_push ($ gombok, 'styleselect');
visszatérés $ gombok;
}
}
add_filter ('mce_buttons', 'wpex_style_select');

Új elemek hozzáadása a formátumokhoz

Új elemek hozzáadása rendkívül egyszerű. Felhívjuk figyelmét, hogy hozzáadtam a következőt: „$ settings [‘style_formats_merge’] = true;” az alábbi kódhoz, ez biztosítja, hogy a szerkesztéseit a formátumok legördülő menübe egészítsék meg másokkal – ne írja felül az egész dolgot (talán más bővítmények is szeretnék használni).

// Új stílusok hozzáadása a TinyMCE "formátumok" menü legördülő menüjéhez
if (! function_exists ('wpex_styles_dropdown')) {
wpex_styles_dropdown függvény ($ beállítások) {

// Új stílus tömb létrehozása
$ new_styles = tömb (
sor(
'title' => __ ('Custom Styles', 'wpex'),
'tételek' => tömb (
sor(
'title' => __ ('téma gomb', 'wpex'),
'selector' => 'a',
'osztályok' => 'téma gomb'
),
sor(
'title' => __ ('kiemelés', 'wpex'),
'inline' => 'span',
'osztályok' => 'szöveg kiemelése',
),
),
),
);

// Régi és új stílusok egyesítése
$ beállítások ['style_formats_merge'] = igaz;

// Új stílusok hozzáadása
$ beállítások ['style_formats'] = json_encode ($ new_styles);

// Új beállítások visszaadása
visszatér $ beállítások;

}
}
add_filter ('tiny_mce_before_init', 'wpex_styles_dropdown');

Egyszerű MCE gomb hozzáadása

Új gomb hozzáadása a TinyMCE szerkesztőhöz különösen hasznos a rövid kódokhoz, mivel felhasználóként nem kell megjegyeznie semmilyen rövid kódot, egyszerűen rákattinthat egy gombra, és beillesztheti azt. Nem azt mondom, hogy 100 gombokat adok a TinyMCE-hez az összes rövid kódhoz (utálom, amikor a fejlesztők ezt teszik, ez olyan rossz gyakorlat, és szörnyűnek tűnik), de ha 1 vagy néhányat hozzáad, akkor hagyom, hogy átadja �� Ha szeretne egy csomópontot hozzáadni, akkor hozzon létre egy almenüt, ahogy az a következő szakaszban található.

WordPress MCE Új gomb

PHP kód – Nyilatkozzon az új MCE bővítményről a WP-ben

Ez a kód kijelenti az új MCE beépülő modult. Ügyeljen arra, hogy módosítsa a „mce-button.js” javascript fájl helyét a fájljának helyével (amelyhez a kódot a következő alszakaszban is megadom) mivel nyilvánvalóan nevezze át az „én” előtagot valamivel egyedibbé!

// Összekapcsolja a funkcióit a megfelelő szűrőkbe
funkció my_add_mce_button () {
// ellenőrizze a felhasználói engedélyeket
if (! current_user_can ('edit_posts') &&! current_user_can ('edit_pages')) {
Visszatérés;
}
// ellenőrizze, hogy a WYSIWYG engedélyezve van-e
if ('true' == get_user_option ('rich_editing')) {
add_filter ('mce_external_plugins', 'my_add_tinymce_plugin');
add_filter ('mce_buttons', 'my_register_mce_button');
}
}
add_action ('admin_head', 'my_add_mce_button');

// Nyilatkoztassa az új gomb szkriptét
funkció my_add_tinymce_plugin ($ plugin_array) {
$ plugin_array ['my_mce_button'] = get_template_directory_uri (). '/ js / mce-button.js';
return $ plugin_array;
}

// Új gomb regisztrálása a szerkesztőben
funkció my_register_mce_button ($ gombok) {
array_push ($ gombok, 'my_mce_button');
visszatérés $ gombok;
}

JS kód – Adja hozzá a gombot az MCE-hez

Ez a js kód a fenti részletben regisztrált js fájlba kerül a „symple_shortcodes_add_tinymce_plugin” függvényben. Ehhez új szöveggombot kell felvenni, amelyben az „Új gomb” felirat jelenik meg a szerkesztőben, és ha rákattint, akkor beilleszti a „WPExplorer.com fantasztikus!” Szöveget. (természetesen).

(függvény () {
tinymce.PluginManager.add ('my_mce_button', funkció (szerkesztő, url) {
editor.addButton ('my_mce_button', {
szöveg: 'Új gomb',
ikon: hamis,
onclick: function () {
editor.insertContent ('WPExplorer.com fantasztikus!');
}
});
});
}) ();

Adjon hozzá egyéni ikont az új MCE gombhoz

Fent megmutattam, hogyan kell hozzáadni egy új gombot, amely “Új gomb” formátumban jelenik meg a szerkesztőben, ez egy kicsit béna… Tehát a megváltoztatott kód megmutatja, hogyan kell hozzáadnia a saját egyéni ikonját..

Töltsön be egy stíluslapot a CSS-sel

Ezzel a funkcióval új stíluslapot tölthet be az adminisztrációs panelen való felhasználásra – előfordulhat, hogy egyes bővítmények / témák már hozzáadnak egy stíluslapot, tehát ha a témája / beépülő modulja ezt hagyja ki, akkor csak adja hozzá az egyéni CSS-t, és finomítsa a j-eket (lásd lent).

funkció my_shortcodes_mce_css () {
wp_enqueue_style ('symple_shortcodes-tc', plugins_url ('/ css / my-mce-style.css', __FILE__));
}
add_action ('admin_enqueue_scripts', 'my_shortcodes_mce_css');

Az egyéni CSS

Ez a CSS a korábban betöltött stíluslap hozzáadásához.

i.my-mce-icon {
háttérkép: url ('ICON URL');
}

Csípítse be a Javascript-et

Most egyszerűen módosítsa a korábban hozzáadott javascriptet a szöveges paraméter eltávolításához, és ahelyett, hogy hamis képet állítana az ikonra, adjon neki egyéni osztálynevet.

(függvény () {
tinymce.PluginManager.add ('my_mce_button', funkció (szerkesztő, url) {
editor.addButton ('my_mce_button', {
ikon: 'én-mce-ikon',
onclick: function () {
editor.insertContent ('WPExplorer.com fantasztikus!');
}
});
});
}) ();

Gomb hozzáadása az almenühöz

MCE gomb almenü

Korábban megemlítettem, hogy egy csomó új ikon hozzáadása a TinyMCE sávhoz rossz ötlet (és az is), ezért nézd meg az alábbi kódot, hogy megtudd, hogyan szerkesztheted a javascriptet az almenü megjelenítéséhez az egyéni gombhoz. Ha akarja látni, amint működik, nézd meg az én oldalamat Symple Shortcodes Video.

(függvény () {
tinymce.PluginManager.add ('my_mce_button', funkció (szerkesztő, url) {
editor.addButton ('my_mce_button', {
szöveg: 'Minta legördülő',
ikon: hamis,
típus: 'menubutton',
menü: [
{
szöveg: „1. tétel”,
menü: [
{
szöveg: „1. alpont”,
onclick: function () {
editor.insertContent ('WPExplorer.com fantasztikus!');
}
},
{
szöveg: „2. alpont”,
onclick: function () {
editor.insertContent ('WPExplorer.com fantasztikus!');
}
}
]
},
{
szöveg: „2. tétel”,
menü: [
{
szöveg: „1. alpont”,
onclick: function () {
editor.insertContent ('WPExplorer.com fantasztikus!');
}
},
{
szöveg: „2. alpont”,
onclick: function () {
editor.insertContent ('WPExplorer.com fantasztikus!');
}
}
]
}
]
});
});
}) ();

Felugró ablak hozzáadása a gombra kattintáskor

A fenti példában észreveheti, hogy minden gomb egyszerűen beszúrja a „WPExplorer.com webhely fantasztikus!” Szöveget. ami hűvös, de mi lenne egy előugró ablak létrehozásával, ahol a felhasználó megváltoztathatja azt, amit beilleszt a szövegbe? Ez most édes lenne! És ez valami, amelyet hozzáadtam a Symple Shortcodes 1.6 verziójának, így a plugin sokkal felhasználóbarátabbá vált..

WordPress MCE felbukkanó ablak

(függvény () {
tinymce.PluginManager.add ('my_mce_button', funkció (szerkesztő, url) {
editor.addButton ('my_mce_button', {
szöveg: 'Minta legördülő',
ikon: hamis,
típus: 'menubutton',
menü: [
{
szöveg: „1. tétel”,
menü: [
{
szöveg: 'Pop-Up',
onclick: function () {
editor.windowManager.open ({
cím: 'Helyezzen be véletlenszerű rövid kódot',
test: [
{
type: 'textbox',
név: 'textboxName',
címke: 'Text Box',
érték: '30'
},
{
type: 'textbox',
név: 'multilineName',
címke: 'Többvonalas szövegdoboz',
érték: "Itt sok mindent elmondhat.",
multiline: igaz,
minSzélesség: 300,
minHeight: 100
},
{
type: 'listbox',
név: 'listboxName',
címke: 'List Box',
„értékek”: [
{szöveg: '1. lehetőség', érték: '1'},
{szöveg: '2. lehetőség', érték: '2'},
{szöveg: '3. lehetőség', érték: '3'}
]
}
],
onsubmit: funkció (e) {
editor.insertContent ('[random_shortcode textbox = "' + e.data.textboxName + '" multiline = "' + e.data.multilineName + '" listbox = "' + e.data.listboxName + '"]');
}
});
}
}
]
}
]
});
});
}) ();

Ez nagyon jó … Most mi van?

Jó kérdés! Itt az ideje, hogy elvégezze ezeket a fantasztikus javításokat, és hozzon létre valami epikus elemet, vagy frissítse a pluginokat / témákat, hogy azok kompatibilisek legyenek a WordPress 3.9 új TinyMCE-jével. Az alábbi megjegyzésekben tudassa velem!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map