Étiquette : JavaScript

[Vue.js] Accès à un élément de la DOM d’un composant enfant

[Vue.js] Accès à un élément de la DOM d’un composant enfant

Si vous développez avec Vue.js, vous avez peut-être eu, à un moment donné, besoin d’accéder à un élément de la DOM dans un composant enfant. En général, pour permettre la communication entre des composants parent et enfant, on utilise plutôt la liaison « double-sens » – ou 2-ways binding en anglais – à l’aide de la directive v-model ou bien encore des événements.

Cependant la méthode du 2-ways binding permet surtout de synchroniser des valeurs et de les garder à jour lorsque le parent doit y accéder. Ici, on aimerait pouvoir manipuler un élément de la DOM directement.

Vue.js: accès à un élément de la DOM d'un composant enfant

Poursuivre la lecture « [Vue.js] Accès à un élément de la DOM d’un composant enfant »

[JS] Récupérer le contenu d’un éditeur tinyMCE

[JS] Récupérer le contenu d’un éditeur tinyMCE

Si vous ne connaissez pas encore tinyMCE, il s’agit d’un éditeur WYSIWYG que vous pouvez intégrer à vos sites. Il est notamment très connu grâce à son utilisation dans WordPress. L’édition Community est gratuite mais il existe également des offres avec support et plugins premium.

Pour une raison ou une autre vous souhaitez peut-être récupérer le contenu d’un éditeur initialisé avant de l’envoyer au serveur. Cela est évidemment possible ! Bien que cet article serve avant tout de mémo il va également vous aider à ne pas plonger dans les méandres de l’énorme documentation de la librairie. Voyons ensemble comment procéder.

Poursuivre la lecture « [JS] Récupérer le contenu d’un éditeur tinyMCE »

[JS] Retour sur le rendu d’une page avec PDF.js

[JS] Retour sur le rendu d’une page avec PDF.js

Il y a déjà un moment nous abordions le fait de pouvoir afficher une page de PDF sous forme d’image grâce à la librairie PDF.js. Les différentes mises à jour de celle-ci ont conduit à ce que certains appels soient désormais dépréciés, bien que toujours fonctionnels. Dès lors, comment modifier votre code ?

Poursuivre la lecture « [JS] Retour sur le rendu d’une page avec PDF.js »

[JS] Prism, une alternative à SyntaxHighlighter

[JS] Prism, une alternative à SyntaxHighlighter

En guise d’alternative au très bon SyntaxHighlighter développé par Alex Gorbatchev (voir le site ici) mais qui n’est malheureusement plus mis à jour, on peut utiliser Prism.js.

Il offre la coloration syntaxique pour afficher du code de manière à ce qu’il soit lisible par les utilisateurs. Il se veut intuitif et extensible car il est possible d’ajouter assez facilement des langages à ceux déjà pris en charge. On peut même basculer entre différents thèmes. La librairie est utilisée par de nombreux sites tels que React ou même Drupal.

Poursuivre la lecture « [JS] Prism, une alternative à SyntaxHighlighter »

[JS] Afficher un PDF au format image avec pdf.js

[JS] Afficher un PDF au format image avec pdf.js

Il existe plusieurs méthodes en Java pour transformer un PDF (ou une partie seulement) en image côté serveur, afin de renvoyer le résultat au client, pour qu’il ne lui reste plus qu’à l’afficher. La première qui vient à l’esprit est Apache PDFBox.

D’autres comme IcePDF ou JPedal font bien le job aussi, mais sont souvent payantes. De plus, le traitement peut évidemment vite devenir lourd pour le serveur si de nombreuses requêtes sont effectuées par plusieurs utilisateurs.

Poursuivre la lecture « [JS] Afficher un PDF au format image avec pdf.js »

[JS] JQuery – Mémo #2 – Requête AJAX

[JS] JQuery – Mémo #2 – Requête AJAX

JQuery vous permet d’effectuer facilement des requêtes AJAX. Par exemple:

$.ajax({
 type : "POST",
 url : "URL_A_APPELER",
 data : {
  param1: val_param1,
  param2: val_param2,
  // ...
 }
})
.done(function(data)
{
})
.fail(function(jqXHR, responseHtml, url)
{
});

Dans l’exemple on spécifie le type de requête, l’URL appelée, et les données envoyées. La fonction done() est exécutée lorsque la réponse est positive. L’objet « data » est alors un objet qui peut contenir du HTML notamment. La fonction fail() est exécutée quand la réponse du serveur est une erreur ou quand l’appel a échoué.

Dans JQuery 3, il ne faut plus utiliser les méthodes callback suivantes : error(), success() et complete().

La documentation officielle décrit les paramètres supplémentaires et l’utilisation des méthodes callback. Par exemple, on peut passer un objet dans « data » à la place des différents paramètres. Au niveau des options, on peut notamment spécifier async: false, pour forcer l’attente de la réponse. Les possibilités sont nombreuses.

[JS] Des infobulles avec Tooltipster 4

[JS] Des infobulles avec Tooltipster 4

Tooltipster est un script permettant d’afficher des infobulles modernes, bien plus « user-friendly » que ce que proposent les navigateurs. Il nécessite JQuery pour fonctionner (attention que sous Internet Explorer 9 avec JQuery version 1.8, cela ne fonctionnera tout simplement pas!)

Poursuivre la lecture « [JS] Des infobulles avec Tooltipster 4 »

[JS] Personnaliser la liste de styles dans tinyMCE

[JS] Personnaliser la liste de styles dans tinyMCE

Dans l’éditeur tinyMCE, lorsqu’on choisit de dérouler le menu de sélection du format, on dispose d’éléments par défaut comme les en-têtes (h1 à h6), l’alignement ou bien même la mise en forme classique comme le « gras », « souligné » ou « italique ». Ce menu peut être personnalisé de différentes manières.

Poursuivre la lecture « [JS] Personnaliser la liste de styles dans tinyMCE »

[Sécurité] Quel site fabrique de la cryptomonnaie?

[Sécurité] Quel site fabrique de la cryptomonnaie?

Il y a peu j’avais pu constater que certains sites (notamment des sites proposant du téléchargement illégal) utilisaient le moteur JavaScript du navigateur pour miner de la crypto-monnaie. C’est une pratique qui semble devenir… monnaie courante – pardon pour le jeu de mots – afin de générer des revenus.

Poursuivre la lecture « [Sécurité] Quel site fabrique de la cryptomonnaie? »

[JS] Recharger un TA tinyMCE après appel AJAX

[JS] Recharger un TA tinyMCE après appel AJAX

Pas plus tard qu’aujourd’hui j’ai été confronté à un petit problème de rafraichissement de mes champs textarea pour lesquels j’utilise l’éditeur tinyMCE 4, un éditeur WYSIWYG permettant de saisir du texte et de le transformer en code HTML.

En effet, après un appel AJAX qui ajoutait des éléments textarea dans mon code, je rappelais la fonction tinymce.init(). Sauf qu’il n’y avait alors que les nouveaux champs qui étaient chargés…

Poursuivre la lecture « [JS] Recharger un TA tinyMCE après appel AJAX »