Vylepšenia WordPress 3.9+ TinyMCE 4: pridávanie štýlov, tlačidiel, písiem, rozbaľovacích ponúk a rozbaľovacích okien

Jednou z mojich obľúbených aktualizácií v programe WordPress 3.9 bolo vytvorenie jadra TinyMCE verzie 4.0. Nový TinyMCE vyzerá čistejšie (skutočne sa zhoduje s ovládacím panelom WP) a má veľmi peknú pridanú funkčnosť. Mnoho mojich starých tém a doplnkov muselo byť aktualizovaných, aby fungovali s novým TinyMCE, takže som strávil nejaký čas kopaním API a vymyslieť nejaké skvelé veci. Ďalej uvádzam niekoľko príkladov, ako môžete rozšíriť funkčnosť TinyMCE. Nebudem vás sprevádzať všetkými krokmi alebo tým, čo kód presne znamená (je to určené vývojárom), ale poskytnem vám presný kód, ktorý môžete skopírovať / vložiť do svojej témy alebo doplnku, a podľa toho vyladiť..


Pridanie veľkosti písma a výberu rodiny písiem

V predvolenom nastavení nie sú vlastné písma a veľkosti písma pridané do editora TinyMCE. Nižšie uvedená funkcia pridá obe tieto rozbaľovacie zoznamy úplne doľava od editora v druhom riadku. Jednoducho zmeňte miesto, kde sa hovorí „mce_buttons_2“, ak chcete, aby sa nachádzal v inom riadku (napr. Pre 3. riadok použite „mce_buttons_3“).

// Povolí veľkosť písma a výber rodiny fontov v editore
if (! function_exists ('wpex_mce_buttons'))) {
function wpex_mce_buttons ($ buttons) {
array_unshift ($ buttons, 'fontselect'); // Pridať výber písma
array_unshift ($ buttons, 'fontsizeselect'); // Pridať veľkosť písma Vyberte
návratové tlačidlá $;
}
}
add_filter ('mce_buttons_2', 'wpex_mce_buttons');

Pridávanie vlastných veľkostí písma

V predvolenom nastavení sú veľkosti písma nastavené na hodnoty pt, ktoré nie sú vždy ideálne. Radšej používam hodnoty pixlov (12px, 13px, 14px, 16px..etc) a poskytujem viac možností flexibility strúhadla. Nižšie uvedená funkcia zmení predvolené možnosti veľkosti písma v rozbaľovacej ponuke.

// Prispôsobenie veľkosti písma editora mce
if (! function_exists ('wpex_mce_text_sizes'))) {
function wpex_mce_text_sizes ($ 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');

Pridávanie vlastných písiem

Predvolené možnosti písma vo výbere rodiny písiem sú predvolene všetky písma „bezpečné pre web“, ale čo ak by ste do selektora chceli pridať ďalšie písma? Možno nejaké písma Google? Bude to skutočne jednoduché, pozrite si nasledujúci príklad.

// Pridať vlastné písma do zoznamu Písiem
if (! function_exists ('wpex_mce_google_fonts_array'))) {
function wpex_mce_google_fonts_array ($ initArray) {
$ initArray ['font_formats'] = 'Lato = Lato; Andale Mono = andale mono, časy; Arial = arial, helvetica, sans-serif; Arial Black = arial black, avant garde; Book Antiqua = book antiqua, palatino; Comic Sans MS = comic sans ms, sans-serif; Courier New = courier new, courier; Georgia = georgia, palatino; Helvetica = helvetica; Impact = impact, chicago; Symbol = symbol; Tahoma = tahoma, arial, helvetica, sans-serif; Terminál = terminál, Monako; Times New Roman = Times New Roman, Times; Trebuchet MS = trebuchet ms, Geneva; Verdana = verdana, Geneva; Webdings = webdings; Wingdings = Wingdings, zapf dingbats ';
return $ initArray;
}
}
add_filter ('tiny_mce_before_init', 'wpex_mce_google_fonts_array');

Všimnite si, ako som do zoznamu vyššie uvedeného kódu pridal slovo „Lato“? Je to také jednoduché! V mojej téme Total WordPress skutočne prechádzam akýmkoľvek vlastným písmom použitým na webe, ako je definované v paneli s témami, a pridám ich do výberového poľa, aby boli k dispozícii aj pri úprave vašich príspevkov / stránok (sladké). Kód však POUZE reklamuje skupinu písiem iba na rozbaľovaciu ponuku, takže skript magicky nenačíta, takže keď zmeníte text v editore, skutočne uvidíte, že sa naň aplikuje vlastné písmo … To je kód uvedený nižšie!

// Pridajte skripty Google na použitie s editorom
if (! function_exists ('wpex_mce_google_fonts_styles'))) {
function 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');

Povoľte rozbaľovaciu ponuku Formáty (štýly) a pridajte nové štýly

Pamätáte si rozbaľovaciu ponuku Štýly vo WP 3.8? To bolo celkom v pohode! Môžete ho použiť na pridanie niekoľkých skvelých tried, ktoré sa majú použiť v poštovom editore (vo WPExplorer ho vlastne používam pre tlačidlá, farebné rozpätia, škatule atď.). Vo WP 3.9 budete stále môcť pridávať štýly, avšak v novom TinyMCE 4.0 bol premenovaný na „Formáty“, takže to funguje trochu inak. Nižšie je uvedený príklad, ako povoliť rozbaľovaciu ponuku Formáty a do nej pridať aj niektoré nové položky.

Rozbaľovacia ponuka Formáty WordPress TInyMCE

Povoľte rozbaľovaciu ponuku Formáty

V skutočnosti sa to robí rovnakým spôsobom pred WP 3.9, ale zdieľam sa, pretože ste nevedeli, ako to urobiť..

// Pridať rozbaľovaciu ponuku formátov do MCE
if (! function_exists ('wpex_style_select'))) {
function wpex_style_select ($ buttons) {
array_push ($ buttons, 'styleselect');
návratové tlačidlá $;
}
}
add_filter ('mce_buttons', 'wpex_style_select');

