WordPress 3.9+ TinyMCE 4 Tweaks: Legge til stiler, knapper, skrifter, nedtrekksvinduer og popup-vinduer

En av favorittoppdateringene mine i WordPress 3.9 var å lage TinyMCE versjon 4.0-kjernen. Den nye TinyMCE ser ut som en renere look (stemmer virkelig med WP-dashbordet), og den har veldig fin funksjonalitet. Mange av mine gamle temaer og plugins måtte oppdateres for å fungere med den nye TinyMCE, så jeg brukte litt tid på å grave igjennom API og finne ut noen kule ting. Nedenfor vil jeg gi deg noen eksempler på hvordan du kan utvide funksjonaliteten til TinyMCE. Jeg har ikke tenkt å gå gjennom alle trinnene eller hva koden betyr nøyaktig (dette er beregnet på utviklere), men vil gi deg den nøyaktige koden du kan kopiere / lime inn i temaet eller plugin og deretter finpusse deretter.


Legge til skriftstørrelse og fontfamilievalg

Som standard legges ikke tilpassede skrifter og skriftstørrelser til i TinyMCE-redigereren. Funksjonen nedenfor vil legge til begge disse dropdowns helt til venstre for redaktøren i den andre raden. Bare endre der det står ‘mce_buttons_2’ hvis du vil ha det i en annen rad (eks: bruk ‘mce_buttons_3’ for den tredje raden).

// Aktiver fontstørrelse og fontfamilievalg i redigereren
if (! function_exists ('wpex_mce_buttons')) {
funksjon wpex_mce_buttons ($ knapper) {
array_unshift ($ knapper, 'fontselect'); // Legg til skrift Velg
array_unshift ($ knapper, 'fontsizeselect'); // Legg til skriftstørrelse Velg
return $ knapper;
}
}
add_filter ('mce_buttons_2', 'wpex_mce_buttons');

Legge til tilpassede skriftstørrelser

Som standard er skriftstørrelsene satt til pt-verdier som ikke alltid er ideelle. Jeg foretrekker å bruke pikselverdier (12px, 13px, 14px, 16px..etc) og for å gi flere alternativer for raspefleksibilitet. Funksjonen nedenfor vil endre standardalternativene for skriftstørrelse i rullegardinvelgeren.

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

Legge til tilpassede skrifter

Standard fontalternativer i fontfamilievelgeren er alle “websikre” skrifter som standard, men hva om du ville legge til flere skrifter til velgeren? Kanskje noen Google-skrifter? Det er veldig enkelt å se på eksemplet nedenfor.

