avatar
Sexe : Féminin
Date d'inscription : 17/08/2016
Messages : 101
Membre timide
Voir le profil de l'utilisateur
Bonjour tout le monde. J'espère que vous saurez me répondre. Pas mal de temps à chercher le problème...


Quelle structure est concernée par votre problème ? L'éditeur de message
Qu'elle est l'adresse du forum concerné (sous hide si cela vous dérange) ? Alors c'est sur mon forum test
Un screen du problème : éventuellement, si aide à la compréhension
Spoiler:
image ici
Expliquez précisément votre problème : Alors je souhaitais ajouter des polices via google fonts directement dans mon éditeur de texte. J'ai donc mis un code dans la partit ajout d'un javascrypte puis installer la police dans le template overhall header
Les codes :
Code:
$(function(){
          if(!$["sceditor"]) return;
      
        $.sceditor.defaultOptions.fonts= 'Arial, Arial Black, Sacramento, Marck Script, Nanum Pen Script, Indie Flower, Verdana';
      
        });
Mon template:
Mon éditeur:


Du coup quand je veux écrire par exemple avec le style indie flower et bien le texte ne se met pas...

Si quelqu'un connait le soucis je suis preneuse :)


Merci par avance :)
avatar
Sexe : Masculin
Date d'inscription : 05/04/2016
Messages : 560
Ancien.ne du Staff
Voir le profil de l'utilisateur
Salut,

Le javascript (et pas javascrypte, désolé, cette faute m'a fait mal /pan) est bon. A voir ton code, j'ai l'impression que tu as juste mal importé tes polices. Pourquoi tu as tant d'espaces dans tes balises ? "Marck + Script" ce n'est pas pareil que "Marck+Script", donc c'est normal que tes polices n'apparaissent pas, le lien n'est pas bon. Assure-toi que tes balises soient bien écrites.

Ah, et petit ajout, tu peux rassembler toutes tes polices dans une seule balise, c'est plus pratique, il faut juste les séparer par une barre verticale (pipe), comme ça :
Indie+Flower|Nanum+Pen+Script|Sacramento|Marck+Script

Voilà

avatar
Sexe : Féminin
Date d'inscription : 17/08/2016
Messages : 101
Membre timide
Voir le profil de l'utilisateur
Merci de ton aide. Désolé oui effectivement je ne sais pas ce qui m'est arrivé d'écrire cela ainsi ^^

Je viens d'essayer ce que tu me disait et aucun changement...

La police Indie flower s'affiche correctement dans mon éditeur mais quand je la sélectionne elle ne se met pas...

J'ai essayé aussi les (pipe) heu sa sonne bizarre quand je dit ça lol. Et cela ne vas pas... Je ne dois pas les mettre correctement où au bon endroit !! C'est dans le Javascript où le CSS que je dois le mettre lol ?

Merci encore en tout cas de ta réponse ^^
avatar
Sexe : Masculin
Date d'inscription : 05/04/2016
Messages : 560
Ancien.ne du Staff
Voir le profil de l'utilisateur
Ah, désolé, j'ai peut-être pas été très clair ! Je parlais de modifier seulement ta balise d'import des polices.

La balise à ajouter dans ton template overall_header :
Code:
<link href="https://fonts.googleapis.com/css?family=Indie+Flower|Marck+Script|Nanum+Pen+Script|Sacramento" rel="stylesheet">
C'est celle qui rassemble toutes tes polices, sans espace inadéquat ni erreur, donc normalement ça devrait fonctionner. Tu peux supprimer tes autres balises, du coup !

Et normalement, tout devrait fonctionner là :v
avatar
Sexe : Féminin
Date d'inscription : 17/08/2016
Messages : 101
Membre timide
Voir le profil de l'utilisateur
Je viens donc de supprimer et remplacer par ce que tu m'a donné. Effectivement les polices s'affiche correctement dans l'éditeur.

En revanche ce que je comprends pas c'est que quand je sélectionne et que j'écris ça ne se met pas avec le style de l'écriture...

Je reste en écriture normale.

Je dois mal faire quelque chose mais quoi...

Dans l'exemple avec une faute d'ailleurs mdr c'est l'heure j'avais sélectionner indie flower.

Et même si je surligne et sélectionne l'écriture elle ne s'affiche pas dans mon éditeur !




Désolé du coup de t'ennuyer avec tout ça mais j'avoue être un peu dans le gaz je n'arrive pas à comprendre où je fais mal !

Par contre si j'envoie le message mon texte s'affiche ensuite.

J'aimerais qu'il se mette directement dans l'éditeur avant que j'envoie ^^
avatar
Sexe : Féminin
Date d'inscription : 05/06/2014
Messages : 3388
Maxi-code master - Modo voleuse de PC ❤ - Ex-admin
Voir le profil de l'utilisateur
Hello, j'ai voulue tester sur ton forum mais les invité ne peuvent pas écrire dans ta section invité =/



avatar
Sexe : Féminin
Date d'inscription : 17/08/2016
Messages : 101
Membre timide
Voir le profil de l'utilisateur
Arf désolé c'est un forum d'essai je vais essayer de changer tout ça :)

