WordPress 3.9+ TinyMCE 4 Tweaks: afegir estils, botons, tipus de lletra, desplegables i elements emergents

Una de les meves actualitzacions preferides a WordPress 3.9 era la de TinyMCE versió 4.0 bàsica. El nou TinyMCE té un aspecte més net (realment coincideix amb el quadre de comandament WP) i té una funcionalitat afegida molt agradable. Molts dels meus temes i complements antics van haver de ser actualitzats per treballar amb el nou TinyMCE, així que vaig passar una estona a cercar l’API i esbrinar algunes coses interessants. A continuació us donaré alguns exemples sobre com podeu ampliar la funcionalitat de TinyMCE. No us dirigiré per tots els passos ni pel que significa exactament el codi (això està pensat per als desenvolupadors), però us proporcionaré el codi exacte que podeu copiar / enganxar al vostre tema o complement i, a continuació, ajustar en conseqüència..


Afegint Mida de tipus de lletra i seleccions de família de tipus de lletra

De manera predeterminada, les fonts i les mides de tipus de lletra no s’afegeixen a l’editor de TinyMCE. La funció següent afegeix aquests dos desplegables a l’extrem esquerre de l’editor de la segona fila. Simplement canvieu allà on diu “mce_buttons_2” si voleu que sigui en una altra fila (ex: utilitzeu “mce_buttons_3” per a la tercera fila).

// Habilita la mida de tipus de lletra i la família de tipus de lletra a l'editor
if (! function_exists ('wpex_mce_buttons')) {
funció wpex_mce_buttons (botons $) {
array_unshift (botons $, "fontselect"); // Afegeix selecció de fonts
array_unshift (botons $, 'fontsizeselect'); // Afegeix una mida de tipus de lletra
tornar els botons $;
}
}
add_filter ('mce_buttons_2', 'wpex_mce_buttons');

Afegint mides de tipus de lletra personalitzats

De manera predeterminada, les mides del tipus de lletra es configuren en valors de pt que no sempre són ideals. Prefereixo utilitzar els valors de píxel (12px, 13px, 14px, 16px..etc) i proporcionar més opcions per a la flexibilitat del ratllador. La funció següent modificarà les opcions de mida de font per defecte al selector desplegable.

// Personalitza les mides de la font de l'editor mce
if (! function_exists ('wpex_mce_text_sizes')) {
funció wpex_mce_text_sizes ($ initArray) {
$ initArray ['fontsize_formats'] = "9px 10px 12px 13px 14px 16px 18px 21px 24px 28px 32px 36px";
tornar $ initArray;
}
}
add_filter ('tiny_mce_before_init', 'wpex_mce_text_sizes');

Addició de tipus de lletra personalitzats

Les opcions predeterminades del tipus de lletra al selector de la família de tipus de lletra són totes les fonts “segures per a la web” per defecte, però què passa si voleu afegir més tipus de lletra al selector? Potser alguns tipus de lletra de Google? Ens permetrà fer una ullada a l’exemple següent.

// Afegiu fonts personalitzades a la llista de tipus de lletra
if (! function_exists ("wpex_mce_google_fonts_array")) {
funció wpex_mce_google_fonts_array ($ initArray) {
$ initArray ['font_formats'] = 'Lato = Lato; Andale Mono = andale mono, times; Arial = arial, helvetica, sans-serif; Arial Black = arial black, avant garde; Book Antiqua = book antiqua, palatino; Comic Sans MS = còmic sans ms, sans-serif; Courier New = missatger nou, missatger; Georgia = Geòrgia, palatino; Helvetica = helvetica; Impacte = impacte, chicago; Símbol = símbol; Tahoma = tahoma, arial, helvetica, sans-serif; Terminal = terminal, Mònaco; Times New Roman = Times new Roman, temps; Trebuchet MS = trebuchet ms, geneva; Verdana = verdana, geneva; Webdings = webdings; Wingdings = wingdings, zapf dingbats ';
tornar $ initArray;
}
}
add_filter ('tiny_mce_before_init', 'wpex_mce_google_fonts_array');

Tens notat com he afegit “Lato” a la llista del codi anterior? És tan senzill! Al meu tema total de WordPress, realitzo un passatge a través de qualsevol tipus de lletra personalitzada que s’utilitza al lloc tal com es defineix al tauler de temes i els afegeixo al quadre de selecció, de manera que també estiguin disponibles mentre editeu les vostres publicacions / pàgines (dolces). Però el codi NOMÉS anuncia la família de tipus de lletra al menú desplegable. No carregarà màgicament el guió de manera que quan canvieu el text a l’editor, realment podreu veure el tipus de lletra personalitzat que s’hi aplica … Això és el que fa el codi següent.!

