Modifier le style des éléments de l'éditeur de message (sceditor)

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Modifier le style des éléments de l'éditeur de message (sceditor)

Message par NoXoN Sam 23 Sep 2017 - 23:54

Détails techniques


Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Internet Explorer, Opera, Safari, Autre
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Aujourd'hui
Lien du forum : http://dev-guildemono.forumactif.com/

Description du problème

Bonjour,

Je souhaitais modifier la taille des émoticônes affichés par l'iframe sceditor, afin de pouvoir rendre ces émoticônes adaptées en 4K/Retina (sans transformation flou). Ils sont d'origine en 64x64 et je voulais les passer en 16x16 sur l'interface.

J'ai essayé toute une ribambelle de sélecteur dans mon CSS, vidé mon cache des tonnes de fois, mais rien y fait. J'ai donc décidé de suivre ce tutoriel qui proposait des classes différentes (qui n'apparaissent pas dans l'inspecteur sur le navigateur étrangement) : https://forum.forumactif.com/t352754-modifier-l-apparence-de-l-editeur

Il semblerait impossible d'appliquer une règle à l'intérieur de l'iframe de sceditor en passant par le CSS. Voici une liste des tentatives :

Code:
.sceditor-emoticons {
width: 16px !important;
height: 16px !important;
overflow: auto !important;
}

img.smiley {
width: 16px !important;
height: 16px !important;
}

Une manière plus brutale :

Code:
.sceditor-container img[data-sceditor-emoticon] {
width: 16px !important;
height: 16px !important;
}

Code:
.sceditor-container iframe img { /* Même ça ne modifie rien */
width: 16px !important;
height: 16px !important;
}


Je précise que ma feuille de CSS fonctionne, car j'ai modifié la toolbar sans soucis grâce à lui (::before de font-awesome pour les icones) ainsi que d'autres éléments.

Y aurait-il eu des changement depuis 2013 sur ce module ?
Y a-t-il aujourd'hui une autre manière de procéder ?

D'autant plus, cela est problématique du fait que je ne puisse pas non plus modifier la police de l'éditeur, sa couleur, ou tout autres éléments saisis...
D'après le site officiel : https://www.sceditor.com/documentation/options/#style il existe des options permettant de modifier le format du contenu saisi, mais nous n'avons malheureusement accès à aucun fichier de ce module sur Forumactif...

Merci pour votre aide.



Dernière édition par NoXoN le Mar 3 Oct 2017 - 21:18, édité 1 fois
avatar

NoXoN
**

Messages : 55
Inscrit(e) le : 11/04/2008

http://fan-of-lego-c-and-sw.forums-actifs.com/index.htm
NoXoN a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier le style des éléments de l'éditeur de message (sceditor)

Message par MlleAlys Dim 24 Sep 2017 - 22:37

Bonjour,
ce code me parait fonctionner :
Code:
#sce_smilies_body img, #sceditor_smilies body img {
  min-width: 16px;
  min-height: 16px;
}
MlleAlys

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier le style des éléments de l'éditeur de message (sceditor)

Message par NoXoN Lun 25 Sep 2017 - 1:08

Salut,

Merci pour l'aide que tu essayes de m'apporter. Néanmoins ce que j'essayais de faire, c'est justement de fixer le smilie à 16px dans le champ de saisie. Donc disons que je place mon code ainsi :

Code:

    #sce_smilies_body img, #sceditor_smilies body img {
        width: 16px !important;
        height: 16px !important;
    }

Rien ne change malheureusement. Il reste en 64x64 dans l'éditeur en question.

Je ne sais pas si cela vient du fait que je sois sur ModernBB, ou de interprétation du CSS avant la génération de l'éditeur (surtout via iframe, pratique désuète en 2017), en tout cas aucun changement ne semble opérer. Je remet fortement l'utilisation de scediror en question. Je peux choisir le plus bas sélecteur avec un règle la plus basique qu'il soit, quand il s'agit d'appliquer une règle dans le champ de saisie, rien ne marche...
avatar

NoXoN
**

Messages : 55
Inscrit(e) le : 11/04/2008

http://fan-of-lego-c-and-sw.forums-actifs.com/index.htm
NoXoN a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier le style des éléments de l'éditeur de message (sceditor)

Message par MlleAlys Lun 25 Sep 2017 - 19:07

oh pardon j'avais mal compris. Le code donné fonctionne pour l'affichage des smileys à côté de l'éditeur ou dans la pop up qui s'ouvre pour l'éditeur rapide, mais pas dans la zone de saisie de l'éditeur.
Je passe la main.
MlleAlys

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier le style des éléments de l'éditeur de message (sceditor)

Message par NoXoN Jeu 28 Sep 2017 - 0:02

Personne ?
avatar

NoXoN
**

Messages : 55
Inscrit(e) le : 11/04/2008

http://fan-of-lego-c-and-sw.forums-actifs.com/index.htm
NoXoN a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier le style des éléments de l'éditeur de message (sceditor)

Message par Invité Mar 3 Oct 2017 - 16:52

Hello NoXoN,
ceci peut être pour l'affichage sur les messages:

Code:

img[longdesc]{width:16px!important;height:16px!important;}

Ensuite si c'est proprement dit dans l'éditeur (mais ce sera qu'en visuel) , ce script devrait fonctionner.

Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.
Cocher sur toutes les pages.

Déposes ceci:

Code:

$(function(){
$(function() {
$("#text_editor_textarea ").sceditor('instance')
.css
(' img[data-sceditor-emoticon]
{
 width:16px;height:16px;
}')
})});

Penses à cliquer sur le bouton VALIDER

a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier le style des éléments de l'éditeur de message (sceditor)

Message par NoXoN Mar 3 Oct 2017 - 20:52

Salut,

EDIT : Apparemment la librairie en question n'opère que sur les pages où le champ de saisie est appelé. Il faut donc appliquer une condition au script (un test sur un sélecteur du sceditor par exemple) avant de lancer la procédure. Je vais essayer ça et j'éditerai par la suite mon message.

EDIT2 : voilà un exemple de code fonctionnel qui ne risque pas d'altérer les autres scripts comme ce fut mon cas :

Code:
$(function(){
   $(function() {

      $(document).ready( function(){
         
      if ($('.sceditor-container').length > 0)
         $("#text_editor_textarea ").sceditor('instance').css(' img[data-sceditor-emoticon]{width:16px;height:16px;} ');
   
      });
   });
});

Merci bien pour cette méthode !

OLD :

Merci pour ta réponse. Malheureusement et sans trop de surprise, la console m'accorde que "sceditor" n'est pas une fonction, et ce même quand on englobe le tout dans un document ready :

Code:
TypeError: $(...).sceditor is not a function

Je ne sais pas si ou quand la librairie de sceditor est appelée, en tout cas je ne peux visiblement pas récupérer cette méthode.

avatar

NoXoN
**

Messages : 55
Inscrit(e) le : 11/04/2008

http://fan-of-lego-c-and-sw.forums-actifs.com/index.htm
NoXoN a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum