1
avr

Appliquer des styles CSS à un élément de contenu WYSIWYG avec TinyMce



TinyMce est un éditeur de texte pour applications web. Pour en savoir plus, voir un comparatif de plusieurs éditeurs WYSIWYG.

Des classes à disposition de l’utilisateur

Avec TinyMce, il est possible d’offrir à l’utilisateur de l’outil, la possibilité d’appliquer des styles CSS prédéfinis (classes) au contenu à mettre en forme.
Pour cela, il suffit de créer une feuille de style avec les classes voulues et de la lier à TinyMce lors de son instanciation.

Des CSS personnalisés par défaut

Le paramètre suivant permet de “surcharger” la feuille de style par défaut de TinyMce. Cela permet par exemple de mettre en forme les listes à puces du contenu WYSIWYG de la même manière que dans le reste de votre application.

  1. tinyMCE.init({ ...
  2. content_css : "tinyclasses.css"    // relatif à http://domaine.com/mon_site/tinyclasses.css
  3. });

TinyMce et les styles CSS

Dans l’exemple ci-dessus, on a une instance de TinyMce, grâce à la méthode init().
Il suffit de passer un paramètre de plus comme ceci :

  1. tinyMCE.init({...
  2. theme_advanced_styles : "Applications=tiny-appli;Les plus=tiny-plus;Gamme=tiny-gamme;Rouge=tiny-rouge;Petite taille de police=fontSize1;Taille de police normale=fontSize2;Grande taille de police=fontSize3;Image à gauche=gauche;Image à droite=droite;"
  3. });

pour obtenir une liste déroulante des classes que vous aurez définies grâce au paramètre theme_advanced_styles sous la forme : {Intitulé=class;}



Catégorie : Développement web
 scoopeo:Appliquer des styles CSS à un élément de contenu WYSIWYG avec TinyMce
3
jan

Avoir accès à Internet grâce à la magie



A Belcaire, dans l’Aude, les habitants ont eu accès à internet il y a environ 7 ans. Après quelques années de galère à 56K deLigne non éligible Orange débit, ceux-ci se sont vite jetés sur le débit à 512k apparu 3 ans après. (eh oui la campagne à 1000m d’altitude, ce n’est pas une priorité).

Orange, entre autres, propose donc (et facture) un abonnement à 1 Megamax (l’offre 512 n’existe plus) à 29.90€. Mise à part que le débit n’a jamais dépassé les 150K, il n’est pas possible pour les abonnés Orange de faire évoluer leur abonnement car :

Ligne non éligible Orange

(Cliquez pour agrandir)

Alors on dispose d’une ligne téléphonique non éligible, tout en étant facturé d’une offre 1 Megamax depuis 4ans : entube, dysfonctionnement technique ou magie ?



Catégorie : Prises de position
 scoopeo:Avoir accès à Internet grâce à la magie
14
déc

La nouvelle version de PhpBB est sortie



On l’attendais depuis longtemps, la version 3 de PhpBB est sortie ce 13 décembre 2007 : PhpBB3 Olympus.

Actuellement je teste les Release Candidates en local, je vais d’ici peu mettre cette version stable en “production”.

Une documentation est disponible : Documentation phpBB3. Elle vous apprendra à installer et à utiliser correctement cette version et surtout comment mettre à jour votre PhpBB2 vers la version 3.

L’annonce officielle - Le téléchargement



Catégorie : PhpBB
 scoopeo:La nouvelle version de PhpBB est sortie
22
nov

Les sélecteurs CSS, c’est pratique, mais…



Les sélecteurs CSS avancés simplifient (simplifieraient ?) la tâche de tout intégrateur. Ils permettent d’accéder à un élément ou à ses attributs sans lui spécifier de classe.

Des exemples pratiques :

Pour accéder seulement aux checkbox d’un formulaire :

  1. input[type=checkbox]{margin:30px 0 0 0;}