// Legg tilpassede skrifter til listen over skrifter
if (! function_exists ('wpex_mce_google_fonts_array')) {
funksjon wpex_mce_google_fonts_array ($ initArray) {
$ initArray ['font_formats'] = 'Lato = Lato; Andale Mono = andale mono, ganger; Arial = arial, helvetica, sans-serif; Arial Black = arial black, avant garde; Book Antiqua = book antiqua, 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 ('bittesmå_mce_before_init', 'wpex_mce_google_fonts_array');

Legg merke til hvordan jeg la “Lato” til listen i koden over? Så enkelt er det! I det totale WordPress-temaet mitt går jeg faktisk igjennom alle egendefinerte skrifter som brukes på nettstedet som definert i temapanelet og legger dem til i valgfeltet slik at de også er tilgjengelige mens du redigerer innlegg / sider (søt). Men koden annonserer KUN fontfamilien i rullegardinmenyen. Den vil ikke magisk laste skriptet, slik at når du endrer teksten i redigeringsprogrammet, kan du faktisk se den tilpassede skriften som er brukt på den … Det er det koden nedenfor gjør!

// Legg til Google-skript for bruk med redigereren
if (! function_exists ('wpex_mce_google_fonts_style')) {
funksjon 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');

Aktiver rullegardinmenyen Formater (stiler) og legg til nye stiler

Husker du rullegardinmenyen “Stiler” i WP 3.8? Det var ganske kult! Du kan bruke den til å legge til noen kule klasser som skal brukes i redigeringsprogrammet (jeg bruker det på WPExplorer faktisk for knapper, fargede spenn, bokser .. osv.). I WP 3.9 kan du fremdeles legge til stiler, men den har fått nytt navn i den nye TinyMCE 4.0 til “Formater”, så det fungerer litt annerledes. Nedenfor er et eksempel på hvordan du aktiverer rullegardinmenyen Formater og legger til noen nye elementer i den.

Nedlastingsmeny for WordPress TInyMCE-formater

Aktiver rullegardinmenyen for formater

Dette gjøres faktisk på samme måte før WP 3.9, men jeg deler tilfelle at du ikke visste hvordan du gjør det.

// Legg til rullegardinmeny for formater i MCE
if (! function_exists ('wpex_style_select')) {
funksjon wpex_style_select ($ knapper) {
array_push ($ knapper, 'styleselect');
return $ knapper;
}
}
add_filter ('mce_buttons', 'wpex_style_select');

Legg til nye elementer i formater

Det er superenkelt å legge til nye elementer. Vær oppmerksom på hvordan jeg har lagt til “$ settings [‘ style_formats_merge ’] = true;” til koden nedenfor, sørger dette for at endringene dine blir lagt til i rullegardinmenyen for formater sammen med andre – ikke skriv over hele saken (kanskje andre plugins ønsker å gjøre bruk av det også).

// Legg til nye stiler i rullegardinmenyen TinyMCE "formater"
if (! function_exists ('wpex_style_dropdown')) {
funksjon wpex_style_dropdown ($ innstillinger) {

// Lag en rekke nye stiler
$ new_style = matrise (
array (
'title' => __ ('Custom Styles', 'wpex'),
'items' => matrise (
array (
'title' => __ ('Temaknapp', 'wpex'),
'selector' => 'a',
'klasser' => 'tema-knapp'
),
array (
'title' => __ ('Marker', 'wpex'),
'inline' => 'span',
'klasser' => 'teksthøydepunkt',
),
),
),
);

// Slå sammen gamle og nye stiler
$ settings ['style_formats_merge'] = true;

// Legg til nye stiler
$ settings ['style_formats'] = json_encode ($ new_style);

// Gå tilbake til nye innstillinger
returner $ innstillinger;

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

Legge til en enkel MCE-knapp

Å legge til en ny knapp i TinyMCE-redigereren er spesielt nyttig for kortkoder, fordi du som bruker ikke trenger å huske noen kortkoder du bare kan klikke på en knapp og den setter inn den. Jeg sier ikke å legge til hundrevis av knapper til TinyMCE for alle kortnummerene dine (jeg hater når utviklere gjør dette, det er så dårlig praksis og ser fryktelig ut), men hvis du legger til 1 eller noen få, vil jeg la det passere �� Hvis du vil du legge til en haug, så bør du opprette en undermeny som forklart i delen som følger.

WordPress MCE Ny knapp

PHP-kode – Erklær den nye MCE-pluginen i WP

Denne koden vil erklære din nye MCE-plugin, og sørg for å endre plasseringen av javascript-filen “mce-button.js” for å matche plasseringen til filen din (som jeg også vil gi deg koden for i neste underavsnitt) som åpenbart gi nytt navn til prefikset “mitt” til noe mer unikt!

// Kobler funksjonene dine inn i riktige filtre
funksjon my_add_mce_button () {
// sjekk brukertillatelser
if (! current_user_can ('edit_posts') &&! current_user_can ('edit_pages')) {
komme tilbake;
}
// sjekk om WYSIWYG er aktivert
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');

// Forklar skript for ny knapp
funksjon my_add_tinymce_plugin ($ plugin_array) {
$ plugin_array ['my_mce_button'] = get_template_directory_uri (). '/ js / mce-button.js';
returner $ plugin_array;
}

// Registrer ny knapp i redaktøren
funksjon my_register_mce_button ($ knapper) {
array_push ($ knapper, 'my_mce_button');
return $ knapper;
}

JS-kode – Legg til knappen i MCE

Denne js-koden går i js-filen som er registrert i kodebiten over i funksjonen “symple_shortcodes_add_tinymce_plugin”. Dette bør legge til en ny tekstknapp som sier “Ny knapp” i redigeringsprogrammet, og når du klikker på den, vil teksten “WPExplorer.com er kjempebra!” (selvfølgelig).

(funksjon () {
tinymce.PluginManager.add ('my_mce_button', funksjon (redaktør, url) {
editor.addButton ('my_mce_button', {
tekst: 'Ny knapp',
ikon: falsk,
onclick: function () {
editor.insertContent ('WPExplorer.com er kjempebra!');
}
});
});
}) ();

Legg til et tilpasset ikon til den nye MCE-knappen

Over jeg viste deg hvordan du legger til en ny knapp som vil vises som “Ny knapp” i redaktøren, dette er litt halt … Så den endrede koden vil vise deg hvordan du legger til ditt eget tilpassede ikon.

Last inn et stilark med CSS-en

Bruk denne funksjonen til å laste inn et nytt stilark for bruk i administrasjonspanelet – noen plugins / temaer legger kanskje allerede til et stilark, så hvis temaet / pluginen gjør det, hopp over dette og bare legg til din tilpassede CSS og finjuster js (vist nedenfor).

funksjon 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 tilpassede CSS

Dette er CSS for å legge til stilarket som er lastet inn tidligere.

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

Finpusse Javascript

Nå er det enkelt å finpusse javascriptet som du la til tidligere for å fjerne tekstparameteren, og i stedet for å sette ikonet til falsk, gi det et tilpasset klassesnavn.

(funksjon () {
tinymce.PluginManager.add ('my_mce_button', funksjon (redaktør, url) {
editor.addButton ('my_mce_button', {
ikon: 'my-mce-icon',
onclick: function () {
editor.insertContent ('WPExplorer.com er kjempebra!');
}
});
});
}) ();

Legge til en knapp med undermeny

MCE-knapp undermeny

Tidligere nevnte jeg at det er en dårlig idé (og det er det) å legge til massevis av nye ikoner til TinyMCE-linjen, så sjekk ut koden nedenfor for å se hvordan du kan redigere javascript for å vise en undermeny for den tilpassede knappen. Hvis du vil se det i aksjon, sjekk ut min Simpele kortkoder video.

(funksjon () {
tinymce.PluginManager.add ('my_mce_button', funksjon (redaktør, url) {
editor.addButton ('my_mce_button', {
tekst: 'Eksempel Dropdown',
ikon: falsk,
type: 'menubutton',
Meny: [
{
tekst: 'Vare 1',
Meny: [
{
tekst: 'Underpunkt 1',
onclick: function () {
editor.insertContent ('WPExplorer.com er kjempebra!');
}
},
{
tekst: 'Underpunkt 2',
onclick: function () {
editor.insertContent ('WPExplorer.com er kjempebra!');
}
}
]
},
{
tekst: 'Punkt 2',
Meny: [
{
tekst: 'Underpunkt 1',
onclick: function () {
editor.insertContent ('WPExplorer.com er kjempebra!');
}
},
{
tekst: 'Underpunkt 2',
onclick: function () {
editor.insertContent ('WPExplorer.com er kjempebra!');
}
}
]
}
]
});
});
}) ();

Legge til et popup-vindu til knappen din ved å klikke

I eksemplet over kan du se at hver knapp ganske enkelt setter inn teksten “WPExplorer.com er kjempebra!” som er kult, men hva med å lage et popup-vindu der en bruker kan endre hva som blir satt inn i teksten? Nå ville det være søtt! Og det er noe jeg har lagt til versjon 1.6 av Symple Shortcodes, noe som gjør plugin-en mye mer brukervennlig.

WordPress MCE Pop-up Window

(funksjon () {
tinymce.PluginManager.add ('my_mce_button', funksjon (redaktør, url) {
editor.addButton ('my_mce_button', {
tekst: 'Eksempel Dropdown',
ikon: falsk,
type: 'menubutton',
Meny: [
{
tekst: 'Vare 1',
Meny: [
{
tekst: 'Pop-Up',
onclick: function () {
editor.windowManager.open ({
tittel: 'Sett inn tilfeldig kortkode',
kropp: [
{
type: 'tekstboks',
navn: 'tekstboksnavn',
etikett: 'Tekstboks',
verdi: '30'
},
{
type: 'tekstboks',
navn: 'multilineName',
etikett: 'Multiline Text Box',
verdi: 'Du kan si mange ting her inne',
multiline: sant,
minBredde: 300,
minHøyde: 100
},
{
type: 'listbox',
navn: 'listboxName',
etikett: 'List Box',
'verdier': [
{tekst: 'Alternativ 1', verdi: '1'},
{tekst: 'Alternativ 2', verdi: '2'},
{tekst: 'Alternativ 3', verdi: '3'}
]
}
],
onsubmit: funksjon (e) {
editor.insertContent ('[random_shortcode textbox = "' + e.data.textboxName + '" multiline = "' + e.data.multilineName + '" listbox = "' + e.data.listboxName + '"]');
}
});
}
}
]
}
]
});
});
}) ();

Dette er kult… Nå hva?

Godt spørsmål! Nå er det på tide at du tar disse fantastiske tweaksene og lager noe episk eller oppdaterer plugins / temaene dine for å være kompatible med den nye TinyMCE i WordPress 3.9. Gi meg beskjed om hva du kommer på i kommentarene nedenfor!

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