Español
Română
РусскийCome usare le icone Font Awesome nell'editor TinyMce
Sto cercando di aggiungere un pulsante YouTube nell'editor TinyMce.
Ecco un file recent-posts.js che si trova nella cartella js della directory del tema.
(function() {
tinymce.create('tinymce.plugins.buttons', {
init : function(ed, url) {
//per il pulsante post recenti
ed.addButton('recentposts', {
title : 'Post recenti',
image : url + '/youtube.png',
onclick : function() {
var posts = prompt("Numero di post", "");
var text = prompt("Intestazione elenco", "");
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]');
}
}
});
//per video YouTube
ed.addButton('youtube', {
title : 'YouTube',
text: 'YouTube',
onclick : function() {
var id = prompt("ID video", "");
var text = prompt("Intestazione 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);
})();
codice in functions.php è
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');
Al posto di image : url+'/youtube.png' sto provando a usare text :'<i class="fa fa-camera-retro"></i>'
Ma nell'editor di testo invece dell'icona Font Awesome, viene visualizzato come testo così com'è. Dove dovrei posizionare il file Font Awesome e come dovrei chiamarlo e come usarlo in TinyMce?
Non sto utilizzando un plugin.
user1906399
e l'icona YouTube di fontawesome viene utilizzata con <i class="fa fa-youtube"></i>. Come posso usarla nel CSS?
user1906399
Quello che stai facendo nel tuo codice sopra è aggiungere il tuo plugin TinyMCE personalizzato - non mi riferisco all'uso di un plugin WordPress :-) Ti suggerisco di dare un'occhiata a questo tutorial per avere una buona panoramica del processo, potrebbe essere utile :-)
Matt Royal
Il codice <i class="fa fa-youtube"></i> è il markup HTML a cui viene applicato il CSS di FontAwesome di default. Puoi applicarlo anche ad altri elementi utilizzando i Pseudo Selettori CSS come ho fatto nel mio codice, se lo desideri.
Matt Royal
Non ottengo alcun elemento span se lascio image:. Posso accedere al pulsante usando il suo ID che è #mce_17, e posso usare l'hook admin_head, e posso cambiarne il colore di sfondo ecc. Sono confuso su dove dovrei mettere la cartella di FontAwesome che ho scaricato e dovrei semplicemente richiamare il suo file css in functions.php? dopo questo cosa dovrei fare? lascia che inserisca l'intero codice.
user1906399
Funziona alla grande (sto usando WP 5.7.2 e FontAwesome 5.15.1). Assicurati solo di fare attenzione allo SPAZIO prima della prima classe LOL
revive