WordPress 3.9+ TinyMCE 4 Tweaks: Tilføjelse af stilarter, knapper, skrifttyper, drop-downs & pop-ups

En af mine yndlingsopdateringer i WordPress 3.9 var at lave TinyMCE version 4.0-kernen. Den nye TinyMCE ser et renere ud (matcher virkelig WP-instrumentbrættet), og det har nogle virkelig dejlige tilføjede funktioner. En masse af mine gamle temaer og plugins måtte opdateres for at arbejde med den nye TinyMCE, så jeg brugte tid på at grave igennem API og finde ud af nogle seje ting. Nedenfor giver jeg dig nogle eksempler på, hvordan du kan udvide funktionaliteten af ​​TinyMCE. Jeg vil ikke lede dig gennem alle trinene eller hvad koden betyder nøjagtigt (dette er beregnet til udviklere) men vil give dig den nøjagtige kode, du kan kopiere / indsætte i dit tema eller plugin og derefter justere i overensstemmelse hermed.


Tilføjelse af skrifttypestørrelse og fontfamilievalg

Som standard føjes de tilpassede skrifttyper og skrifttypestørrelser ikke til TinyMCE-editoren. Funktionen herunder tilføjer begge disse dropdowns helt til venstre for editoren i den anden række. Skift blot hvor det står ‘mce_buttons_2’, hvis du vil have det i en anden række (fx: brug ‘mce_buttons_3’ til 3. række).

// Aktivér fontstørrelse & fontfamilievalg i redigereren
if (! function_exists ('wpex_mce_buttons')) {
funktion wpex_mce_buttons ($ knapper) {
array_unshift ($ knapper, 'fontselect'); // Tilføj skrifttypevalg
array_unshift ($ knapper, 'fontsize select'); // Tilføj skriftstørrelse Vælg
return $ knapper;
}
}
add_filter ('mce_buttons_2', 'wpex_mce_buttons');

Tilføjelse af tilpassede fontstørrelser

Som standard er fontstørrelserne indstillet til pt-værdier, som ikke altid er ideelle. Jeg foretrækker at bruge pixelværdier (12px, 13px, 14px, 16px..etc) og give flere muligheder for rivjerns fleksibilitet. Funktionen herunder ændrer standardindstillingerne for fontstørrelse i rullelisten.

// Tilpas mce editor fontstørrelser
if (! function_exists ('wpex_mce_text_sizes')) {
funktion wpex_mce_text_sizes ($ initArray) {
$ initArray ['fontsize_formats'] = "9px 10px 12px 13px 14px 16px 18px 21px 24px 28px 32px 36px";
returner $ initArray;
}
}
add_filter ('lille_mce_before_init', 'wpex_mce_text_størrelser');

Tilføjelse af tilpassede skrifttyper

Standard fontindstillingerne i fontfamilievelgeren er alle “websikre” skrifttyper som standard, men hvad nu hvis du ville tilføje flere skrifttyper til markøren? Måske nogle Google-skrifttyper? Vi ser, det er virkelig let at se på eksemplet herunder.

// Føj tilpassede skrifttyper til listen over skrifttyper
if (! function_exists ('wpex_mce_google_fonts_array')) {
funktion wpex_mce_google_fonts_array ($ initArray) {
$ initArray ['font_formats'] = 'Lato = Lato; Andale Mono = andale mono, gange; Arial = arial, helvetica, sans-serif; Arial Black = arial black, avant garde; Book Antiqua = bog antik, palatino; Comic Sans MS = tegneserie 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; Terminal = terminal, monaco; Times New Roman = times new roman, times; Trebuchet MS = trebuchet ms, geneva; Verdana = verdana, geneva; Webdings = webdings; Wingdings = wingdings, zapf dingbats ';
returner $ initArray;
}
}
add_filter ('lille_mce_before_init', 'wpex_mce_google_fonts_array');

Bemærk, hvordan jeg føjede “Lato” til listen i koden ovenfor? Det er så enkelt! I mit samlede WordPress-tema går jeg faktisk igennem alle tilpassede skrifttyper, der bruges på webstedet som defineret i temapanelet og føjer dem til markeringsfeltet, så de også er tilgængelige, mens du redigerer dine indlæg / sider (søde). Men koden annoncerer KUN fontfamilien til rullelisten, men indlæser ikke scriptet magisk, så når du ændrer din tekst i redigeringsprogrammet, kan du faktisk se den brugerdefinerede skrifttype, der anvendes på den … Det er, hvad koden herunder gør!

