web-dev-qa-db-fra.com

ajout d'une icône personnalisée à un bouton tinyMCE

J'essaie d'ajouter une icône Font-Awsome à un bouton que j'ai ajouté à tinyMCE ainsi:

 ed.addButton('youtube', {
     title: 'Add Video' ,
     icon: 'icon-youtube',
     onclick: function () {
     //do stuff here...
 }

l'utilisation d'une image telle que suggérée par la documentation n'était pas acceptable, mais pour une raison quelconque, je ne suis pas en mesure de faire ce travail. des idées?

javascriptangularjspluginstinymce
13
Kepedizer

cette solution basée sur CSS semble bien fonctionner:

 i.mce-i-[FONT-AWESOME-CLASSNAME]:before {   // FONT-AWESOME-CLASSNAME e.g. "icon-youtube"
    content: "[FONT-AWESOME-CONTENT]";       // FONT-AWESOME-CONTENT e.g. "\f166"
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #000;
    font-size: 1.5em;
    padding-right: 0.5em;
    position: absolute;
    top: 15%;
    left: 0;
 }

il est basé sur la réponse de matt-royal à cet échange de pile wordpress thread

25
Kepedizer

Je sais que c'est vieux, mais je pensais donner ma réponse à quiconque est intéressé. J'utilise TinyMCE 4. J'ai ajouté cela à mon CSS

.mce-ico.mce-i-fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

puis, lorsque je configure l'icône pour les boutons que je viens d'utiliser.

editor.addButton('adjust', {
    tooltip: 'Adjust Layout',
    icon: 'fa fa-adjust',
    onclick: function () {
        dialogLayout(editor, url, settings);
    }
});

en gros, cela vous permettra d'utiliser n'importe quelle icône géniale de polices sans avoir à disposer d'une disposition de classe spécifique pour chaque icône. 

J'espère que ça aide quelqu'un.

8
Robert E. McIntosh

D'après ce que j'ai compris, vous essayez d'ajouter un bouton avec une image dans la liste des icônes tinyMCE.

 tinymce.PluginManager.add("youtube", function (editor) {   
    editor.addButton('youtube', {
        tooltip: 'Add video',
        image: tinymce.baseURL + '/plugins/youtube/icons/youtube.gif',
        onclick: function() {

        }
    }); 
});

Créez un dossier (j'ai nommé "youtube") dans ce dossier, créez un autre dossier (j'ai nommé "icônes" dans lequel vous insérez votre image), puis créez votre fichier youtube.js dans le dossier youtube.

8
SSouhaieb

Le CSS suivant fonctionne pour TinyMCE 4 et FontAwesome 5:

.mce-ico.mce-i-fas {
    display: inline-block;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }
1
Thuc Nguyen

Cette feuille de style simple a fonctionné pour moi:

i.mce-i-[FONT-AWESOME-CLASSNAME]:before {   // FONT-AWESOME-CLASSNAME e.g. "icon-youtube"
    content: [FONT-AWESOME-CONTENT];         // FONT-AWESOME-CONTENT e.g. "\f166"
    font-family: FontAwesome;
}

Il peut également être utilisé pour un bouton de la barre d’outils ou un élément de menu.

ed.addButton('youtube', {
     title: 'Add Video' ,
     icon: '[FONT-AWESOME-CLASSNAME]',
     onclick: function () { /* magic */ }
}

ed.addMenuItem('youtube', {
     text: 'Add Video' ,
     icon: '[FONT-AWESOME-CLASSNAME]',
     onclick: function () { /* magic */ },
     context: 'view'
}

N'utilisez pas position: absolute car la disposition dans le menu sera gâchée.

1
naXa