Pour iconiser des liens (permet un fond de lien différent en fonction de la cible du href) :

  1. a[href $='.pdf'] {
  2.  padding-left: 22px; background:url(img/pdf.gif) no-repeat left;}
  1. a[href $='.rar'] {
  2.  padding-left: 22px; background:url(img/archive.gif) no-repeat left;}
  1. a[href *="youtube.com/"] {
  2.  padding-left: 22px; background:url(img/youtube.gif) no-repeat left;}

Les sélecteur d’enfants (permet de cibler les enfants d’un élément) :

  1. #contenu > p{padding:0 0 0 20px;}

ou

  1. #contenu:first-child{padding:0 0 0 20px;}

qui permet de ne cibler que le premier enfant d’un élément.

Très pratique ! Et le “Mais” dans tout çà ? Eh bien il se nomme Internet Explorer 6 voyons ! Aucune de ces techniques n’aura les effets escomptés sur ce vieux navigateur.

Il existe une solution concernant le sélecteur d’enfant sur le JDN Développeurs.

Sinon l’ultime solution pour la totalité de ces techniques : Télécharger Firefox - Télécharger Opéra. Stop à l’utilisation d’IE 6 !



Catégorie : Développement web
 scoopeo:Les sélecteurs CSS, c'est pratique, mais...
11
oct

Passer enctype à un formulaire en DOM pour Internet Explorer



Le Document Object Model (ou DOM) est une recommandation du W3C qui décrit une interface indépendante de tout langage de programmation et de toute plate-forme, permettant à des programmes informatiques et à des scripts d’accéder ou de mettre à jour le contenu, la structure ou le style de documents. Le document peut ensuite être traité et les résultats de ces traitements peuvent être réincorporés dans le document tel qu’il sera présenté. Source Wikipedia.

En résumé, cela permet de jouer sur les éléments HTML d’un page. Prenons un exemple, celui sur lequel on travaille actuellement. On a un formulaire d’ajout de produit dans une interface d’administration web. On a un champ “file” qui me permet d’attacher une image au produit.

Formulaire DOM

Eh bien grâce au DOM et à Javascript, sur le clic du lien “Fichier supplémentaire”, on fait apparaitre les mêmes types de champs (on modifie l’arbre DOM) afin de pouvoir attacher un nombre illimité de fichiers, ceci sans rechargement de page puisque tout se passe “côté client”, c’est à dire sur le navigateur de l’internaute.

Formulaire DOM 2

Après cette longue introduction, venons en au problème. Il n’y a pas beaucoup de sources à propos de ce bug sur internet, d’où la création de ce billet. Le problème se situe dans la création de formulaire grâce au DOM et sous Internet Explorer. Pour créer un formulaire le code peut être le suivant :

  1. // Création de l'objet formulaire
  2. var form = document.createElement('form');
  3. // Assignation des attributs
  4. form.setAttribute('id','form_1');
  5. form.setAttribute('action','page_action.php');
  6. form.setAttribute('method','post');
  7. // Création de l'objet fieldset
  8. fieldset = document.createElement('fieldset');
  9. // Ajoute le nœud fieldset au parent form
  10. form.appendChild(fieldset);

Maintenant si on veut transférer des fichiers via ce formulaire (upload grâce à input file), on doit créer un input de ce genre :

  1. // Création de l'élément input
  2. input_fichier = document.createElement('input');
  3. input_fichier .setAttribute('type','file');
  4. input_fichier.setAttribute('name','fichier[]');

Mais il faut aussi ajouter l’encodage du formulaire, spécifiant un échange de données :

  1. form.setAttribute('enctype','multipart/form-data');

Sous Firefox tout va bien, le problème vient d’un bug d’Internet Explorer (qui a dit encore ?) qui ignore tout simplement l’encodage attribué ci-avant.

La solution ?

Coupler à l’attribut enctype l’attribut encoding de la manière suivante :

  1. form.setAttribute('enctype','multipart/form-data');
  2. form.setAttribute('encoding','multipart/form-data');

