TwinXeon by Renaudet
/Accueil/Tous les articles
Un nouveau type de contenu pour les blogs, articles et autres BBS...
Les internautes qui visitent TwinXeon régulièrement auront sans doute remarqué que l'éditeur RichText utilisé à plusieurs endroits du site (commentaires pour les entrées de blog et les articles, post dans le forum, Notepad et client de Chat dans le VirtualDesktop) a connu ces jours-ci une mise-à-jour assez importante.

Nous sommes passé en effet de ceci :


à ceci :



En l'espace de quelques jours de développement.

Lors de cette mise à jour, j'ai découvert comment insérer du contenu arbitraire dans le texte généré par l'éditeur. La technique est assez simple en fait.

Normalement, l'éditeur repose sur le framework d'édition intégré au navigateur, et j'utilise pour cela l'API document.execCommand, comme par exemple lorsque je souhaite mettre une portion sélectionnée du document en cours d'édition en gras :

var ewin = document.getElementById(id).contentWindow;
var edoc = document.getElementById(id).contentDocument;
edoc.execCommand('bold', false, data);
ewin.focus();

Seulement voilà : certaines commandes sont reconnues par FireFox, mais pas par Internet Explorer, et inversement (pour ne parler que des principaux navigateurs supportés par TwinXeon). Il existe même un cas (la sélection de la couleur de fond de texte) pour lequel le nom de la commande est différent.

C'est en cherchant à corriger une différence de ce type, que j'ai trouvé la solution : il suffit de contourner les limitations imposées par l'API document.execCommand en allant directement manipuler le DOM du document édité. Ainsi, tout contenu DOM créé directement dans l'IFRAME du document en cours d'édition sera conservé tel quel.

Aussitôt dit, aussitôt implémenté, ce qui me permet maintenant de disposer de commandes d'insertion HTML identiques sous IE et FF :

if (document.all) {
   var span = document.createElement('span');
   span.innerHTML = '<img border="0" src="'+data+'">';
   edoc.body.appendChild(span);
} else {
   edoc.execCommand('insertHTML', false, '<img border="0" src="'+data+'">');
}

Il y a bien une petite différence (la méthode d'insertion dans le DOM insère systématiquement à la fin du document, mais cela permet d'offrir la fonctionnalité.

Corolaire de cette découverte, cela me permet donc d'insérer du contenu DOM arbitraire, et donc en particulier des noeuds JavaScript ! Mais voilà qui est bigrement intéressant !

J'ai donc réalisé un objet JavaScript chargé de récupérer le contenu d'un fichier *.dp créé à l'aide de l'outil DrawingPad du VirtualDesktop. Cet objet utilise un canvas HTML5 et une requête AJAX. Il récupère le flux hpgl depuis le FileSystem virtuel et l'interprète pour dessiner dans le canvas. La page de test de ce plugin est ici.

Une fois ce petit développement terminé, j'ai ajouté une nouvelle fonction d'insertion à mon éditeur. Une requête prompt demande à l'utilisateur le chemin virtuel vers le flux hpgl, puis insère le code JavaScript du composant et son initialisation ad hoc en utilisant la technique décrite plus haut.

case 'insertDrawing' :
  var documentUri = prompt('Entrer l\'URI du document : ', '/moebius/virtualDesktop/browse/');
  var div = edoc.createElement('div');
  div.id = 'drawingDiv_'+newDivId;
  div.setAttribute('style','border: 1px solid #000000;width 550px;height: 250px;');
  edoc.body.appendChild(div);
  var html =  '<script type="text/javascript">\n';
    html += '   document.getElementById(\'drawingDiv_'+newDivId+'\').style.border = "0px";\n';
    html += '   var dp'+newDivId+' = DrawingPadClient(\'dp'+newDivId+'\',550,250);\n';
    html += '   dp'+newDivId+'.setDocumentUri(\''+documentUri+'\');\n';
    html += '   dp'+newDivId+'.init();\n';
    html += '</script>';
  div.innerHTML = html;
  newDivId++;
break;

La première ligne du script vient modifier le comportement du bloc inséré entre l'éditeur (où l'important est de visualiser l'emplacement d'insertion de ce bloc) et le runtime (où l'important est que le code JavaScript s'exécute).

Voici le résultat (remarquez qu'il ne s'agit pas d'une image, mais d'un dessin vectoriel manipulable) :



[Edit du 05/05/2012] grâce au petit carré noir situé dans le coin inférieur droit de l'image, il est possible de redimensionner l'image et ainsi de visualiser le dessin en totalité (selon sa taille d'origine, bien entendu)
Ajoutez votre commentaire :
  Votre pseudo :
  Votre adresse mail (obligatoire):
  Votre commentaire :
 
Site optimisé pour un affichage en 800x600 sous Firefox 8.x - ©Copyright 2011-2012 by Nicolas Renaudet