En fait ce que je comprends pas c'est que chez moi cela fait ça



Et sur un autre forum qui pratique la même chose ça donne ça lol




Merci en tout cas à tous pour votre aide.
avatar
Sexe : Masculin
Date d'inscription : 05/04/2016
Messages : 560
Ancien.ne du Staff
Voir le profil de l'utilisateur
Est-ce que ce forum propose les mêmes polices que le tien ?

Ça m'a tout l'air d'être les caprices du mode WYSIWYG. J'ai testé sur mon forum, certaines polices fonctionnent (Marck Script, par exemple) et d'autres non (Indie Flower, entre autre), et je ne sais absolument pas pourquoi...
avatar
Sexe : Féminin
Date d'inscription : 17/08/2016
Messages : 101
Membre timide
Voir le profil de l'utilisateur
Hello oui j'ai installé la même du coup et cela fonctionne si j'envoie mon message mais dans l'éditeur il ne s'affiche pas en direct ^^

Bon bah je vais continuer avec d'autres en tout cas merci de ta réponse cela me rassure. Je n'ai donc rien coller de mal quelque part ^^
avatar
Sexe : Masculin
Date d'inscription : 23/11/2013
Messages : 51
Newbie
Voir le profil de l'utilisateur
Juste pour voir si le problème ne se passe pas au niveau de l'ajout des balises :
Appuie sur le bouton entouré ici : https://i.imgur.com/xJX9BzJ.png
Puis change la police. (Indie flower ne fonctionne pas si je me souviens bien)
Normalement un
Code:
[font="Indie Flower"][/font]
est apparu.
Tiens moi au courant de si les balises apparaissent ou non.
avatar
Sexe : Féminin
Date d'inscription : 17/08/2016
Messages : 101
Membre timide
Voir le profil de l'utilisateur
Hello,

Alors j'ai tenter et voilà ce que ça me met :

Code:
[font=Indie Flower]Je viens[/font]
avatar
Sexe : Masculin
Date d'inscription : 23/11/2013
Messages : 51
Newbie
Voir le profil de l'utilisateur
Ok donc le problème est uniquement au niveau de l'affichage 🤔 -> une fois posté tout fonctionne correctement.
Le problème vient donc bien de l'éditeur WYSIWYG. Il utilise une iframe pour créer son propre univers. De ce fait, l'éditeur est situé en DEHORS du forum, il n'a donc pas accès aux nouvelles fonts. Il va donc falloir ajouter une balise à l'iframe. Une petite minute, je fais le script, je le teste et je reviens vers toi.

Edit:
vieille version:

Code:

<script>
 var linkFontsWysiwyg = document.createElement('link');
 linkFontsWysiwyg.setAttribute('rel', 'stylesheet');
 linkFontsWysiwyg.setAttribute('href','https://fonts.googleapis.com/css?family=Indie+Flower|Marck+Script|Nanum+Pen+Script|Sacramento');/*C'est ce lien à changer si l'on modifie les polices perso*/
    var wysiwygContainer = document.getElementsByClassName("sceditor-container");
    wysiwygContainer[0].getElementsByTagName('iframe')[0].contentWindow.document.getElementsByTagName('head')[0].appendChild(linkFontsWysiwyg);
</script>
Ajoute ceci juste avant la balise
Code:

</body>
présente à la fin de ton template overall_footer_end.


ps : remerciez aussi Nihil Scar Winspeare de Never Utopia qui m'a aidé à trouver la bonne solution.

Double edit: je dois apporter une petite correction.
Triple Edit : le bon code:
Code:

$(function () {
    var linkFontsWysiwyg = document.createElement('link');
    linkFontsWysiwyg.setAttribute('rel', 'stylesheet');
    linkFontsWysiwyg.setAttribute('href', 'https://fonts.googleapis.com/css?family=Indie+Flower|Marck+Script|Nanum+Pen+Script|Sacramento');
    /*C'est ce lien à changer si l'on modifie les polices perso*/
    var wysiwygContainer = document.getElementsByClassName("sceditor-container");
    if (wysiwygContainer[0] != null) {
        wysiwygContainer[0].getElementsByTagName('iframe')[0].contentWindow.document.getElementsByTagName('head')[0].appendChild(linkFontsWysiwyg)
    }
    ;
})

