Chez oim, forum libre

Débattre => Informatique, programmation, geek attitude... => Discussion démarrée par: Songbird le mercredi 20 juillet 2016, 03:27

Titre: Lorsque j'utilise innerHtml/appendHtml, mon css ne s'applique pas ! Pourquoi ?
Posté par: Songbird le mercredi 20 juillet 2016, 03:27
Par défaut, Dart nettoie les injections d'html avant de les ajouter au document.
Seulement, lorsqu'il effectue le nettoyage, il supprime également tous les attributs de l'élément, y compris l'attribut style: affichant alors simplement votre texte.

Pour remédier au problème, il faut alors implémenter la classe abstraite NodeValidator (https://api.dartlang.org/stable/1.17.1/dart-html/NodeValidatorBuilder-class.html) dans une classe que vous aurez préalablement déclarée.
L'interface NodeValidator se charge de retenir les règles à faire respecter aux prochains morceaux de code HTML.

Voici un exemple d'utilisation:
Code: dart
import 'dart:html';
void main()
{
  var body = querySelector("body");
  body.setInnerHtml('<span style="color: red;">Hello, friend.</span>', validator: new TrustedNodeValidator()); /**On utilise la méthode setInnerHtml pour injecter et respecter les règles personnalisées.*/
}

/**Déclaration et implémentation de l'interface NodeValidator*/
class TrustedNodeValidator implements NodeValidator 
{
  bool allowsElement(Element element) => true; /**On autorise les éléments HTML*/
  
  bool allowsAttribute(element, attributeName, value) => true; /**On leur permet de posséder des attributs*/
}
Vous pouvez tester cet exemple ici (https://dartpad.dartlang.org/c68b9f30f303a007c70e37ef59a06f27).
Ou vous rendre sur la source de ce post ici (https://gist.github.com/kasperpeulen/fdf8012098d834e1d608).