Dernière mise à jour :2008-08-29

informatique

Avec la venu d’Internet Explorer 5.5, créer un éditeur HTML WYSIWYG est devenu un jeu d’enfant.

En effet, à partir de cette version du navigateur, Microsoft a ajouté deux éléments clefs qui permettent la création rapide d’éditeurs HTML en Jscript.

C’est éléments sont l’attribut CONTENTEDITABLE et la méthode execComand. Voici d’ailleur, en seulement quelques lignes de code, une page web contenant une zone éditable et un bouton permettant de mettre en gras le texte sélectionné dans la zone :

Listing 1.0 Exemple d'éditeur HTML en JScript
<html>
<head>
<title>Test éditeur WYSIWYG</title>
</head>
<body>
<div contenteditable style="border:1px solid #000000;width:200px;height:200px;"></div>
<button onclick="document.execCommand('Bold');">Mettre en gras</button>
</body>
</html>

Depuis ce temps, une multitude d’applications web contenant ce type d’éditeurs sont venu au monde.

Le problème avec ces applications c’est qu’elles sont toutes limité à être utilisé avec Internet Explorer 5.5 et plus puisque les autres navigateurs ne reconnaissent pas ces codes.

Je me suis donc demandé si il existait une façon de créer un éditeur plus universel et j’ai trouvé qu’en Java il était possible de le faire.

J’ai donc créé un applet qui contient un petit éditeur WYSIWYG. évidemment, ça prend un peu plus de lignes de code pour arriver au résultat mais on en sort gagnant puisque l’éditeur peut être utilisé dans Netscape comme dans Internet Explorer.

Note : Le problème que j’ai rencontré cependant, c’est qu’on ne peut pas ajouter de fichiers externes dans l’éditeur. Par exemple, j’ai programmé un bouton permettant l’ajout d’images dans la page web mais bien que le code est créé, l’image ne s’affiche pas à l’écran car les sécurités entourant les applets empêchent les fichiers externe d’être traité par l’applet. Pour réussir à le faire, il faut faire signer l’applet un peu comme on peut le faire pour un contrôle ActiveX. évidemment, si vous réalisez l’éditeur en tant qu’application au lieu d’applet, ce problème ne s’applique pas.

Voici maintenant le code de cet éditeur HTML WYSIWYG en java suivi du code d’une page HTML qui inclut l’éditeur et qui comprend du code JavaScript permettant d’aller chercher le résultat en HTML de ce qu’un utilisateur entre dans l’éditeur.

Cliquez pour voir une démonstration

Listing 2.0 Exemple d'éditeur HTML en Java
import javax.swing.*;
import javax.swing.event.*;
import javax.swing.text.SimpleAttributeSet;
import javax.swing.text.*;
import javax.swing.text.html.*;
import java.awt.*;
import java.awt.event.*;
import java.net.URL;
import java.io.IOException;
import java.io.CharArrayWriter;
import java.io.CharArrayReader;
import java.io.Reader;
import java.util.Enumeration;
import java.util.Hashtable;