// Tilføj Google-scripts til brug sammen med editoren
if (! function_exists ('wpex_mce_google_fonts_style')) {
funktion wpex_mce_google_fonts_style () {
$ 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_style');

Aktivér rullemenuen Formater (stilarter) og tilføj nye stilarter

Kan du huske dropdown “Styles” i WP 3.8? Det var ret cool! Du kan bruge det til at tilføje nogle seje klasser, der skal bruges i posteditoren (jeg bruger den på WPExplorer faktisk til knapper, farvede spænd, bokse .. osv.). Vi i WP 3.9 kan du stadig tilføje stilarter, men den er blevet omdøbt i den nye TinyMCE 4.0 til “Formater”, så det fungerer lidt anderledes. Nedenfor er et eksempel på, hvordan du aktiverer dropdown-formaterne og tilføjer også nogle nye elementer til det.

DropPress-menu til WordPress TInyMCE-formater

Aktivér rullemenuen Formater

Dette gøres faktisk på samme måde før WP 3.9, men jeg deler, hvis du ikke vidste, hvordan du gør det.

// Føj dropdown-menu til formater til MCE
if (! function_exists ('wpex_style_select')) {
funktion wpex_style_select ($ knapper) {
array_push ($ knapper, 'styleselect');
return $ knapper;
}
}
add_filter ('mce_buttons', 'wpex_style_select');

Føj nye elementer til formater

Det er super let at tilføje nye varer. Bemærk, hvordan jeg har tilføjet “$ indstillinger [‘ style_formats_merge ’] = true;” til koden herunder sørger dette for, at dine redigeringer føjes til rullemenuen med formater sammen med andre – ikke overskriv hele tinget (måske vil andre plugins også gøre brug af det).

// Føj nye stilarter til rullemenuen TinyMCE "formater"
if (! function_exists ('wpex_style_dropdown')) {
funktion wpex_style_dropdown ($ indstillinger) {

// Opret en række nye stilarter
$ new_style = matrix (
array (
'title' => __ ('Custom Styles', 'wpex'),
'items' => matrix (
array (
'title' => __ ('Tema-knap', 'wpex'),
'selector' => 'a',
'klasser' => 'tema-knap'
),
array (
'title' => __ ('Fremhæv', 'wpex'),
'inline' => 'span',
'klasser' => 'tekst-fremhævning',
),
),
),
);

// Flet gamle og nye stilarter
$ indstillinger ['style_formats_merge'] = sandt;

// Tilføj nye stilarter
$ settings ['style_formats'] = json_encode ($ new_style);

// Returner nye indstillinger
returner $ indstillinger;

}
}
add_filter ('lille_mce_before_init', 'wpex_style_dropdown');

Tilføjelse af en enkel MCE-knap

Tilføjelse af en ny knap til TinyMCE-editoren er især nyttig til kortkoder, fordi du som bruger ikke behøver at huske nogen kortkoder, du kan blot klikke på en knap, og den indsætter den. Jeg siger ikke at tilføje 100 knapper til TinyMCE for alle dine kortkoder (jeg hader, når udviklere gør dette, det er så dårlig praksis og ser frygtelig ud), men hvis du tilføjer 1 eller et par få, vil jeg lade det gå �� Hvis du vil du tilføje en gruppe, skal du oprette en undermenu som forklaret i det følgende afsnit.

WordPress MCE Ny knap

PHP-kode – Erklær det nye MCE-plugin i WP

Denne kode erklærer dit nye MCE-plugin, så sørg for at ændre placeringen af ​​javascript-filen “mce-button.js”, så den matcher placeringen af ​​din fil (som jeg også giver dig koden til i det næste underafsnit) som åbenbart omdøbe præfikset “min” til noget mere unikt!

// Kobler dine funktioner til de rigtige filtre
funktion my_add_mce_button () {
// Kontroller brugertilladelser
if (! current_user_can ('edit_posts') &&! current_user_can ('edit_pages')) {
Vend tilbage;
}
// Kontroller, om WYSIWYG er aktiveret
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');

// Bekræft script til ny knap
funktion my_add_tinymce_plugin ($ plugin_array) {
$ plugin_array ['my_mce_button'] = get_template_directory_uri (). '/ js / mce-button.js';
returner $ plugin_array;
}

// Registrer ny knap i editoren
funktion my_register_mce_button ($ knapper) {
array_push ($ knapper, 'my_mce_button');
return $ knapper;
}

JS-kode – Føj knappen til MCE

Denne js-kode går i js-filen, der er registreret i uddraget ovenfor i funktionen “symple_shortcodes_add_tinymce_plugin”. Dette skal tilføje en ny tekstknap, der siger “Ny knap” i din editor, og når du klikker på den indsætter teksten “WPExplorer.com er fantastisk!” (selvfølgelig).

(funktion () {
tinymce.PluginManager.add ('my_mce_button', funktion (editor, url) {
editor.addButton ('my_mce_button', {
tekst: 'Ny knap',
ikon: falsk,
onclick: funktion () {
editor.insertContent ('WPExplorer.com er fantastisk!');
}
});
});
}) ();

Føj et brugerdefineret ikon til din nye MCE-knap

Over viste jeg dig, hvordan du tilføjer en ny knap, der vises som “Ny knap” i editoren, dette er en smule halt … Så den ændrede kode viser dig, hvordan du tilføjer dit eget brugerdefinerede ikon.

Ilæg et stilark med dit CSS

Brug denne funktion til at indlæse et nyt stilark til brug i dit adminpanel – nogle plugins / temaer tilføjer muligvis allerede et stilark, så hvis dit tema / plugin gør det, spring det over og bare tilføj din tilpassede CSS og finjustere js (vist nedenfor).

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

Din brugerdefinerede CSS

Dette er CSS for at tilføje det stilark, der er indlæst tidligere.

i.my-mce-icon {
baggrund-billede: url ('DIN ICON URL');
}

Tilpas dit Javascript

Nu er det nemt at finjustere javascriptet, som du tidligere har tilføjet for at fjerne tekstparameteren og i stedet for at indstille ikonet til falsk, giver det et brugerdefineret klassnavn.

(funktion () {
tinymce.PluginManager.add ('my_mce_button', funktion (editor, url) {
editor.addButton ('my_mce_button', {
ikon: 'my-mce-icon',
onclick: funktion () {
editor.insertContent ('WPExplorer.com er fantastisk!');
}
});
});
}) ();

Tilføjelse af en knap med undermenu

MCE-knap undermenu

Tidligere nævnte jeg, at det at tilføje et ton nye ikoner til TinyMCE-linjen er en dårlig idé (og det er), så tjek koden nedenfor for at se, hvordan du kan redigere javascript for at få vist en undermenu til din brugerdefinerede knap. Hvis du vil se det i aktion, så tjek min Simpel kortkodevideo.

(funktion () {
tinymce.PluginManager.add ('my_mce_button', funktion (editor, url) {
editor.addButton ('my_mce_button', {
tekst: 'Eksempel Dropdown',
ikon: falsk,
type: 'menubutton',
menu: [
{
tekst: 'Konto 1',
menu: [
{
tekst: 'Underpunkt 1',
onclick: funktion () {
editor.insertContent ('WPExplorer.com er fantastisk!');
}
},
{
tekst: 'Underpost 2',
onclick: funktion () {
editor.insertContent ('WPExplorer.com er fantastisk!');
}
}
]
},
{
tekst: 'Punkt 2',
menu: [
{
tekst: 'Underpunkt 1',
onclick: funktion () {
editor.insertContent ('WPExplorer.com er fantastisk!');
}
},
{
tekst: 'Underpost 2',
onclick: funktion () {
editor.insertContent ('WPExplorer.com er fantastisk!');
}
}
]
}
]
});
});
}) ();

Tilføjelse af et pop-up-vindue til din knap på Click

I eksemplet ovenfor kan du muligvis bemærke, at hver knap blot indsætter teksten “WPExplorer.com er fantastisk!” hvilket er cool, men hvad med at oprette et pop-up-vindue, hvor en bruger kan ændre, hvad der indsættes i teksten? Nu ville det være sødt! Og det er noget, jeg har tilføjet til version 1.6 af mine Symple Shortcodes, hvilket gør plugin meget mere brugervenlig.

WordPress MCE Pop-up-vindue

(funktion () {
tinymce.PluginManager.add ('my_mce_button', funktion (editor, url) {
editor.addButton ('my_mce_button', {
tekst: 'Eksempel Dropdown',
ikon: falsk,
type: 'menubutton',
menu: [
{
tekst: 'Konto 1',
menu: [
{
tekst: 'Pop-Up',
onclick: funktion () {
editor.windowManager.open ({
titel: 'Indsæt tilfældig kortkode',
krop: [
{
type: 'tekstboks',
navn: 'tekstboksnavn',
etiket: 'Tekstboks',
værdi: '30'
},
{
type: 'tekstboks',
navn: 'multilineName',
etiket: 'Multiline Text Box',
værdi: 'Du kan sige en masse ting herinde',
multiline: sandt,
minBredde: 300,
minHøjde: 100
},
{
type: 'listbox',
navn: 'listboxName',
etiket: 'List Box',
'værdier': [
{tekst: 'Option 1', værdi: '1'},
{tekst: 'Option 2', værdi: '2'},
{tekst: 'Option 3', værdi: '3'}
]
}
],
onsubmit: funktion (e) {
editor.insertContent ('[random_shortcode textbox = "' + e.data.textboxName + '" multiline = "' + e.data.multilineName + '" listbox = "' + e.data.listboxName + '"]');
}
});
}
}
]
}
]
});
});
}) ();

Dette er cool… Hvad nu?

Godt spørgsmål! Nu er det tid for dig at tage disse fantastiske tweaks og gå oprette noget episk eller opdatere dine plugins / temaer for at være kompatible med den nye TinyMCE i WordPress 3.9. Fortæl mig hvad du kommer frem til i kommentarerne herunder!

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