// Afegiu Google Scripts per utilitzar-lo amb l'editor
if (! function_exists ('wpex_mce_google_fonts_styles')) {
funció 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 el menú desplegable Formats i estils i afegeix nous estils

Recordeu el desplegable “Estils” del WP 3.8? Va ser molt maco! Podeu utilitzar-lo per afegir algunes classes interessants per ser utilitzades a l’editor de publicacions (el faig servir a WPExplorer en realitat per a botons, colps de colors, caixes … etc). A WP 3.9 encara podeu afegir estils. Tot i així, a la nova TinyMCE 4.0 s’ha rebatejat com a “Formats”, de manera que funciona una mica diferent. A continuació, es mostra un exemple de com habilitar el menú desplegable Formats i afegir-hi alguns elements nous.

Menú desplegable Formats WordPress TInyMCE

Activa el menú desplegable Formats

Això es realitza de la mateixa manera abans del WP 3.9, però comparteixo en cas que no sabíeu com fer-ho.

// Afegir menú desplegable de formats a MCE
if (! function_exists ('wpex_style_select')) {
funció wpex_style_select (botons $) {
array_push (botons $, 'styleselect');
tornar els botons $;
}
}
add_filter ('mce_buttons', 'wpex_style_select');

Afegiu nous elements als formats

Afegir nous articles és molt fàcil. Tingueu en compte com he afegit “$ settings [” style_formats_merge “] = true;” al codi següent, això us assegureu que les vostres modificacions s’afegeixen al menú desplegable dels formats juntament amb altres persones, no sobreescriviu tot (potser altres complements també en volen fer servir).

// Afegiu nous estils al menú desplegable "formats" de TinyMCE
if (! function_exists ('wpex_styles_dropdown')) {
funció wpex_styles_dropdown ($ settings) {

// Creeu un conjunt de nous estils
$ new_styles = matriu (
matriu (
'title' => __ ('Estils personalitzats', 'wpex'),
'articles' => matriu (
matriu (
'title' => __ ('Botó de tema', 'wpex'),
'selector' => 'a',
'classes' => 'botó de tema'
),
matriu (
'title' => __ ('Ressaltar', 'wpex'),
'inline' => 'span',
'classes' => 'text-highlight',
),
),
),
);

// Combina estils vells i nous
$ settings ['style_formats_merge'] = true;

// Afegeix nous estils
$ settings ['style_formats'] = json_encode ($ new_styles);

// Torna la configuració nova
retornar la configuració de $;

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

Afegir un botó MCE simple

Afegir un nou botó a l’editor de TinyMCE és especialment útil per a codis drecers, ja que com a usuari no haureu de recordar cap codi curt, simplement podeu fer clic sobre un botó i el fa inserir. No dic que afegeixi 100 botons al TinyMCE per a tots els vostres codis ràpids (odio quan els desenvolupadors fan això, és una mala pràctica i sembla horrible), però si n’afegiu 1 o uns quants, deixaré que passi pass Si voldreu afegir un grup, i després haureu de crear un submenú tal com s’explica a la secció següent.

Nou botó de WordPress MCE

Codi PHP: declara el nou complement MCE a WP

Aquest codi declararà que el vostre nou complement MCE assegureu-vos de canviar la ubicació del fitxer javascript “mce-button.js” perquè coincideixi amb la ubicació del fitxer (que us donaré el codi també a la propera subsecció). com obviament canviar el prefix “el meu” en alguna cosa més únic!

// Agafa les funcions als filtres correctes
function my_add_mce_button () {
// comprovar els permisos d’usuari
if (! current_user_can ('edit_posts') &&! current_user_can ('edit_pàgines')) {
retorn;
}
// comproveu si està activat 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");

// Declarar script per a un botó nou
function my_add_tinymce_plugin ($ plugin_array) {
$ plugin_array ['my_mce_button'] = get_template_directory_uri (). '/ js / mce-button.js';
tornar $ plugin_array;
}

// Registre un nou botó a l’editor
function my_register_mce_button (botons $) {
array_push (botons $, 'my_mce_button');
tornar els botons $;
}

Codi JS: afegeix el botó al MCE

Aquest codi js entra al fitxer js registrat al fragment anterior a la funció “symple_shortcodes_add_tinymce_plugin”. Això hauria d’afegir un nou botó de text que digui “botó nou” al vostre editor i quan hi feu clic hi inserirà el text “WPExplorer.com és fantàstic!” (és clar).

(funció () {
tinymce.PluginManager.add ('my_mce_button', funció (editor, url) {
editor.addButton ("my_mce_button", {
text: "Nou botó",
icona: fals,
onclick: function () {
editor.insertContent ("WPExplorer.com és fantàstic!");
}
});
});
}) ();

Afegiu una icona personalitzada al vostre botó MCE nou

A sobre us he mostrat com afegir un nou botó que apareixerà com a “botó nou” a l’editor, que és una mica coix … Així que el codi alterat us mostrarà com afegir la vostra pròpia icona personalitzada.

Carregueu un full d’estils amb el vostre CSS

Utilitzeu aquesta funció per carregar un nou full d’estils per al vostre plafó d’administració. Alguns complements / temes ja podrien estar afegint una fulla d’estil, de manera que si el vostre tema / complement està fent això, simplement afegir el vostre CSS personalitzat i ajustar el js (mostrat a continuació).

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

El vostre CSS personalitzat

Aquest és el CSS per afegir el full d’estil carregat anteriorment.

i.my-mce-icon {
background-image: url ("EL TEU URL de ICON");
}

Trieu el vostre Javascript

Ara, només cal ajustar el javascript que heu afegit anteriorment per eliminar el paràmetre de text i en lloc de configurar la icona en fals, li donem un nom de classe personalitzat.

(funció () {
tinymce.PluginManager.add ('my_mce_button', funció (editor, url) {
editor.addButton ("my_mce_button", {
icona: "my-mce-icon",
onclick: function () {
editor.insertContent ("WPExplorer.com és fantàstic!");
}
});
});
}) ();

Afegir un botó amb el submenú

Submenú del botó MCE

Anteriorment, vaig esmentar que afegir un munt de noves icones a la barra de TinyMCE és una mala idea (i ho és), així que mireu el codi següent per veure com podeu editar el javascript per mostrar un submenú per al vostre botó personalitzat. Si voleu veure-la en acció, feu una ullada a la meva Vídeo de dreceres simples.

(funció () {
tinymce.PluginManager.add ('my_mce_button', funció (editor, url) {
editor.addButton ("my_mce_button", {
text: "Desplegable d'exemple",
icona: fals,
tipus: "menú",
menú: [
{
text: "Element 1",
menú: [
{
text: "Subítol 1",
onclick: function () {
editor.insertContent ("WPExplorer.com és fantàstic!");
}
},
{
text: "Sub item 2",
onclick: function () {
editor.insertContent ("WPExplorer.com és fantàstic!");
}
}
]
},
{
text: "Element 2",
menú: [
{
text: "Subítol 1",
onclick: function () {
editor.insertContent ("WPExplorer.com és fantàstic!");
}
},
{
text: "Sub item 2",
onclick: function () {
editor.insertContent ("WPExplorer.com és fantàstic!");
}
}
]
}
]
});
});
}) ();

Afegint una finestra emergent al botó del clic al botó

A l’exemple anterior, podreu notar que cada botó simplement insereix el text “WPExplorer.com és fantàstic!” la qual cosa és fantàstic, però què passa amb la creació d’una finestra emergent on un usuari pot modificar el que s’insereix al text? Ara seria dolç! I he afegit a la versió 1.6 dels meus shortcodes simples, cosa que fa que el connector sigui molt més fàcil d’utilitzar.

Finestra emergent WordPress MCE

(funció () {
tinymce.PluginManager.add ('my_mce_button', funció (editor, url) {
editor.addButton ("my_mce_button", {
text: "Desplegable d'exemple",
icona: fals,
tipus: "menú",
menú: [
{
text: "Element 1",
menú: [
{
text: "Pop-Up",
onclick: function () {
editor.windowManager.open ({
title: "Insereix codi curt aleatori",
cos: [
{
tipus: "caixa de text",
nom: 'textboxName',
etiqueta: "Caixa de text",
valor: "30"
},
{
tipus: "caixa de text",
nom: 'multilineName',
etiqueta: "Caixa de text multilínia",
valor: "Podeu dir moltes coses aquí",
multilínia: cert,
amplada mínima: 300,
min Alçada: 100
},
{
tipus: "llista de llistes",
nom: "nom de llista",
etiqueta: "Quadre de llista",
"valors": [
{text: "Opció 1", valor: "1"},
{text: "Opció 2", valor: "2"},
{text: "Opció 3", valor: "3"}
]
}
],
onsubmit: function (e) {
editor.insertContent ('[random_shortcode textbox = "' + e.data.textboxName + '" multiline = "' + e.data.multilineName + '" listbox = "' + e.data.listboxName + '"]');
}
});
}
}
]
}
]
});
});
}) ();

Això és genial … Ara què?

Bona pregunta! Ara és el moment que facis aquests canvis fantàstics i creis alguna cosa èpica o actualitzeu els vostres plugins / temes perquè siguin compatibles amb el nou TinyMCE de WordPress 3.9. Feu-me saber què es presenta als comentaris a continuació!

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