Discussion :

[Clement_archeo]

Bonjour

c'est encore moi avec mon site développé sous Wordpress.
Je voudrais désormais intégrer un éditeur wysiwyg dans mes formulaires, et j'ai donc essayé avec celui-ci : https://summernote.org

dans mon fichier functions.php, j'ai donc inséré les lignes suivantes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
	function summernote_enqueue_scripts()
{	 wp_enqueue_style('summernote_css', 'http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.css');
    wp_enqueue_script('summernote_js', 'http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.js',FALSE, TRUE);
wp_enqueue_script('script-perso', get_stylesheet_directory_uri() . '/custom-js/summernote.js', array('bootstrap','jquery','summernote_js' ) , FALSE, TRUE);
 
}
 
add_action('wp_enqueue_scripts', 'summernote_enqueue_scripts');

à côté, j'ai donc un fichier summernote.js avec le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$(document).ready(function() {
  $('#summernote').summernote();
});

et j'ai donc un formulaire avec une text area qui possède l'id="summernote".
A priori, tout devrait fonctionner, non ?
Ai-je fait une erreur encore quelques part ?

Merci d'avance de vos réponses

[Invité]

Bonjour,

voir cette discussion.
C'est exactement le même principe.

[Clement_archeo]

Je sais bien, c'est pour ça que j'ai essayé d'appliquer le même principe et j'ai aussi essayé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
jQuery(document).ready(function($) {
  $('#summernote').summernote();
});

pour voir si ça fonctionnait mieux. mais en vain...

[Clement_archeo]

Bon, je pense avoir réussi à activer summernote en reprenant un peu tout.
Mais par contre il ne s'affiche absolument pas comme prévu.
cf exemple : http://www.xx/essai_summernote/
merci si qqun peut regarder...

[darkstar123456]

Salut,

Tu as plein d'erreurs Javascript

Il y en d'ailleurs une qu'on a déjà vu hier comment corriger ;-)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Uncaught TypeError: $ is not a function at summernote.js?ver=5.2.4:1

EDIT :
Je te conseille de toujours mettre le paramètres $in_footer de wp_enqueue_script($handle, $src = '', $deps = array(), $ver = false, $in_footer = false) à TRUE, ça évite souvent des problèmes.
Le problème ici est que, quand tu appelles la lib summernote.js, jQuery n'existe pas encore et n'est pas encore chargé.

[Clement_archeo]

en fait, c'est ce que j'ai corrigé avec dans functions.php :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
//activer editeur wysiwyg
function summernote_enqueue_scripts()
{	 wp_enqueue_style('summernote_css', 'http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.css');
    wp_enqueue_script('summernote_js', 'http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.js',['bootstrap','jquery'],FALSE, TRUE);
wp_enqueue_script('script-perso2', get_stylesheet_directory_uri() . '/custom-js/summernote.js', array('bootstrap','jquery','summernote_js' ), FALSE, True);
 
}
 
add_action('wp_enqueue_scripts', 'summernote_enqueue_scripts');

et le code de summernote.js est :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 jQuery(document).ready( function ($) {
    $('#summernote').summernote();
} );

par contre, je ne vois pas d'erreur dans la console, où as-tu vu ça darkstar ?

[darkstar123456]

Quand je me rends sur le lien que tu as donné je vois ceci :

[Clement_archeo]

oh zut, j'ai rien de tout ça de mon côté
désolé de tou ces bugs de débutant !

[Clement_archeo]

je pense avoir corrigé l'erreur dont tu parlais Darkstar,
mais il reste apparemment : Bootstrap's tooltips require Popper.js
est-ce que vous pensez que le problème vient de là ?

[darkstar123456]

Le require est une instruction qui retourne une erreur bloquante, donc oui.

Il est précisé dans la documentation Bootsrap que popper.js doit être chargé

Tout ce qu'il te reste à faire, est de charger popper.js avant le JS de Bootstrap, de la même façon qu'on a chargé tous les JS jusqu'à maintenant.
Le CDN de popper.js est renseigné dans mon lien juste au-dessus, mais sinon le voilà : https://cdnjs.cloudflare.com/ajax/li.../popper.min.js

[Invité]

Bonjour,

• https://getbootstrap.com/docs/4.3/ge.../introduction/

CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Et, effectivement, on ne trouve pas popper(.min).js sur ton site.

[Clement_archeo]

oh, la vache, je comprends mes erreurs, mais ça prend du temps désolé.
Ma foi, j'ai effectivement rajouté la bonne ligne qu'il faut et ça marche !!
merci !!

et oui, je me doute Jreaux62 qu'il y a des milliers de scripts qui se lancent. C'est le gros inconvénient de wordpress et de ses extensions qui te facilitent la vie en apparence, mais qui en fait te la complique...c'est pour ça que j'essaie maintenant de faire autrement

[Clement_archeo]

merci beaucoup en tout cas. Darkstar, est-ce que tu pourrais s'il te plaît supprimer le lien vers le site dans ton message ?

[darkstar123456]

Lien supprimé