Una dintre actualizările mele preferate în WordPress 3.9 a fost versiunea principală a versiunii 4.0 TinyMCE. Noul TinyMCE arată mai curat (se potrivește cu adevărat cu tabloul de bord WP) și are funcționalități adăugate cu adevărat. O mare parte din vechile mele teme și pluginuri au trebuit să fie actualizate pentru a lucra cu noul TinyMCE, așa că am petrecut ceva timp să sap API-ul și găsind niște chestii mișto. Mai jos vă voi oferi câteva exemple despre modul în care puteți extinde funcționalitatea TinyMCE. Nu o să vă parcurg prin toți pașii sau ceea ce înseamnă codul exact (acesta este destinat dezvoltatorilor), ci vă va oferi codul exact pe care îl puteți copia / insera în tema sau pluginul dvs. și apoi reglați în consecință.


Adăugarea selectării mărimii fontului și a fontului

În mod implicit, fonturile personalizate și dimensiunile fonturilor nu sunt adăugate în editorul TinyMCE. Funcția de mai jos va adăuga ambele aceste meniuri în extrema stânga a editorului din al doilea rând. Pur și simplu schimbați locul în care scrie „mce_buttons_2” dacă doriți într-un alt rând (ex: folosiți „mce_buttons_3” pentru al treilea rând).

// Activați dimensiunea fontului și selecțiile familiei de fonturi în editor
if (! function_exists ('wpex_mce_buttons')) {
function wpex_mce_buttons (butoane $) {
array_unshift (butoane $, 'fontselect'); // Adăugare Selectare font
array_unshift (butoane $, 'fontsizeselect'); // Adăugare Selectare dimensiune font
returneaza butoanele $;
}
}
add_filter ('mce_buttons_2', 'wpex_mce_buttons');

Adăugarea dimensiunilor de fonturi personalizate

În mod implicit, dimensiunile fontului sunt setate la valori pt care nu sunt întotdeauna ideale. Prefer să folosesc valori ale pixelilor (12px, 13px, 14px, 16px..etc) și să ofer mai multe opțiuni pentru flexibilitatea graterului. Funcția de mai jos va modifica opțiunile implicite pentru dimensiunea fontului în selectorul vertical.

// Personalizați dimensiunile fontului editorului 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";
returna $ initArray;
}
}
add_filter ('tiny_mce_before_init', 'wpex_mce_text_sizes');

Adăugarea fonturilor personalizate

Opțiunile implicite ale fontului din selecția familiei de fonturi sunt toate fonturile „sigure pentru web”, dar dacă doriți să adăugați mai multe fonturi în selector? Poate unele fonturi Google? Este foarte ușor să aruncăm o privire la exemplul de mai jos.

// Adăugați fonturi personalizate în lista Fonturi
if (! function_exists ('wpex_mce_google_fonts_array')) {
function wpex_mce_google_fonts_array ($ initArray) {
$ initArray ['font_formats'] = 'Lato = Lato; Andale Mono = andale mono, ori; Arial = arial, helvetica, sans-serif; Arial Black = arial negru, avant garde; Book Antiqua = book antiqua, palatino; Comic Sans MS = comic sans ms, sans-serif; Courier New = curier nou, curier; Georgia = Georgia, palatino; Helvetica = helvetica; Impact = impact, chicago; Simbol = simbol; 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 ';
returna $ initArray;
}
}
add_filter ('tiny_mce_before_init', 'wpex_mce_google_fonts_array');

Observați cum am adăugat „Lato” la lista din codul de mai sus? Este atat de simplu! În tema mea totală de WordPress, fac o buclă prin intermediul oricărui font personalizat folosit pe site, așa cum este definit în panoul tematic și le adaug în caseta selectată, astfel încât să fie disponibile și în timpul editării postărilor / paginilor (dulci). Dar codul anunță NUMAI font-font-uri în lista verticală, acesta nu va încărca în mod magic scriptul, astfel încât atunci când schimbați textul în editor, puteți vedea de fapt acel font personalizat aplicat acestuia … Asta face codul de mai jos.!

// Adăugați Scripturi Google pentru utilizare cu editorul
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');

Activați meniul derulant Formate (stiluri) și Adăugați stiluri noi

