Ajout du boutons de la police d'écriture dans l'éditeur de messages

[Félina13]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Opera
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 06 octobre 2018
Lien du forum : http://feli.forumactif.org/

Description du problème

Salut,

J'ai ajouté une police d'écriture sur mon forum. Si je mets avec les balises, y'a pas de soucis, elle apparait correctement.

MAIS j'aimerai bien que cette nouvelle police d'écriture puisse apparaitre dans le champ des polices d'écriture (au choix) parmi la liste existante dans l'éditeur des messages (voir la capture d'écran).

Si vous pouviez m'aider, merci !

[*Splash*]

Hi Félina,

Tout d'abord tu install ta police, code javascript à mettre sur toutes les pages ;

Code:

WebFontConfig = {
    google: { families: [ 'Coiny' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();

Ensuite tu ajoute cette police à celles existantes à l'éditeur : (code js sur toutes les pages)

Code:

WebFontConfig = {
    google: { families: [ 'Coiny' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();
$(function(){
          if(!$["sceditor"]) return;
          
        $.sceditor.defaultOptions.fonts= 'Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Sans-serif, Serif, Times New Roman, Trebuchet MS, Verdana, Coiny';
          
});

Cette partie du code sert à ajouter la nouvelle police :

Code:

WebFontConfig = {
    google: { families: [ 'Coiny' ] }
  };

Police qu'il faut également ajouter à cette ligne (en fin de code) :

Code:

$.sceditor.defaultOptions.fonts= 'Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Sans-serif, Serif, Times New Roman, Trebuchet MS, Verdana, Coiny';

Voilà normalement tu te retrouve avec la police Coiny à l'éditeur

[Félina13]

Merci Splah pour ta réponse.

J'ai tout suivi justement, mais aucun ajout à l'éditeur.

OVERALL HEADER après le HEAD j'ai mis

Code:

  <link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Cookie" rel="stylesheet">

Dans mon CSS j'ai mis

Code:

font-family: 'Satisfy', cursive;
font-family: 'Cookie', cursive;

On est d'accord que "l'éditeur JS" et "code javascript à mettre sur toutes les pages " c'est la meme chose non ?
je me trompe surement. Y'a forcément un oubli de ma part quelque part

Mon javascript en question :

Code:

$(function(){
  if(!$["sceditor"]) return;
  $.sceditor.defaultOptions.fonts= 'Arial,Arial Black,Comic Sans MS,Courier New,Georgia,Impact,Sans-serif,Serif,Times New Roman,Trebuchet MS,Verdana,Satisfy,Cookie';
});



WebFontConfig = {
    google: { families: [ 'Satisfy' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();



WebFontConfig = {
    google: { families: [ 'Cookie' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();

[*Splash*]

Re,
A aucun moment il n’est question d’ajout de quoi que ce soit dans le template
Tout se fait par js
Relis ce que j’ai écrit plus haut

[Félina13]

J'ai bien lu.
Mais malgré tout, rien n'apparait en plus dans l'éditeur.

Sinon, On est d'accord que "l'éditeur JS" et "code javascript à mettre sur toutes les pages " c'est la meme chose non ?

[*Splash*]

Oui ce sont 2 codes javascript à ajouter sur toutes les pages

[*Splash*]

Autre solution

Dans ton template overall_header, juste après la balise head ajoute cette ligne pour tes 2 polices :

Code:

<link href="https://fonts.googleapis.com/css?family=Cookie|Satisfy" rel="stylesheet">

Ton début de template ressemblera à ça :

Code:

<!DOCTYPE HTML>
<html lang="{L_LANG_HTML}">
<head>
    <link href="https://fonts.googleapis.com/css?family=Cookie|Satisfy" rel="stylesheet">

Ensuite tu mets ce code javascript sur toutes les pages :

Code:

WebFontConfig = {
    google: { families: [ 'Satisfy','Cookie' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();
$(function(){
          if(!$["sceditor"]) return;
          
        $.sceditor.defaultOptions.fonts= 'Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Sans-serif, Serif, Times New Roman, Trebuchet MS, Verdana, Satisfy, Cookie'
          
});

Tu devrais avoir des 2 polices à l'éditeur

[lilas]

Merci pour le script Splash.
Tout a fonctionné du 1er coup (ça fait du bien... ).
J'avais ajouté le code des polices dans le Template overall_header.

Bonne nuit forum,

[*Splash*]

Merci du retour Lilas
Il semble que de tout installer par JavaScript pose problème, de fait le passage par le template est obligatoire

[Adam_sfp]

Bonjour

Le code de Splash fonctionne mais
Il me semble que vous chargez les fonts deux fois..
Et le mieux serait de faire un choix ;-) soit par CSS ou par javascript...

Logiquement juste ce code dans gestion des codes javascript sur toutes les pages devrait fonctionner.

Code:


WebFontConfig = {
    google: { families: [ 'Satisfy','Cookie' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();
$(function(){
          if(!$["sceditor"]) return;
          
        $.sceditor.defaultOptions.fonts= 'Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Sans-serif, Serif, Times New Roman, Trebuchet MS, Verdana, Satisfy, Cookie'
          
});


Cdt.

https://forum.forumactif.com/t398147-awesomebb-ajout-de-police-supplementaire

[Félina13]

Spoiler:

J'ai testé cette solution également, merci d'ailleurs pour cette réponse
mais cela n'apparait toujours pas.

J'ignore d'où vient le soucis.
Sachant, pour information, j'ai le meme problème pour les flèches haut et bas qui n'apparaissent plus depuis un bail.
Donc j'ai surement un code qui coince quelque part, mais j'ai beau fouiné, j'ignore où...

Est-ce possible qu'il y ait un conflit entre deux codes sur une autre page ?

[Passiflore]

De même pour moi, j'ai essayé les deux méthodes pour installer une police, et ça n'a pas fonctionné.

[*Splash*]

Spoiler:

J'ai testé cette solution également, merci d'ailleurs pour cette réponse
mais cela n'apparait toujours pas.

J'ignore d'où vient le soucis.
Sachant, pour information, j'ai le meme problème pour les flèches haut et bas qui n'apparaissent plus depuis un bail.
Donc j'ai surement un code qui coince quelque part, mais j'ai beau fouiné, j'ignore où...

Est-ce possible qu'il y ait un conflit entre deux codes sur une autre page ?

Tu as bien supprimer les codes JavaScript qui correspondaient à l’installation des polices ?
Il faut juste conserver le JavaScript pour ajouter les polices à l’editeur

[Passiflore]

Je vais essayer.

[Félina13]

Oui *Splash*

C'est pour ça que je me demande si je n'ai pas un conflit ailleurs (sur une page autre que j'ai du modifié y'a longtemps et qui n'a rien à voir avec les fonts).




Historiquement parlant, j'ai modifié les pages

index_body
index_box
overall_footer_begin
overall_header
viewtopic_body


Et pour les fonts, je précise qu'il n'y a rien dans le CSS de mis.

[Adam_sfp]

Bonsoir

@Félina13 comme dit plus haut en mettant seulement ce script cela doit fonctionner

Code:

 
WebFontConfig = {
    google: { families: [ 'Satisfy','Cookie' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();
$(function(){
          if(!$["sceditor"]) return;
         
        $.sceditor.defaultOptions.fonts= 'Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Sans-serif, Serif, Times New Roman, Trebuchet MS, Verdana, Satisfy, Cookie'
         
});

mais vous avez ce script qui fait un conflit apparemment

Code:

var messageSaver=function(e,t){"use strict";var n=function(t){t=t.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");var n="[\\?&]"+t+"=([^&#]*)",r=new RegExp(n),i=r.exec(window.location.href),s=e("#text_editor_textarea").siblings('input[name="'+t+'"]').val();return i===null?s:i[1]};var r=function(e,t,n,r){var i={userID:e,topicURL:r,message:t};localStorage.setItem(n,JSON.stringify(i))};var i=function(e,t,n,r){var i,o="\nIl n'y a pas de message à charger.",u=localStorage.getItem(n);if(u!="undefined"){i=JSON.parse(u);s(e,t.val(),n,r)?t.val(i.message):alert("Erreur 1:\nLa vÃrification du message enregistrà a ÃchouÃ.")}else alert("Erreur 2: Il n'y a aucun message sauvegardà dans le WebStorage")};var s=function(e,t,n,r){var i,s=localStorage.getItem(n);if(s!="undefined"){i=JSON.parse(s);return i.userID===e&&i.topicURL===r&&t===""?true:false}else return false};var o=function(){var t=window.location.host,s=_userdata.user_id,o=n("t"),u=e('form[action="/post"]'),a=u.find('input[name="post"]'),f=e("#text_editor_textarea").sceditor("instance");f.bind("keyup",function(){r(s,f.val(),t,o)});if(localStorage.getItem(t)){a.before('<input type="button" class="mainoption btn-loader" id="ms-loader" value="Charger le message sauvegardÃ" /> &nbsp;')}u.on("click","#ms-loader",function(){i(s,f,t,o)})};return{init:o}}(jQuery);$(window).load(function(){typeof _userdata=="undefined"?console.log("L'objet \"_userdata\" de forumactif n'a pas Ãtà trouvÃ. Le script de sauvegarde des messages en cours d'Ãcriture ne peut pas fonctionner."):messageSaver.init()})

Cdt.

[Neptunia]

Coucou par ici


Il faudrait peut-être commencer par activer ou plutôt réactiver la gestion des codes javascript avant d'envisager un éventuel conflit.

Edité : Hypothèse hautement improbable, voir message suivant d'Adam_sfp

[*Splash*]

Bonsoir

@Félina13 comme dit plus haut en mettant seulement ce script cela doit fonctionner

Code:

 
WebFontConfig = {
    google: { families: [ 'Satisfy','Cookie' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();
$(function(){
          if(!$["sceditor"]) return;
          
        $.sceditor.defaultOptions.fonts= 'Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Sans-serif, Serif, Times New Roman, Trebuchet MS, Verdana, Satisfy, Cookie'
          
});

Je suis perplexe sur le fait que ce simple script suffise à installer et utiliser les polices additionnelles

[Adam_sfp]

Coucou par ici


Il faudrait peut-être commencer par activer ou plutôt réactiver la gestion des codes javascript avant d'envisager un éventuel conflit.

Hello
je pense que le javascript est bien activé sur le forum de @Félina13
http://feli.forumactif.org/

Sinon il n'y aurait pas cette erreur


que l'on trouve dans les scripts qui se mettent ensemble sur cette page
http://feli.forumactif.org/99327.js
si on enlève le script cité plus haut le code fonctionne parfaitement.

Je suis perplexe sur le fait que ce simple script suffise à installer et utiliser les polices additionnelles

Etonnant d'être perplexe puisque ce script fonctionnait bien pour vous selon votre réponse ici
https://forum.forumactif.com/t398147-awesomebb-ajout-de-police-supplementaire

Cdt.

[*Splash*]

C’est bien pour cela que je suis perplexe Adam, en refaisant la manip j’ai rencontré quelques soucis sur mon forum, à tel point que je suis passé par l’ajout au template

[Neptunia]

Coucou Adam,

Hello
je pense que le javascript est bien activé sur le forum de @Félina13
http://feli.forumactif.org/

Sinon il n'y aurait pas cette erreur

J'avoue que je n'ai pas analysé le forum impacté.

Et que j'ai formulé l'hypothèse d'une désactivation des js sur la base du fait qu'un autre script ne fonctionne plus (depuis un bail) et qu'un "incident de parcours" avait provoqué la désactivation des javascript sur de nombreux fora (il y a un bail aussi).

[Félina13]

le java est bien activé
Activer la gestion des codes Javascript : Oui (le oui est coché)

Bonsoir

@Félina13 vous avez ce script qui fait un conflit apparemment

Code:

var messageSaver=function(e,t){"use strict";var n=function(t){t=t.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");var n="[\\?&]"+t+"=([^&#]*)",r=new RegExp(n),i=r.exec(window.location.href),s=e("#text_editor_textarea").siblings('input[name="'+t+'"]').val();return i===null?s:i[1]};var r=function(e,t,n,r){var i={userID:e,topicURL:r,message:t};localStorage.setItem(n,JSON.stringify(i))};var i=function(e,t,n,r){var i,o="\nIl n'y a pas de message à  charger.",u=localStorage.getItem(n);if(u!="undefined"){i=JSON.parse(u);s(e,t.val(),n,r)?t.val(i.message):alert("Erreur 1:\nLa vÃrification du message enregistrà a ÃchouÃ.")}else alert("Erreur 2: Il n'y a aucun message sauvegardà dans le WebStorage")};var s=function(e,t,n,r){var i,s=localStorage.getItem(n);if(s!="undefined"){i=JSON.parse(s);return i.userID===e&&i.topicURL===r&&t===""?true:false}else return false};var o=function(){var t=window.location.host,s=_userdata.user_id,o=n("t"),u=e('form[action="/post"]'),a=u.find('input[name="post"]'),f=e("#text_editor_textarea").sceditor("instance");f.bind("keyup",function(){r(s,f.val(),t,o)});if(localStorage.getItem(t)){a.before('<input type="button" class="mainoption btn-loader" id="ms-loader" value="Charger le message sauvegardÃ" /> &nbsp;')}u.on("click","#ms-loader",function(){i(s,f,t,o)})};return{init:o}}(jQuery);$(window).load(function(){typeof _userdata=="undefined"?console.log("L'objet "_userdata" de forumactif n'a pas Ãtà trouvÃ. Le script de sauvegarde des messages en cours d'Ãcriture ne peut pas fonctionner."):messageSaver.init()})

Cdt.

J'ai cherché partout pour le code précité mais je ne le trouve nul part. Il serait où selon vous ? (je suis perdue la)

[Adam_sfp]

Bonjour @Félina13

Il doit être dans gestion des codes javascripts .(si cela peut vous aider au même endroit que vous avez le script avec les flèches haut et bas)

Vous pouvez essayez de le désactiver en décochant la case ou il est coché ( sur toutes les pages, index etc.. ) qui indique ou ce script s'applique et en enregistrant .

il faut bien comprendre que lorsque on ajoute des scripts dans gestion des codes javascript ils vont se retrouver ensemble sur une même page selon l'endroit que vous choisissez..

Par exemple si je met 3 scripts différents  et que ces 3 scripts sont cochés sur toutes les pages.
Ils vont se retrouver ensemble sur une même page et être appelés sur votre forum de cette manière

Code:

<script src="/99293.js" type="text/javascript"></script>

Quelquefois cela peut provoquer des erreurs ou des soucis de compatibilité entre eux...
Et si par exemple le premier script comporte une erreur les scripts suivants risquent de ne pas fonctionner...

Cdt.


@Splash Vous avez également des erreurs  sur votre forum provenant des scripts ...donc logique que vous rencontriez des soucis pour en faire fonctionner d'autres....

En regardant très rapidement dans un script vous avez ceci

Code:

</script>

qui cause une erreur....

[*Splash*]

@Splash Vous avez également des erreurs  sur votre forum provenant des scripts ...donc logique que vous rencontriez des soucis pour en faire fonctionner d'autres....

En regardant très rapidement dans un script vous avez ceci

Code:

</script>

qui cause une erreur....

Merci de l'info
Il y en avait 2 en fait

[Félina13]

Bonjour @Adam_sfp

Merci beaucoup.
Il y avait bien un conflit entre 2 JS. J'ai rectifié le tir.
Désormais, tout fonctionne à merveille : j'ai retrouvé mes flèches et les polices d'écriture apparaissent bien à l'endroit adéquate.

Merci également à tous ceux qui ont pu m'aider au mieux, comme Splash  

Vous êtes top