Italiano
Română
Русский¿Cómo usar iconos de FontAwesome en el editor TinyMCE?
Estoy intentando agregar un botón de YouTube en el editor TinyMCE.
Aquí está el archivo recent-posts.js que está en la carpeta js del directorio del tema.
(function() {
tinymce.create('tinymce.plugins.buttons', {
init : function(ed, url) {
//para el botón de posts recientes
ed.addButton('recentposts', {
title : 'Posts recientes',
image : url + '/youtube.png',
onclick : function() {
var posts = prompt("Número de posts", "");
var text = prompt("Encabezado de la lista", "");
if (text != null && text != ''){
if (posts != null && posts != '')
ed.execCommand('mceInsertContent', false, '[recent-posts posts="'+posts+'"]'+text+'[/recent-posts]');
else
ed.execCommand('mceInsertContent', false, '[recent-posts]'+text+'[/recent-posts]');
}
else{
if (posts != null && posts != '')
ed.execCommand('mceInsertContent', false, '[recent-posts posts="'+posts+'"]');
else
ed.execCommand('mceInsertContent', false, '[recent-posts]');
}
}
});
//para video de YouTube
ed.addButton('youtube', {
title : 'YouTube',
text: 'YouTube',
onclick : function() {
var id = prompt("ID del video", "");
var text = prompt("Encabezado del video", "");
if (text != null && text != ''){
if (id != null && id != '')
ed.execCommand('mceInsertContent', false, '[yt id="'+id+'"]'+text+'[/yt]');
}
else{
if (id != null && id != '')
ed.execCommand('mceInsertContent', false, '[yt posts="'+id+'"]');
}
}
});
},
createControl : function(n, cm) {
return null;
},
getInfo : function() {
return {
longname : "me The Most Brilliant",
author : 'me',
authorurl : 'http://www.google.com',
infourl : 'http://www.google.com',
version : "1.0"
};
}
});
tinymce.PluginManager.add('buttons', tinymce.plugins.buttons);
})();
El código en functions.php es:
function register_button( $buttons ) {
array_push( $buttons,"recentposts", "youtube" );
return $buttons;
}
function add_plugin( $plugin_array ) {
$plugin_array['buttons'] = get_template_directory_uri() . '/js/recent-posts.js';
return $plugin_array;
}
function my_recent_posts_button() {
if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {
return;
}
if ( get_user_option('rich_editing') == 'true' ) {
add_filter( 'mce_external_plugins', 'add_plugin' );
add_filter( 'mce_buttons', 'register_button' );
}
}
add_action('init', 'my_recent_posts_button');
En lugar de image : url+'/youtube.png' estoy intentando usar text :'<i class="fa fa-camera-retro"></i>'
Pero en el editor de texto, en vez de mostrar el icono de FontAwesome, solo aparece como texto literal. ¿Dónde debería colocar el archivo de FontAwesome y cómo debería llamarlo para usarlo en TinyMCE?
No estoy usando un plugin.
user1906399
y el icono de YouTube de FontAwesome viene usando <i class="fa fa-youtube"></i>. ¿Cómo uso esto en CSS?
user1906399
Lo que estás haciendo en tu código anterior es agregar tu propio plugin de TinyMCE - no me refiero a usar un plugin de WordPress :-) Te sugiero que revises este tutorial para obtener una buena visión general del proceso también, podría ser útil :-)
Matt Royal
El <i class="fa fa-youtube"></i> es el marcado HTML al que se aplica el CSS de FontAwesome por defecto. También puedes aplicarlo a otros elementos usando Selectores Pseudo CSS como lo he hecho en mi código si así lo deseas.
Matt Royal
No obtengo ningún elemento span si dejo image:. Puedo acceder al botón usando su ID que es #mce_17, y puedo usar el hook admin_head, y puedo cambiar su color de fondo, etc. Estoy confundido sobre dónde debería poner la carpeta de fontawesome que descargué y ¿debería simplemente llamar a su archivo css en functions.php? después de eso, ¿qué debería hacer? Déjame poner todo el código.
user1906399
Funciona muy bien (ejecutando WP 5.7.2 y FontAwesome 5.15.1). Solo asegúrate de prestar atención al ESPACIO antes de la primera clase LOL
revive