WordPress 3.9+ TinyMCE 4 Tweaks: Lägga till stilar, knappar, teckensnitt, drop-downs och popup-fönster

En av mina favorituppdateringar i WordPress 3.9 var att göra TinyMCE version 4.0-kärnan. Den nya TinyMCE ser ut som en renare look (matchar verkligen WP-instrumentbrädan) och den har lite riktigt bra funktionalitet. Mycket av mina gamla teman och plugins måste uppdateras för att fungera med den nya TinyMCE så jag spenderade lite tid med att gräva igenom API och räkna ut några coola saker. Nedan ger jag några exempel på hur du kan utöka TinyMCE: s funktionalitet. Jag tänker inte gå igenom alla steg eller vad koden betyder exakt (detta är avsett för utvecklare) men kommer att ge dig den exakta koden du kan kopiera / klistra in i ditt tema eller plugin och sedan justera i enlighet därmed.


Lägga till teckensnittsstorlek och teckensnittsfamilj

Som standard läggs inte anpassade teckensnitt och teckenstorlekar till i TinyMCE-redigeraren. Funktionen nedan lägger till båda dessa dropdowns längst till vänster för redaktören i den andra raden. Ändra helt enkelt där det står ‘mce_buttons_2’ om du vill ha det i en annan rad (ex: använd ‘mce_buttons_3’ för den tredje raden).

// Aktivera teckensnittsstorlek & teckensnittsfamiljer i redigeraren
if (! function_exists ('wpex_mce_buttons')) {
funktion wpex_mce_buttons ($ knappar) {
array_unshift ($ knappar, 'fontselect'); // Lägg till typsnitt Välj
array_unshift ($ knappar, 'fontsize select'); // Lägg till teckenstorlek Välj
returnera $ knappar;
}
}
add_filter ('mce_buttons_2', 'wpex_mce_buttons');

Lägga till anpassade teckensnittstorlekar

Som standard är teckensnittsstorlekarna inställda på pt-värden som inte alltid är idealiska. Jag föredrar att använda pixelvärden (12px, 13px, 14px, 16px..etc) och ge fler alternativ för raspflexibilitet. Funktionen nedan förändrar standardinställningarna för teckensnittsstorlek i rullgardinsväljaren.

// Anpassa mce editorstorlekstorlekar
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";
returnera $ initArray;
}
}
add_filter ('liten_mce_before_init', 'wpex_mce_text_storlekar');

Lägga till anpassade teckensnitt

Standardinställningarna för teckensnitt i teckensnittsväljaren är alla “webbsäkra” teckensnitt som standard, men vad händer om du ville lägga till fler teckensnitt till väljaren? Kanske några Google-teckensnitt? Det är väldigt enkelt att titta på exemplet nedan.

// Lägg till anpassade teckensnitt i teckensnittslistan
if (! function_exists ('wpex_mce_google_fonts_array')) {
funktion wpex_mce_google_fonts_array ($ initArray) {
$ initArray ['font_formats'] = 'Lato = Lato; Andale Mono = andale mono, gånger; Arial = arial, helvetica, sans-serif; Arial Black = arial black, avant garde; Book Antiqua = book antiqua, palatino; Comic Sans MS = komiska 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 ";
returnera $ initArray;
}
}
add_filter ('liten_mce_before_init', 'wpex_mce_google_fonts_array');

Lägg märke till hur jag lade till “Lato” i listan i koden ovan? Det är så enkelt! I mitt totala WordPress-tema går jag faktiskt igenom alla anpassade teckensnitt som används på webbplatsen enligt definitionen i tempanelen och lägger till dem i markeringsrutan så att de också är tillgängliga när du redigerar dina inlägg / sidor (söta). Men koden annonserar BARA teckensnittfamiljen till rullgardinsmen, men laddar inte skriptet magiskt så att när du ändrar din text i redigeraren kan du faktiskt se det anpassade teckensnittet som tillämpas på det … Det är vad koden nedan gör!

// Lägg till Google-skript för användning med redigeraren
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');

Aktivera rullgardinsmenyn Formater (stilar) & Lägg till nya format

Kommer du ihåg “Styles” dropdown i WP 3.8? Det var ganska coolt! Du kan använda den för att lägga till några coola klasser som ska användas i postredigeraren (jag använder den på WPExplorer faktiskt för knappar, färgade spann, rutor … etc.). Vi kommer i WP 3.9 att du fortfarande kan lägga till stilar, men det har bytt namn i den nya TinyMCE 4.0 till “Formats” så det fungerar lite annorlunda. Nedan visas ett exempel på hur du aktiverar rullgardinsmenyn Formater och lägger till några nya objekt i den.

