Italiano
Español
РусскийCum să folosesc pictograme FontAwesome în editorul TinyMCE?
Încerc să adaug un buton YouTube în editorul TinyMCE.
Iată fișierul recent-posts.js care se află în folderul js al directorului temei.
(function() {
tinymce.create('tinymce.plugins.buttons', {
init : function(ed, url) {
//pentru butonul postări recente
ed.addButton('recentposts', {
title : 'Postări recente',
image : url + '/youtube.png',
onclick : function() {
var posts = prompt("Număr de postări", "");
var text = prompt("Titlu listă", "");
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]');
}
}
});
//pentru video YouTube
ed.addButton('youtube', {
title : 'YouTube',
text: 'YouTube',
onclick : function() {
var id = prompt("ID video", "");
var text = prompt("Titlu 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 : "eu Cel Mai Strălucit",
author : 'eu',
authorurl : 'http://www.google.com',
infourl : 'http://www.google.com',
version : "1.0"
};
}
});
tinymce.PluginManager.add('buttons', tinymce.plugins.buttons);
})();
Codul din functions.php este
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');
În loc de image : url+'/youtube.png' încerc să folosesc text :'<i class="fa fa-camera-retro"></i>'
Dar în editorul de text, în loc de pictogramă FontAwesome, afișează doar textul așa cum este. Unde ar trebui să plasez fișierul FontAwesome și cum să-l încarc și să-l folosesc în TinyMCE?
Nu folosesc un plugin.
user1906399
iar iconița YouTube de la fontawesome se obține folosind <i class="fa fa-youtube"></i>. Cum pot folosi acest lucru în CSS?
user1906399
Ceea ce faci în codul tău de mai sus este să adaugi propriul tău plugin TinyMCE - nu mă refer la utilizarea unui plugin WordPress :-) Sugerez să arunci un ochi și peste acest tutorial pentru a înțelege mai bine procesul, ar putea fi util :-)
Matt Royal
Elementul <i class="fa fa-youtube"></i> reprezintă marcajul HTML căruia i se aplică implicit CSS-ul FontAwesome. De asemenea, îl puteți aplica și altor elemente folosind Selectoare CSS Pseudo, așa cum am făcut și eu în codul meu, dacă doriți.
Matt Royal
Nu primesc niciun element span dacă las image:. Pot accesa butonul folosind ID-ul său care este #mce_17 și pot folosi acțiunea admin_head, iar pot schimba culoarea de fundal etc. Sunt confuz unde ar trebui să pun folderul FontAwesome pe care l-am descărcat și ar trebui doar să includ fișierul CSS în functions.php? După aceea, ce ar trebui să fac? Permiteți-mi să pun întregul cod.
user1906399
Funcționează excelent (rulez WP 5.7.2 și FontAwesome 5.15.1). Doar asigură-te să fii atent la SPAȚIUL dinaintea primei clase LOL
revive