// Classe de fenetre Swing permettant de visualiser un
// document (HTML ou texte)
public class zHTMLEditor extends JApplet implements ActionListener
{
// Composant Swing permettant de visualiser un document
public JTextPane viewer = new JTextPane();
public JEditorPane sourcePane = new JEditorPane();
public JPanel panel = new JPanel();
public HTMLEditorKit k = new HTMLEditorKit();
public HTMLDocument doc = (HTMLDocument)k.createDefaultDocument();

public zHTMLEditor()
{
// Construction de l'Interface Graphique
// Panel en haut avec un label et le champ de saisie
viewer.setContentType("text/html");
viewer.setEditable (true);
viewer.setEditorKit(k);
viewer.setDocument(doc);
viewer.setText("<p></p>");

sourcePane.setContentType("text/plain");
sourcePane.setEditable (false);
showTree();

// Zone scrollee au centre avec le document
JScrollPane scrollPane = new JScrollPane (viewer);
JScrollPane scrollPane2 = new JScrollPane (sourcePane);
JPanel panel2 = new JPanel();
panel2.add(scrollPane, null);
panel2.add(scrollPane2, null);
panel2.setSize(200,200);

// Ajout des composants a la fenetre
setJMenuBar(createMenuBar());
panel.add(createToolBar(), BorderLayout.SOUTH);
getContentPane().add(scrollPane2, BorderLayout.SOUTH);
getContentPane().add(scrollPane, BorderLayout.CENTER);
getContentPane().add(panel, BorderLayout.NORTH);
}

public JMenuBar createMenuBar()
{
JMenuBar menubar = new JMenuBar();

JMenu color = new JMenu("Color");
color.add(new StyledEditorKit.ForegroundAction("Noir", Color.black));
color.add(new StyledEditorKit.ForegroundAction("Bleu", Color.blue));
color.add(new StyledEditorKit.ForegroundAction("Rouge", Color.red));
color.add(new StyledEditorKit.ForegroundAction("Jaune", Color.yellow));
menubar.add(color);

return menubar;
}

public JToolBar createToolBar()
{
JToolBar bar = new JToolBar();
JButton boldButton = new JButton();
JButton italicButton = new JButton();
JButton underlineButton = new JButton();
JButton colorButton = new JButton();
JButton cutButton = new JButton();
JButton copyButton = new JButton();
JButton pasteButton = new JButton();
JButton leftButton = new JButton();
JButton centerButton = new JButton();
JButton rightButton = new JButton();
JButton testButton = new JButton();
JButton linkButton = new JButton();
JButton imageButton = new JButton();
JButton h1Button = new JButton();
JButton h2Button = new JButton();
JButton h3Button = new JButton();

Action a = viewer.getActionMap().get("font-bold");
if (a != null)
{
boldButton = bar.add(a);
boldButton.setText("G");
}
a = viewer.getActionMap().get("font-italic");
if (a != null)
{
italicButton = bar.add(a);
italicButton.setText("I");
}
a = viewer.getActionMap().get("font-underline");
if (a != null)
{
underlineButton = bar.add(a);
underlineButton.setText("S");
}
bar.addSeparator();
a = viewer.getActionMap().get(StyledEditorKit.cutAction);
if (a != null)
{
cutButton = bar.add(a);
cutButton.setText("X");
}
a = viewer.getActionMap().get(StyledEditorKit.copyAction);
if (a != null)
{
copyButton = bar.add(a);
copyButton.setText("C");
}
a = viewer.getActionMap().get(StyledEditorKit.pasteAction);
if (a != null)
{
pasteButton = bar.add(a);
pasteButton.setText("V");
}
bar.addSeparator();
a = new StyledEditorKit.AlignmentAction("left",0);
if (a != null)
{
leftButton = bar.add(a);
leftButton.setText("<");
}
a = new StyledEditorKit.AlignmentAction("center",1);
if (a != null)
{
centerButton = bar.add(a);
centerButton.setText("-");
}
a = new StyledEditorKit.AlignmentAction("right",2);
if (a != null)
{
rightButton = bar.add(a);
rightButton.setText(">");
}
bar.addSeparator();
h1Button.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent event) {
try
{
HTML.Tag htmlTag = HTML.Tag.H1;
Hashtable htmlAttribs = new Hashtable();
String selText = viewer.getSelectedText();
int selStart = viewer.getSelectionStart();
int textLength = selText.length();
String myAnchor = "";
viewer.select(selStart, selStart + textLength);
SimpleAttributeSet sasTag = new SimpleAttributeSet();
SimpleAttributeSet sasAttr = new SimpleAttributeSet();
//String newAnchor = "http://www.bsf-qc.com";
//htmlAttribs.put("href",newAnchor);
Enumeration attribEntries = htmlAttribs.keys();
while (attribEntries.hasMoreElements())
{
Object entryKey = attribEntries.nextElement();
Object entryValue = htmlAttribs.get(entryKey);
sasAttr.addAttribute(entryKey,entryValue);
htmlAttribs.remove(entryKey);
}
sasTag.addAttribute(htmlTag,sasAttr);
viewer.setCharacterAttributes(sasTag,false);
viewer.setText(viewer.getText());
viewer.select(selStart, selStart + textLength);
}
catch (Exception ignoredForNow) {}
}
});
h1Button.setText("Titre");
bar.add(h1Button);
h2Button.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent event) {
try
{
HTML.Tag htmlTag = HTML.Tag.H2;
Hashtable htmlAttribs = new Hashtable();
String selText = viewer.getSelectedText();
int selStart = viewer.getSelectionStart();
int textLength = selText.length();
String myAnchor = "";
viewer.select(selStart, selStart + textLength);
SimpleAttributeSet sasTag = new SimpleAttributeSet();
SimpleAttributeSet sasAttr = new SimpleAttributeSet();
//String newAnchor = "http://www.bsf-qc.com";
//htmlAttribs.put("href",newAnchor);
Enumeration attribEntries = htmlAttribs.keys();
while (attribEntries.hasMoreElements())
{
Object entryKey = attribEntries.nextElement();
Object entryValue = htmlAttribs.get(entryKey);
sasAttr.addAttribute(entryKey,entryValue);
htmlAttribs.remove(entryKey);
}
sasTag.addAttribute(htmlTag,sasAttr);
viewer.setCharacterAttributes(sasTag,false);
viewer.setText(viewer.getText());
viewer.select(selStart, selStart + textLength);
}
catch (Exception ignoredForNow) {}
}
});
h2Button.setText("Titre 2");
bar.add(h2Button);
h3Button.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent event) {
try
{
HTML.Tag htmlTag = HTML.Tag.H3;
Hashtable htmlAttribs = new Hashtable();
String selText = viewer.getSelectedText();
int selStart = viewer.getSelectionStart();
int textLength = selText.length();
String myAnchor = "";
viewer.select(selStart, selStart + textLength);
SimpleAttributeSet sasTag = new SimpleAttributeSet();
SimpleAttributeSet sasAttr = new SimpleAttributeSet();
//String newAnchor = "http://www.bsf-qc.com";
//htmlAttribs.put("href",newAnchor);
Enumeration attribEntries = htmlAttribs.keys();
while (attribEntries.hasMoreElements())
{
Object entryKey = attribEntries.nextElement();
Object entryValue = htmlAttribs.get(entryKey);
sasAttr.addAttribute(entryKey,entryValue);
htmlAttribs.remove(entryKey);
}
sasTag.addAttribute(htmlTag,sasAttr);
viewer.setCharacterAttributes(sasTag,false);
viewer.setText(viewer.getText());
viewer.select(selStart, selStart + textLength);
}
catch (Exception ignoredForNow) {}
}
});
h3Button.setText("Titre 3");
bar.add(h3Button);

