2
votes

MCE5- Comment mettre une image en tant qu'icône de bouton personnalisé dans Tinymce-5?

J'utilise TinyMce-5 et je dois y ajouter des boutons personnalisés, les boutons fonctionnent très bien mais je ne sais pas comment ajouter une image comme icône sur ces boutons, car les polices ne sont pas disponibles ces icônes, donc je dois mettre une image .png comme icône sur le bouton. Voici mon code que j'ai utilisé dans la configuration: paramètre

ed.ui.registry.addButton('alignTop', {
    image:'http://localhost/image-process/images/donut_PNG27.png',
    tooltip: 'Align box top',
    onAction: function () {
        $('.shape[data-active=me]').css('top','0px');
    }
});

jquery tinymce tinymce-plugins

4 commentaires

Avez-vous déjà trouvé une solution à cela?

oui, tout est jquery et code non conventionnel, mais ouais ça a marché

impressionnant! Je peux vous mettre cette information dans une réponse, je serai heureux de la voter. Je n'ai pas été en mesure de déterminer les bons paramètres à passer à addButton pour faire apparaître une image.

Vous ne pouvez pas ajouter d'icône à Tiny-mce lors du chargement de la page, c'est pourquoi nous définissons un intervalle de 100 ms après le chargement de la page pour ajouter des icônes, je colle le code.

3 Réponses :

0
votes

Voici le code js

function fixTinyIcons(){
    if($('button[aria-label="Bend down text"]').length > 0 && $('button[aria-label="Bend down text"]').attr('data-bg') != 'done'){
    //console.log('1st found');
    $('button[aria-label="Bend down text"]').html('<img src="images/bottom-bend.jpg" style="height: 20px; width: 20px;">');
    $('button[aria-label="Bend down text"]').attr('data-bg','done');
    st_stop++;
}
$(document).ready(function(){
    WinIntervalCheck = setInterval(fixTinyIcons,100);

});

voici l'explication en image

0 commentaires

2
votes

Je n'ai pas aimé la solution ci-dessus, j'ai donc essayé comme ci-dessous et j'ai travaillé comme du charme !!!!!

ed.ui.registry.addButton('alignTop', {
    text: '<image src="http://localhost/image-process/images/donut_PNG27.png" style="height: 24px;width: 24px;padding: 3px 0px 0px 0px;"/ >',
    tooltip: 'Align box top',
    onAction: function () {
        $('.shape[data-active=me]').css('top','0px');
    }
});

0 commentaires

0
votes

Alors que le addIcon La documentation de l'API indique que c'est pour enregistrer les icônes SVG, vous pouvez lui transmettre n'importe quel balisage:

// works with tinymce v5.2
ed.ui.registry.addIcon('donut', '<img src="/image-process/images/donut_PNG27.png" />');

ed.ui.registry.addButton('alignTop', {
    icon: 'donut',
    ...
});

0 commentaires