Fonctionnement d'un wysiwyg

Question

Bonjour,

Dans le but de réaliser un wysiwyg personnel, j'aimerais savoir comment fait fckEditor (ou un autre wysiwug) pour afficher le texte formaté en HTML?
J'ai bien vu qu'il utilisait un iFrame mais ca n'explique pas tout. Qu'elle élément HTML permet de faire cela?

Merci d'avance

Maël

jdmcreator · Answer

Bonjour !

Je vais m'efforcer d'être le plus clair possible mais ce n'est pas garanti '^^

------- Créer un éditeur WYSIWYG -------

Les éditeurs WYSIWYG (What You See Is What You Get) sont créé à l'aide de deux manières :

1 - Une iFrame avec designMode à on :

iframe =  document.getElementById("IdDeLaFrame").contentDocument || document.getElementById("IdDeLaFrame").contentWindow.document;
iframe.designMode='on';

Seulement cette méthode n'est pas compatible pour tous les navigateurs (ici sous-entendu IE et mon Safari). Pour les autres navigateurs, il faut utiliser un div avec contentEditable à true

2- 



petite remarque qui pourrait t'être utile, la propriété booléenne javascript isContentEditable permet de savoir si l'éditeur est "wysiwyg".

------- Commandes -------

Maintenant pour modifier le contenu, il existe la fonction execCommand qui permet de transformer la sélection. execCommand continent 3 attributs :

1- la commande
2- jamais comrpis à quoi ça sert, mets juste "false"
3- un argument, si nécessaire.

exemple :  Gras 

Quelques liens utiles :
- {EN} Compatibilité : http://www.quirksmode.org/dom/execCommand.html
- {EN} Liste des possibilités : http://msdn2.microsoft.com/en-us/library/ms533049(VS.85).aspx

----- Recevoir le texte -----

Pour avoir le code HTML, il existe la propriété innerHTML.

document.getElementById('code').value =document.getElementById('wysiwyg').innerHTML;

En supposant que l'ID code est un textarea et WYSIWYG un div à contenteditable=true;
Pour les iframes, je ne me rappelle plus trop comment faire......
Note ici que FCKEditor traite leur code avant de te le renvoyer.

------ Sélection ------

Seulement un petit code pour permettre de connaître le texte de la sélection :

function getSelectedText(){
   if (window.getSelection){
      var str = window.getSelection();
   }else if (document.getSelection){
      var str = document.getSelection();
   }else {
      var str = document.selection.createRange().text;
   }
   return str;
}

Bon, ben c'est tout. Peut-être que ce petit tutorial sur JavascriptFr pourrait t'aider. Mais attention, il ne mentionne pas les iframes. Un WYSIWYG avec seulement div + contenteditable=true n'est pas compatible tous navigateurs ;)

javascriptfr.com/tutoriaux/CREATION-EDITEUR-WYSIWYG_820.aspx

Des questions ? N'hésite pas à me les poser !

Cordialement.

JDMCreator

Bul3 · Answer

Bonjour,
>>Seulement cette méthode n'est pas compatible pour tous les navigateurs
  

>>(ici sous-entendu IE et mon Safari). 

>>Pour les autres navigateurs, il
faut utiliser un div avec contentEditable à true
  

pas du tout !
exemple ici, compatible FF, K-Meleon, IE, Iron, Opera, Safari....

Cordialement	[mon Site]	[M'écrire]	Bul

jdmcreator · Answer

Salut,

C'est vrai, je croyais que les iFrames avec designMode n'étaient pas gérés pas IE, ça semble avoir changé ! Personnellement, je n'aime pas tous ces éditeurs de WYSIWYG en ligne qui sont incapable de gérer les DIV et les positions. Je travaille en ce moment à un éditeur WYSIWYG avec déplacement de DIV par Drag & Drop et redimmensionnement mais c'est long comme travail, surtout pour être capable de générer le code.

mael94420 · Answer

Merci beaucoup jdmcreator pour avoir passé du temps à rédiger ta réponse très clair et bien plus complète que je ne l'esperait. C'est exactement dans la même optique que toi que je souhaitais savoir comment ca fonctionne car j'ai en horreur le code générés par ces wysiwyg. J'essaye toujours de développer des sites web qui sont le plus accessible possible et mettre un wysiwyg tel que ceux qu'on peut trouver entre les mains de non webmaster donne parfois lieu à des choses très étranges et pas accessible du tout. Meme si biensur l'accessibilité réside avant tout dans la réfléxion humaine de personne qualifié, on peu quand même essayé de limiter la casse en essayant d'avoir des contenus propre et clair.

Merci aussi à toi Bul3 pour ce liens qui je pense va pas mal m'aider.

Pour la petite histoire, je vais le réaliser en utilisant jQuery.

Je posterais sans doute mon travail ici quand je l'aurais terminer.

Bonne continuation à vous

Maël

jdmcreator · Answer

Oui, les WYSIWYG comme FCKEditor renvoie souvent pour un texte en gras quelque chose comme :

Mon texte

Alors que

Mon texte

est nettement meilleur ;)

Fonctionnement d'un wysiwyg

5 réponses

Votre réponse

Discussions similaires