web-dev-qa-db-fra.com

Comment utiliser les icônes fontawesome dans l'éditeur TinyMce?

J'essaie d'ajouter un bouton youtube dans l'éditeur TinyMce.

voici un fichier recent-posts.js qui se trouve dans le dossier js du répertoire theme.

(function() {
   tinymce.create('tinymce.plugins.buttons', {
      init : function(ed, url) {

         //for recent post button
         ed.addButton('recentposts', {
            title : 'Recent posts',
            image : url + '/youtube.png',
            onclick : function() {
               var posts = Prompt("Number of posts", "");
               var text = Prompt("List Heading", "");

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


         //for youtube video
          ed.addButton('youtube', {
            title : 'YouTube',
            text: 'YouTube',          
            onclick : function() {
               var id = Prompt("Video id", "");
               var text = Prompt("Video Heading", "");

               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);
})();

le code dans functions.php est

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

Au lieu de image : url+'/youtube.png' j'essaie d'utiliser text :'<i class="fa fa-camera-retro"></i>'

Mais dans l'éditeur de texte doté d'une police géniale, il ne fait que s'afficher sous forme de texte. Où dois-je placer le fichier de police génial et comment dois-je l'appeler et comment l'utiliser dans TinyMce?

csstinymceadmin-css
5
user1906399

Vous ne pourriez pas ajouter une icône FontAwesome en le passant directement à la méthode ed.addButton(); malheureusement.

Vous pouvez cependant essayer une solution de contournement. Si vous laissez le paramètre image : url+'/youtube.png' en dehors de la méthode, il créera automatiquement un <span> vide avec la classe mceIcon & une autre classe de mce_[plugin_name].

Vous pouvez ensuite utiliser CSS pour styler cet élément <span> comme bon vous semble.

Vous pouvez maintenant utiliser FontAwesome directement dans votre CSS, par exemple (assurez-vous de changer la classe .mce_[plugin_name] place-hoder utilisée ici en votre classe actuelle):

span.mce_[plugin_name] {
    position: relative;
}

span.mce_[plugin_name]:before {
    content: "\f166"; /* Value for the Youtube icon*/
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--adjust as necessary--*/
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 10px;
    left: 0;
}

METTRE À JOUR

Voici comment je charge mon fichier CSS FontAwesome. Je me suis adapté pour charger pour la zone d'administration pour ce que vous devez faire cependant. Je l’appelle à partir du CDN BootStrap, mais vous pouvez télécharger le fichier CSS et le charger à partir de votre dossier thème ou plug-in en utilisant la même fonction admin_enqueue_scripts();.

// Load Font Awesome
function royal_enqueue_awesome() {
    wp_enqueue_style( 'prefix-font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css', array(), '4.0.3' );
}

add_action( 'admin_enqueue_scripts', 'royal_enqueue_awesome' );
5
Matt Royal

J'ai testé les éléments suivants sur WordPress 4.6.1

À l'origine, j'avais consulté ce processus pour créer un bouton qui produirait un shortcode. Sur la base de divers articles, j’ai initialement utilisé les paramètres addButton suivants dans mon fichier javascript pour décorer mon bouton TINYMCE ...

ed.addButton('wpse72394_button', { title: 'title of my button', cmd: 'wpse72394_inser', image: url + '/path/to/image.png' });

... Mais je ne voulais pas créer un nouveau bouton à partir de zéro ou juste une étiquette de texte. Je voulais plutôt faire référence à une icône existante dans WordPress. J'ai découvert que je pouvais facilement échanger le image: paramètre pour une icône: paramètre comme si ...

ed.addButton('wpse72394_button', { title: 'Insert shortcode', cmd: 'wpse72394_insert_shortcode', icon: 'wp_code' });

Dans WordPress, si vous regardez à l'intérieur

chemin d'accès au site\wp-includes\js\tinymce\plugins\wordpress\plugins.js

vous découvrirez diverses options comme ...

      wp_help
      wp_more
      wp_page
      wp_code

Je ne crois pas que ce soient des icônes de fontawesome, mais elles sont suffisamment proches pour que je puisse faire le travail sans ajouter de références de liens css ou css supplémentaires.

2
klewis

Voici une solution extrêmement simple pour cela.

Tout d’abord, ajoutez la bibliothèque FontAwesome à WordPress Backend en la créant et en l’ajoutant à admin_init 

function fontawesome_dashboard() {
   wp_enqueue_style('fontawesome', 'https://use.fontawesome.com/releases/v5.1.1/css/all.css'); 
}

add_action('admin_head', 'fontawesome_dashboard', 11);

Puis sur votre fichier javascript:

ed.addButton('recentposts', {
            title : 'Recent posts',
            icon: ' fa fa-camera-retro', // notice a space before the 'fa'

Ce genre de bidouille a fonctionné pour moi. Je suis sûr que cela fonctionnera pour vous aussi :)

0
Pito Axiu