web-dev-qa-db-fra.com

Vous utilisez un dashicon pour un bouton personnalisé dans TinyMCE?

J'ai créé un bouton personnalisé pour TinyMCE et j'aimerais qu'il utilise l'icône Twitter de dashicons. J'espère pouvoir le faire uniquement via le Javascript, sans CSS supplémentaire. Est-ce possible?

Voici ma tentative actuelle (qui ne fonctionne pas):

(function () {
    tinymce.PluginManager.add('Twitter_button_plugin', function (editor, url) {
        editor.addButton('mce_Tweet_button', {
            title: 'Insert Tweet',
            icon: 'dashicons dashicons-Twitter',
            onclick: function() {
                ...
            }
        });
    });
})();
tinymce
2
user13286

Voici votre solution facile (j'espère que cela aidera également d'autres personnes):

1) ajouter une classe personnalisée pour icon, dans cet exemple "myicons"

(function () {
    tinymce.PluginManager.add('Twitter_button_plugin', function (editor, url) {
        editor.addButton('mce_Tweet_button', {
            title: 'Insert Tweet',
            icon: 'myicons dashicons-Twitter',
            onclick: function() {
                ...
            }
        });
    });
})();

2) Mettez en file d'attente votre fichier de styles d'administrateur

function load_custom_wp_admin_style() {
   wp_enqueue_style( 'custom_wp_admin_css', 'URL/TO/custom_admin_style.css' );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );

3) Ajoutez ensuite ceci dans votre fichier custom_admin_style.css :

/**
 * TinyMCE add support for dashicons
 */
i.mce-i-myicon {
    font: 400 20px/1 dashicons;
    padding: 0;
    vertical-align: top;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-left: -2px;
    padding-right: 2px
}
1
Albo Best

J'espère pouvoir le faire uniquement via le Javascript, sans CSS supplémentaire. Est-ce possible?

Je suppose que vous voulez seulement rester dans tinymce.PluginManager.add( ... ).

Voici une solution de contournement JS avec:

jQuery( '.is-dashicon' ).css( 'font-family', 'dashicons' );

dans un callback onPostRender event:

(function () {
    tinymce.PluginManager.add('Twitter_button_plugin', function (editor, url) {
        editor.addButton('mce_Tweet_button', {
            title: 'Insert Tweet',
            icon: 'insert-Tweet is-dashicon dashicons dashicons-Twitter',
            onPostRender: function () {
                jQuery( '.is-dashicon' ).css( 'font-family', 'dashicons' );
            },
            onclick: function() {
                ...
            }
        });
    });
})();

cela va générer le tag:

<i class="mce-ico mce-i-insert-Tweet 
          is-dashicon dashicons dashicons-Twitter" style="font-family: dashicons;"></i>

Exemple:

 Twitter 

2
birgire