Vă amintiți de derularea „Stiluri” din WP 3.8? A fost destul de fain! Puteți să-l utilizați pentru a adăuga câteva clase superioare pentru a fi utilizate în editorul de post (îl folosesc pe WPExplorer de fapt pentru butoane, întinderi colorate, cutii .. etc. Vom fi în WP 3.9 puteți adăuga în continuare stiluri, cu toate acestea, în noul TinyMCE 4.0 a fost redenumit la „Formate”, așa că funcționează un pic diferit. Mai jos este un exemplu despre cum să activați funcția verticală Formats și să adăugați, de asemenea, unele elemente noi.

Meniu derulant Formate WordPress TInyMCE

Activați meniul derulant Formate

De fapt, acest lucru se face în același mod înainte de WP 3.9, dar împărtășesc în caz că nu știai cum să faci.

// Adăugați meniul derulant formate la MCE
if (! function_exists ('wpex_style_select')) {
function wpex_style_select (butoane $) {
array_push (butoane $, 'styleselect');
returneaza butoanele $;
}
}
add_filter ('mce_buttons', 'wpex_style_select');

Adăugați elemente noi în formate

Adăugarea de articole noi este foarte ușoară. Vă rugăm să observați cum am adăugat „$ settings [‘style_formats_merge’] = true;” la codul de mai jos, acest lucru vă asigură că modificările dvs. sunt adăugate în meniul vertical formate împreună cu alte persoane – nu suprascrieți întregul lucru (poate că alte plugin-uri vor să le utilizeze).

// Adăugați stiluri noi în meniul derulant din meniul „formate” TinyMCE
if (! function_exists ('wpex_styles_dropdown')) {
function wpex_styles_dropdown ($ settings) {

// Creați o serie de stiluri noi
$ new_styles = array (
array (
'title' => __ ('Stiluri personalizate', 'wpex'),
'items' => array (
array (
'title' => __ ('Butonul temei', 'wpex'),
'selector' => 'a',
'classes' => 'buton tematic'
),
array (
'title' => __ ('Evidenție', 'wpex'),
'inline' => 'span',
'classes' => 'text-evidențiere',
),
),
),
);

// Unire stiluri vechi și noi
$ settings ['style_formats_merge'] = true;

// Adăugați stiluri noi
$ settings ['style_formats'] = json_encode ($ new_styles);

// Returnează Setări noi
returnare setări $;

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

Adăugarea unui buton MCE simplu

Adăugarea unui nou buton la editorul TinyMCE este deosebit de utilă pentru shortcodes, deoarece, în calitate de utilizator nu trebuie să vă amintiți codurile scurte, puteți pur și simplu să faceți clic pe un buton și îl introduceți. Nu spun să adăugăm 100 de butoane la TinyMCE pentru toate shortcodes-urile mele (urăsc atunci când dezvoltatorii fac asta, este o practică atât de proastă și arată oribil), dar dacă adăugați 1 sau câțiva îl voi lăsa să treacă �� Dacă doriți să adăugați o grămadă, atunci ar trebui să creați un submeniu așa cum este explicat în secțiunea care urmează.

Buton nou WordPress MCE

Cod PHP – Declarați noul plugin MCE în WP

Acest cod va declara noul dvs. plugin MCE asigurați-vă că veți schimba locația fișierului javascript „mce-button.js” pentru a se potrivi cu locația fișierului dvs. (pentru care vă voi da și codul în secțiunea următoare). întrucât, evident, redenumiți prefixul „meu” în ceva mai unic!

// Îți conectează funcțiile în filtrele corecte
function my_add_mce_button () {
// verificați permisiunile utilizatorului
if (! current_user_can ('edit_posts') &&! current_user_can ('edit_pagini')) {
întoarcere;
}
// verificați dacă WYSIWYG este activat
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');

// Declarați scriptul pentru butonul nou
function my_add_tinymce_plugin ($ plugin_array) {
$ plugin_array ['my_mce_button'] = get_template_directory_uri (). '/ js / mce-button.js';
returna $ plugin_array;
}

// Înregistrează butonul nou în editor
function my_register_mce_button (butoane $) {
array_push (butoane $, 'my_mce_button');
returneaza butoanele $;
}

Cod JS – Adăugați butonul la MCE

Acest cod js intră în fișierul js înregistrat în fragmentul de mai sus în funcția „symple_shortcodes_add_tinymce_plugin”. Acest lucru ar trebui să adauge un nou buton de text care spune „Buton nou” în editorul dvs. și atunci când faceți clic pe acesta va introduce textul „WPExplorer.com este minunat!” (desigur).

(funcție () {
tinymce.PluginManager.add ('my_mce_button', funcție (editor, url) {
editor.addButton ('my_mce_button', {
text: „Buton nou”,
pictogramă: falsă,
onclick: function () {
editor.insertContent ('WPExplorer.com este minunat!');
}
});
});
}) ();

Adăugați o pictogramă personalizată la noul dvs. buton MCE

Mai sus v-am arătat cum să adăugați un nou buton care va fi afișat ca „buton nou” în editor, acesta este un pic șchiop… Deci codul modificat vă va arăta cum să adăugați propria pictogramă personalizată.

Încărcați o foaie de stil cu CSS

Utilizați această funcție pentru a încărca o nouă foaie de stil pentru a fi utilizată în panoul de administrare – unele plugin-uri / teme ar putea adăuga deja o foaie de stil, așa că dacă tema / pluginul dvs. face asta săriți acest lucru și adăugați doar CSS-ul dvs. personalizat și reglați js-ul (prezentat mai jos).

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

CSS-ul dvs. personalizat

Acesta este CSS pentru a adăuga fișa de stil încărcată anterior.

i.my-mce-icon {
fundal imagine: url („URL-ul dvs. ICON”);
}

Îmbracă-ți Javascriptul

Acum simplificați javascriptul pe care l-ați adăugat anterior pentru a elimina parametrul text și în loc să setați pictograma la fals, îi dați un nume de clasă personalizat.

(funcție () {
tinymce.PluginManager.add ('my_mce_button', funcție (editor, url) {
editor.addButton ('my_mce_button', {
pictogramă: „pictograma mea”,
onclick: function () {
editor.insertContent ('WPExplorer.com este minunat!');
}
});
});
}) ();

Adăugarea unui buton cu submeniul

Submeniul butonului MCE

Mai devreme am menționat că adăugarea unei tone de pictograme noi în bara TinyMCE este o idee proastă (și este), așa că consultați codul de mai jos pentru a vedea cum puteți edita javascriptul pentru a afișa un submeniu pentru butonul dvs. personalizat. Dacă doriți să-l vedeți în acțiune, consultați-mi Coduri de scurtcircuite video.

(funcție () {
tinymce.PluginManager.add ('my_mce_button', funcție (editor, url) {
editor.addButton ('my_mce_button', {
text: „Exemplu dropdown”,
pictogramă: falsă,
tip: 'menubutton',
meniul: [
{
text: „Articolul 1”,
meniul: [
{
text: „Subpunctul 1”,
onclick: function () {
editor.insertContent ('WPExplorer.com este minunat!');
}
},
{
text: „Subpunctul 2”,
onclick: function () {
editor.insertContent ('WPExplorer.com este minunat!');
}
}
]
},
{
text: „Articolul 2”,
meniul: [
{
text: „Subpunctul 1”,
onclick: function () {
editor.insertContent ('WPExplorer.com este minunat!');
}
},
{
text: „Subpunctul 2”,
onclick: function () {
editor.insertContent ('WPExplorer.com este minunat!');
}
}
]
}
]
});
});
}) ();

Adăugarea unei ferestre pop-up la butonul dvs. pe clic

În exemplul de mai sus, puteți observa că fiecare buton introduce pur și simplu textul „WPExplorer.com este minunat!” ceea ce este mișto, dar ce zici de crearea unei ferestre pop-up în care un utilizator poate modifica ceea ce este inserat în text? Acum ar fi dulce! Și este un lucru pe care l-am adăugat la versiunea 1.6 din Simple Shortcodes, ceea ce face ca pluginul să fie mult mai ușor de utilizat.

Fereastra pop-up WordPress MCE

(funcție () {
tinymce.PluginManager.add ('my_mce_button', funcție (editor, url) {
editor.addButton ('my_mce_button', {
text: „Exemplu dropdown”,
pictogramă: falsă,
tip: 'menubutton',
meniul: [
{
text: „Articolul 1”,
meniul: [
{
text: „Pop-Up”,
onclick: function () {
editor.windowManager.open ({
title: 'Introduceți codul scurt aleatoriu',
corp: [
{
tip: „caseta de text”,
nume: 'textboxName',
etichetă: „Caseta de text”,
valoare: „30”
},
{
tip: „caseta de text”,
nume: 'multilineName',
etichetă: „Caseta de text multilină”,
valoare: „Puteți spune multe lucruri aici”,
multilină: adevărat,
lățime min: 300,
min Înălțime: 100
},
{
tip: „listbox”,
nume: 'listboxName',
etichetă: „Caseta de listă”,
'valori': [
{text: 'Opțiunea 1', valoare: '1'},
{text: 'Opțiunea 2', valoare: '2'},
{text: 'Opțiunea 3', valoare: '3'}
]
}
],
onsubmit: function (e) {
editor.insertContent ('[random_shortcode textbox = "' + e.data.textboxName + '" multiline = "' + e.data.multilineName + '" listbox = "' + e.data.listboxName + '"]');
}
});
}
}
]
}
]
});
});
}) ();

Este mișto … Acum ce?

Buna intrebare! Acum este timpul să luați aceste modificări minunate și să mergeți să creați ceva epic sau să actualizați pluginurile / temele pentru a fi compatibile cu noul TinyMCE din WordPress 3.9. Lasă-mă să știu cu ce vii în comentariile de mai jos!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me