Dorénavant IE et Firefox prendront en compte l’encodage du formulaire et vos fichiers seront correctement “postés” vers votre page de traitements.



Catégorie : Développement web
 scoopeo:Passer enctype à un formulaire en DOM pour Internet Explorer
27
sept

La non violence : une journée internationale



A partir de cette année, une journée internationale de la non-violence sera commémorée chaque année le 2 Octobre. Décrétée par l’ONU (Ogranisation des Nations Unies), elle rend hommage à Kurt Waldheim, ancien secrétaire général de l’ONU et ancien Président de l’Autriche décédé en Juin 2007.

Cette décision a été prise en vertu d’un projet de résolution adopté à l’unanimité et présenté par la délégation de l’Inde, invitant touBiches de Sainte Lucies les États Membres, les organismes du système des Nations Unies, les organisations régionales et non gouvernementales et les individus à célébrer cette Journée et à diffuser le message de non-violence, notamment par des actions d’éducation et de sensibilisation.

A Perpignan, diverses associations invitent à un rassemblement Place de Catalogne, le 2 octobre à 18h00 comme dans 130 pays dans le monde et trois autres villes françaises : Paris, Marseille et Toulouse.

Musique, stands, libre expression, activités en tout genre marqueront le refus de toutes les violences que ce soit dans notre quotidien d’occidentaux (relations humaines, racisme, destruction de l’environnement), ou un peu plus loin de nous, mais pas tant que ça (misère et guerres).

Encore une belle initiative, qui permettra, je l’espère de resserrer les liens entre les personnes lors de rassemblements de ce genre. Mais encore une fois, la non-violence c’est avant tout des idées et un état d’esprit, une journée dans l’année peut-elle faire s’envoler les colombes de la paix ?



Catégorie : Prises de position
 scoopeo:La non violence : une journée internationale
12
sept

Développeurs ! Quelles sont vos conventions en termes de base de données ?



La programmation, et dans mon cas le développement web, est remplie de conventions en tout genre. Ce sont des accords sur des règles à respecter tant dans l’écriture de code que dans le “nommage” des tables et champs de bases de données.

Il n’existe pas de règles officielles, chacun est libre, selon ses acquis ou ses habitudes de choisir telle ou telle convention, ou d’en créer une particulière.Base de données

C’est pour cela que j’aurai aimé avoir l’avis de développeurs confirmés, étudiants ou bricoleurs du web, peu importe.

  1. Quelles sont vos règles et pourquoi ? Quels noms donnez vous à vos tables, vos champs ?
  2. Faut-il mettre au pluriel le nom de la table des “Categories” ?
  3. L’identifiant d’une table (et plus généralement tous ses champs) doit-il est suffixé par le nom de la table ?
  4. Un identifiant d’un produit de type “id_produit” devrait-il être au singulier ou au pluriel ?
  5. Undersore, tiret ou concaténation entre les mots d’une table ?

Merci de laisser vos conseils avisés en commentaires !



Catégorie : Développement web
 scoopeo:Développeurs ! Quelles sont vos conventions en termes de base de données ?
7
sept

Aaron, Renan Luce, découvertes musicales



Je tenais à vous faire partager mes découvertes musicales du moment.

Aaron :

Aaron, découvert comme beaucoup dans le film “Je vais bien ne t’en fais pas“, puis vu en concert sur les plages de La Franqui. Une prestation majestueuse, pleine de sincérité. Piano, violoncelle, paroles et voix superbes forment un mélange simple et magnifique.

Aaron - U-turn (Lili)

Renan Luce :

Une guitare et une jolie voix. Des paroles super rigolotes, un phrasé parfait, et une langue française finalement si bien respectée, c’est beau et plein de joie. A acheter au plus vite.

Renan Luce - La lettre

Renan Luce - Les voisines



Catégorie : Musique
 scoopeo:Aaron, Renan Luce, découvertes musicales