testButton.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent event) {
showTree();
}
});
bar.add(testButton);
testButton.setText("Show Tree");

return bar;
}

public void init ()
{
setSize(600,600);
show();
}

public void actionPerformed (ActionEvent event)
{
}

public void showTree()
{
Reader reader = null;
char[] chars = getSource();
reader = new CharArrayReader(chars);
Document docum = new PlainDocument();
try
{
sourcePane.getEditorKit().read(reader, docum, 0);
}
catch (Exception ignoredForNow) {}
sourcePane.setDocument(docum);
}

public char[] getSource()
{
CharArrayWriter writer = null;
writer = new CharArrayWriter();
try{
viewer.getEditorKit().write(writer, viewer.getDocument(), 0, viewer.getDocument().getLength());
}
catch (Exception ignoredForNow) {}
return writer.toCharArray();
}

public String getTree()
{
return sourcePane.getText();
}
}
Listing 3.0 Code HTML pour appeler l'Applet
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head><title>Swing Applet - éditeur HTML</title></head>
<body>
<applet name="myApplet" code=zHTMLEditor.class width=500 height=500></applet>
<form name="form1">
<textarea name="myText" rows="8" cols="60"></textarea>
<input type="button" onclick="document.form1.myText.value = document.myApplet.getTree();" />
</form>
</body>
</html>

Auteur : Sylvain Bilodeau

Date de mise en ligne : 2004-01-19

Aucun commentaire pour l'instant.