Je laisse l'ancienne version pour les curieux
avatar
Sexe : Féminin
Date d'inscription : 17/08/2016
Messages : 101
Membre timide
Voir le profil de l'utilisateur
Bonsoir, je dois avoir une poisse impossible. J'ai installer le dernier code dans le template et aucun changement...
avatar
Sexe : Masculin
Date d'inscription : 23/11/2013
Messages : 51
Newbie
Voir le profil de l'utilisateur
Es-tu sûre d'avoir validé ton template ? Parce que mon script n'apparait pas dans le code source de ton forum ^^
avatar
Sexe : Féminin
Date d'inscription : 17/08/2016
Messages : 101
Membre timide
Voir le profil de l'utilisateur
Je viens de refaire comme c'était écrit et pas de changement :(

Je dois louper un truc c'est pas possible autrement !
avatar
Sexe : Masculin
Date d'inscription : 23/11/2013
Messages : 51
Newbie
Voir le profil de l'utilisateur
Edit : il semblerait que ce soit ma faute.
Dans le code que je t'ai donné à copier j'ai oublié d'encadrer le script par des balises scripts.
Utilise ceci à la place :
Code:

<script>
$(function () {
    var linkFontsWysiwyg = document.createElement('link');
    linkFontsWysiwyg.setAttribute('rel', 'stylesheet');
    linkFontsWysiwyg.setAttribute('href', 'https://fonts.googleapis.com/css?family=Indie+Flower|Marck+Script|Nanum+Pen+Script|Sacramento');
    /*C'est ce lien à changer si l'on modifie les polices perso*/
    var wysiwygContainer = document.getElementsByClassName("sceditor-container");
    if (wysiwygContainer[0] != null) {
        wysiwygContainer[0].getElementsByTagName('iframe')[0].contentWindow.document.getElementsByTagName('head')[0].appendChild(linkFontsWysiwyg)
    }
    ;
})
</script>
avatar
Sexe : Féminin
Date d'inscription : 17/08/2016
Messages : 101
Membre timide
Voir le profil de l'utilisateur
Ouiiiiiiiiiii

Super ça fonctionne merci merci merci !!!

Est ce que tu peux juste m'expliquer rapidement ce que cela veut dire comme code (j'apprends les bases mais j'aime bien savoir ce que j'installe. Si jamais je dois me resservir de ceci on ne sait jamais.

Encore merci vraiment !
avatar
Sexe : Masculin
Date d'inscription : 23/11/2013
Messages : 51
Newbie
Voir le profil de l'utilisateur
Alors pour faire simple :
Lorsque tu as cherché tes polices, tu as ajouté une balise qui dit au navigateur d'aller chercher les ressources pour ton forum.
Cependant, l'éditeur WYSIWYG utilise une Iframe pour simuler une page. Cette page se situe dans un autre "monde". Le navigateur ne charge donc pas les ressources de police pour celle-ci.
Ce que fait donc mon code :
Il créé une balise link avec le lien vers les polices.
Il cherche sur ta page une balise ayant pour classe "sceditor-container". S'il la trouve, il cherche dedans une balise iframe.
Il accède ensuite au monde de cette Iframe. Dans ce monde particulier, il cherche une balise head. Il y ajoute la balise link qu'il a créé.
Désormais le monde de l'iframe demande aussi au navigateur de charger les ressources pour afficher les polices ;)
avatar
Sexe : Féminin
Date d'inscription : 17/08/2016
Messages : 101
Membre timide
Voir le profil de l'utilisateur
Ok merci pour tes explications et surtout merci de ton aide. Cela fonctionne donc super bien.

Je viens d'en ajouter à mon forum et pareil cela fonctionne.

En revanche dernière question je vois que sur mon forum la police indie flower ne s'affiche pas comme les autres j'ai du mal recopier quelque chose. Elle fonctionne si je la sélectionne mais elle ne fait pas comme les autres :



Toutes les autres s'affichent correctement... J'ai bien vérifier qu'il n'y est pas de + où autres...
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2051
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
Coucou,

Ton problème est toujours d'actualité ? Tu as essayé en recopiant le lien ?


avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2051
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
15 jours sans réponses, j'archive.


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