WordPress TInyMCE-rullgardinsmeny för formater

Aktivera rullgardinsmenyn Formater

Detta görs faktiskt på samma sätt före WP 3.9 men jag delar om du inte visste hur du gör det.

// Lägg till rullgardinsmeny för format till MCE
if (! function_exists ('wpex_style_select')) {
funktion wpex_style_select ($ knappar) {
array_push ($ knappar, 'styleselect');
returnera $ knappar;
}
}
add_filter ('mce_buttons', 'wpex_style_select');

Lägg till nya objekt i formaten

Det är superlätt att lägga till nya artiklar. Observera hur jag har lagt till “$ inställningar [” style_formats_merge “] = true;” till koden nedan ser detta till att dina redigeringar läggs till i rullgardinsmenyn för format tillsammans med andra – inte skriv över hela saken (kanske andra plugins vill använda den också).

// Lägg till nya stilar i rullgardinsmenyn TinyMCE "format"
if (! function_exists ('wpex_style_dropdown')) {
funktion wpex_style_dropdown ($ inställningar) {

// Skapa en rad nya stilar
$ new_style = array (
array (
'title' => __ ('Custom Styles', 'wpex'),
'items' => array (
array (
'title' => __ ('Temaknapp', 'wpex'),
'selector' => 'a',
'klasser' => 'temaknapp'
),
array (
'title' => __ ('Markera', 'wpex'),
'inline' => 'span',
'klasser' => 'text-höjdpunkt',
),
),
),
);

// Slå samman gamla och nya stilar
$ inställningar ['style_formats_merge'] = true;

// Lägg till nya stilar
$ inställningar ['style_formats'] = json_encode ($ new_style);

// Returnera nya inställningar
returnera $ inställningar;

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

Lägga till en enkel MCE-knapp

Att lägga till en ny knapp i TinyMCE-redigeraren är särskilt användbart för kortkoder, eftersom du som användare inte behöver komma ihåg några kortkoder kan du helt enkelt klicka på en knapp och den sätter in den. Jag säger inte att lägga till 100-tal knappar till TinyMCE för alla dina kortkoder (jag hatar när utvecklare gör det, det är så dåligt praxis och ser hemskt ut) men om du lägger till 1 eller några låter jag det passera �� Om du vill lägga till ett gäng, då ska du skapa en undermeny som förklaras i avsnittet som följer.

WordPress MCE Ny knapp

PHP-kod – Förklara den nya MCE-plugin i WP

Denna kod kommer att förklara att ditt nya MCE-plugin måste se till att du ändrar platsen för javascript-filen “mce-button.js” så att den matchar platsen för din fil (som jag ger dig koden för också i nästa underavsnitt) som uppenbarligen byter namn på prefixet “mitt” till något mer unikt!

// Ansluter dina funktioner till rätt filter
funktion my_add_mce_button () {
// kontrollera användarrättigheter
if (! current_user_can ('edit_posts') &&! current_user_can ('edit_pages')) {
lämna tillbaka;
}
// kontrollera om WYSIWYG är aktiverat
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');

// Förklara skript för ny knapp
funktion my_add_tinymce_plugin ($ plugin_array) {
$ plugin_array ['my_mce_button'] = get_template_directory_uri (). '/ js / mce-button.js';
returnera $ plugin_array;
}

// Registrera ny knapp i redigeraren
funktion my_register_mce_button ($ knappar) {
array_push ($ knappar, 'my_mce_button');
returnera $ knappar;
}

JS-kod – Lägg till knappen i MCE

Denna js-kod går i js-filen som är registrerad i utdraget ovan i funktionen “symple_shortcodes_add_tinymce_plugin”. Detta bör lägga till en ny textknapp som säger “Ny knapp” i din redigerare och när du klickar på den kommer texten “WPExplorer.com är fantastisk!” (självklart).

(funktion () {
tinymce.PluginManager.add ('my_mce_button', funktion (redaktör, url) {
editor.addButton ('my_mce_button', {
text: 'Ny knapp',
ikon: falsk,
onclick: function () {
editor.insertContent ('WPExplorer.com är fantastisk!');
}
});
});
}) ();

Lägg till en anpassad ikon till din nya MCE-knapp

Ovan visade jag hur du lägger till en ny knapp som kommer att visas som “Ny knapp” i redigeraren, det här är lite halt … Så den ändrade koden visar hur du lägger till din egen anpassade ikon.

Ladda ett stilark med ditt CSS

Använd den här funktionen för att ladda ett nytt formatmall för användning i din adminpanel – vissa plugins / teman lägger redan till ett formatmall så om ditt tema / plugin gör det hoppar du över detta och lägger bara till din anpassade CSS och justerar js (visas nedan).

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 anpassade CSS

Detta är CSS för att lägga till det formatmall som laddats tidigare.

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

Justera ditt Javascript

Nu enkelt justera javascript som du har lagt till tidigare för att ta bort textparametern och istället för att ställa in ikonen till falskt ge det ett anpassat klassnamn.

(funktion () {
tinymce.PluginManager.add ('my_mce_button', funktion (redaktör, url) {
editor.addButton ('my_mce_button', {
icon: 'my-mce-icon',
onclick: function () {
editor.insertContent ('WPExplorer.com är fantastisk!');
}
});
});
}) ();

Lägga till en knapp med undermeny

MCE-knappmenyn

Tidigare nämnde jag att det är en dålig idé (och det är) att lägga till massor av nya ikoner i TinyMCE-fältet så kolla in koden nedan för att se hur du kan redigera javascript för att visa en undermeny för din anpassade knapp. Om du vill se det i aktion, kolla in min Symple Shortcodes Video.

(funktion () {
tinymce.PluginManager.add ('my_mce_button', funktion (redaktör, url) {
editor.addButton ('my_mce_button', {
text: 'Exempel på dropdown',
ikon: falsk,
typ: 'menubutton',
meny: [
{
text: 'Punkt 1',
meny: [
{
text: "Underpunkt 1",
onclick: function () {
editor.insertContent ('WPExplorer.com är fantastisk!');
}
},
{
text: "Underpost 2",
onclick: function () {
editor.insertContent ('WPExplorer.com är fantastisk!');
}
}
]
},
{
text: 'Punkt 2',
meny: [
{
text: "Underpunkt 1",
onclick: function () {
editor.insertContent ('WPExplorer.com är fantastisk!');
}
},
{
text: "Underpost 2",
onclick: function () {
editor.insertContent ('WPExplorer.com är fantastisk!');
}
}
]
}
]
});
});
}) ();

Lägga till ett popup-fönster till din knapp på Click

I exemplet ovan kanske du märker att varje knapp helt enkelt sätter in texten “WPExplorer.com är fantastisk!” vilket är coolt, men vad sägs om att skapa ett popup-fönster där en användare kan ändra vad som införs i texten? Nu skulle det vara söt! Och det är något jag har lagt till version 1.6 av mina Symple Shortcodes, vilket gör plugin till mycket mer användarvänlig.

WordPress MCE popup-fönster

(funktion () {
tinymce.PluginManager.add ('my_mce_button', funktion (redaktör, url) {
editor.addButton ('my_mce_button', {
text: 'Exempel på dropdown',
ikon: falsk,
typ: 'menubutton',
meny: [
{
text: 'Punkt 1',
meny: [
{
text: 'Pop-Up',
onclick: function () {
editor.windowManager.open ({
titel: 'Infoga slumpmässig kortkod,
kropp: [
{
typ: 'textbox',
namn: 'textboxName',
etikett: 'Textbox',
värde: '30'
},
{
typ: 'textbox',
namn: 'multilineName',
etikett: 'Multiline Text Box',
värde: "Du kan säga mycket här inne",
multiline: sant,
min Bredd: 300,
minHöjd: 100
},
{
typ: 'listbox',
namn: 'listboxName',
etikett: 'Listbox',
"värden": [
{text: 'Alternativ 1', värde: '1'},
{text: 'Alternativ 2', värde: '2'},
{text: 'Alternativ 3', värde: '3'}
]
}
],
onsubmit: funktion (e) {
editor.insertContent ('[random_shortcode textbox = "' + e.data.textboxName + '" multiline = "' + e.data.multilineName + '" listbox = "' + e.data.listboxName + '"]');
}
});
}
}
]
}
]
});
});
}) ();

Det här är coolt … Nu vad?

Bra fråga! Nu är det dags för dig att ta dessa fantastiska tweaks och gå att skapa något episkt eller uppdatera dina plugins / teman för att vara kompatibla med den nya TinyMCE i WordPress 3.9. Låt mig veta vad du kommer med i kommentarerna nedan!

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