Wysiwyg Html Editor

Un éditeur html wysiwyg

Note: les exemples de cette page ne fonctionnent toujours qu'avec Microsoft Internet Explorer 5.5 minimum (sans parler du fait que je ne teste que sous IE6).

Mise au point

Les premiers pas (28 novembre 2002)
Une barre d'outils (2 décembre 2002)
Des liens accessibles (13 décembre 2002)
Du bel xhtml (18 décembre 2002)
Nouveau départ (6 janvier 2003)
Modification des liens (7 janvier 2003)
Insertion d'images (10 janvier 2003)
Sélection d'image (14 janvier 2003)

Démonstration (à ce jour)

Un peu de texte déjà saisi pour ne pas perdre de temps à en retaper à chaque essai.

Les fichiers

Pour télécharger un fichier, cliquer sur le lien, tout sélectionner (Ctrl A), copier (Ctrl C) puis coller (Ctrl V) dans un éditeur de texte (Notepad).

Comment ça marche ?

<html>
  <head>
    <title>Wysiwyg Html Editor</title>
    <link rel="stylesheet" href="wysiwyg.css" type="text/css" />
    <script type="text/javascript" src="wysiwyg.js"></script>
  </head>
  <body>
    ...
    <div class="memoBar" style="{width:400px;}">
    <!--#include file="wysiwyg.tb" -->
    </div>
    <div contentEditable="true" class="memoText"
          id="memoHtml1" style="{width:400px; height:60px;}">
    Un peu de texte déjà saisi pour ne pas perdre de temps à en retaper à chaque essai.
    </div>
    <button onclick="CopyContent('memoHtml1', 'areaHtml1');"> HTML </button><br />
    <textarea id="areaHtml1" style="{width:400px; height:120px;}"></textarea><br />
    ...
  </body>
</html>

Crédits et références