Pridať nové položky do formátov

Pridávanie nových položiek je super ľahké. Všimnite si, ako som pridal „$ settings [‘ style_formats_merge ’] = true;“ do nižšie uvedeného kódu zabezpečí, aby boli vaše úpravy pridané do rozbaľovacej ponuky formátov spolu so všetkými ostatnými. Neprepisujte celú vec (možno ju chcú použiť aj ďalšie doplnky)..

// Do rozbaľovacej ponuky „Formáty“ TinyMCE pridajte nové štýly
if (! function_exists ('wpex_styles_dropdown'))) {
function wpex_styles_dropdown ($ settings) {

// Vytvorenie radu nových štýlov
$ new_styles = array (
pole (
'title' => __ ('Vlastné štýly', 'wpex'),
'items' => array (
pole (
'title' => __ ('Button Theme', 'wpex'),
'selektor' => 'a',
'classes' => 'theme-button'
),
pole (
'title' => __ ('Highlight', 'wpex'),
'inline' => 'span',
'classes' => 'text-highlight',
),
),
),
);

// Zlúčiť staré a nové štýly
$ settings ['style_formats_merge'] = true;

// Pridať nové štýly
$ settings ['style_formats'] = json_encode ($ new_styles);

// Vrátiť nové nastavenia
návrat $ nastavenia;

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

Pridanie jednoduchého tlačidla MCE

Pridanie nového tlačidla do editora TinyMCE je užitočné najmä pre krátke kódy, pretože ako používateľ si nemusíte pamätať žiadne krátke kódy, stačí kliknúť na tlačidlo a vloží ho. Nehovorím o tom, že do TinyMCE pridám 100 tlačidiel pre všetky vaše krátke kódy (neznášam, keď to vývojári robia, je to taká zlá prax a vyzerá to hrozné), ale ak pridáte 1 alebo pár, nechám to prejsť �� Ak Ak chcete pridať zväzok, mali by ste vytvoriť podponuku, ako je vysvetlené v nasledujúcej časti.

Nové tlačidlo WordPress MCE

PHP Code – Vyhláste nový doplnok MCE v WP

Tento kód vyhlási váš nový doplnok MCE. Nezabudnite tiež zmeniť umiestnenie súboru javascript „mce-button.js“ tak, aby sa zhodovalo s umiestnením súboru (ku ktorému v nasledujúcom pododdieli dám kód tiež) ako je zrejmé, premenujte predponu „my“ na niečo viac jedinečné!

// Zapojí vaše funkcie do správnych filtrov
function my_add_mce_button () {
// skontrolovať používateľské oprávnenia
if (! current_user_can ('edit_posts') &&! current_user_can ('edit_pages'))) {
return;
}
// skontrolujte, či je povolený WYSIWYG
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');

// Vyhlásiť skript pre nové tlačidlo
function my_add_tinymce_plugin ($ plugin_array) {
$ plugin_array ['my_mce_button'] = get_template_directory_uri (). '/ js / mce-button.js';
return $ plugin_array;
}

// Zaregistrujte nové tlačidlo v editore
function my_register_mce_button ($ buttons) {
array_push ($ buttons, 'my_mce_button');
návratové tlačidlá $;
}

JS kód – Pridanie tlačidla do MCE

Tento kód js ide do súboru js zaregistrovaného v úryvku vyššie vo funkcii „symple_shortcodes_add_tinymce_plugin“. Tým by sa do editora malo pridať nové textové tlačidlo s nápisom „Nové tlačidlo“ a po kliknutí sa vloží text „WPExplorer.com je úžasný!“ (samozrejme).

(function () {
tinymce.PluginManager.add ('my_mce_button', function (editor, url) {
editor.addButton ('my_mce_button', {
text: „Nové tlačidlo“,
ikona: nepravdivé,
onclick: function () {
editor.insertContent ('WPExplorer.com je úžasné!');
}
});
});
}) ();

Pridajte k svojmu novému tlačidlu MCE vlastnú ikonu

Hore som vám ukázal, ako pridať nové tlačidlo, ktoré sa v editore zobrazí ako „nové tlačidlo“, je to trochu chutné … Zmenený kód vám ukáže, ako pridať svoju vlastnú ikonu.

Načítajte CSS šablónu so štýlmi

Pomocou tejto funkcie môžete načítať novú šablónu so štýlmi, ktorá sa má použiť na vašom administračnom paneli – niektoré doplnky / motívy už možno pridávajú šablónu so štýlmi, takže ak to vaša téma / doplnok robí, preskočte to a jednoducho pridajte svoj vlastný CSS a vylepšte js (zobrazené nižšie)..

function 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');

Vaše vlastné CSS

Toto je CSS na pridanie predtým načítanej šablóny štýlov.

i.my-mce-icon {
background-image: url ('VAŠA IKONA URL');
}

Vylepšite svoj Javascript

Teraz jednoducho vyladíte javascript, ktorý ste predtým pridali, aby ste odstránili textový parameter a namiesto toho, aby ste nastavili ikonu na false, dajte jej vlastný názov triedy.

(function () {
tinymce.PluginManager.add ('my_mce_button', function (editor, url) {
editor.addButton ('my_mce_button', {
icon: 'my-mce-icon',
onclick: function () {
editor.insertContent ('WPExplorer.com je úžasné!');
}
});
});
}) ();

Pridanie tlačidla s podponukou

Podmenu tlačidla MCE

Skôr som sa zmienil o tom, že pridanie tony nových ikon na panel TinyMCE je zlý nápad (a je to), preto si pozrite nižšie uvedený kód a zistite, ako môžete upraviť javascript a zobraziť podponuku pre svoje vlastné tlačidlo. Ak to chcete vidieť v akcii, pozrite sa na moje Symple Shortcodes Video.

(function () {
tinymce.PluginManager.add ('my_mce_button', function (editor, url) {
editor.addButton ('my_mce_button', {
text: „Rozbaľovacia ponuka“,
ikona: nepravdivé,
typ: 'menubutton',
Ponuka: [
{
text: „Položka 1“,
Ponuka: [
{
text: „Podpoložka 1“,
onclick: function () {
editor.insertContent ('WPExplorer.com je úžasné!');
}
},
{
text: „Podpoložka 2“,
onclick: function () {
editor.insertContent ('WPExplorer.com je úžasné!');
}
}
]
},
{
text: „Položka 2“,
Ponuka: [
{
text: „Podpoložka 1“,
onclick: function () {
editor.insertContent ('WPExplorer.com je úžasné!');
}
},
{
text: „Podpoložka 2“,
onclick: function () {
editor.insertContent ('WPExplorer.com je úžasné!');
}
}
]
}
]
});
});
}) ();

Kliknutím na tlačidlo pridáte rozbaľovacie okno

Vo vyššie uvedenom príklade si môžete všimnúť, že každé tlačidlo jednoducho vloží text „WPExplorer.com je úžasné!“ čo je v pohode, ale čo vytvorenie vyskakovacieho okna, kde používateľ môže zmeniť, čo sa vkladá do textu? Teraz by to bolo milé! A je to niečo, čo som pridal do verzie 1.6 svojich Symple Shortcodes, vďaka čomu je doplnok oveľa užívateľsky prívetivejší.

Vyskakovacie okno WordPress MCE

(function () {
tinymce.PluginManager.add ('my_mce_button', function (editor, url) {
editor.addButton ('my_mce_button', {
text: „Rozbaľovacia ponuka“,
ikona: nepravdivé,
typ: 'menubutton',
Ponuka: [
{
text: „Položka 1“,
Ponuka: [
{
text: „Kontextové okno“,
onclick: function () {
editor.windowManager.open ({
title: 'Insert Random Shortcode',
telo: [
{
typ: 'textbox',
name: 'textboxName',
návestie: „Textové pole“,
hodnota: '30'
},
{
typ: 'textbox',
name: 'multilineName',
návestie: „Multiline Text Box“,
hodnota: „Tu môžete povedať veľa vecí“,
multiline: true,
min. Šírka: 300,
min.výška: 100
},
{
typ: 'listbox',
name: 'listboxName',
návestie: „Zoznam“,
'hodnoty': [
{text: 'Option 1', value: '1'},
{text: 'Možnosť 2', hodnota: '2'},
{text: 'Možnosť 3', hodnota: '3'}
]
}
],
onsubmit: function (e) {
editor.insertContent ('[random_shortcode textbox = "' + e.data.textboxName + '" multiline = "' + e.data.multilineName + '" listbox = "' + e.data.listboxName + '"]');
}
});
}
}
]
}
]
});
});
}) ();

To je v pohode … Teraz čo?

Dobrá otázka! Teraz je čas, aby ste si vzali tieto úžasné vyladenia a vytvorili niečo epického alebo aktualizovali svoje doplnky / motívy tak, aby boli kompatibilné s novým TinyMCE vo WordPress 3.9. Dajte mi vedieť, s čím prídete v komentároch nižšie!

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