Fonctions execCommand
Depuis Internet Explorer 5.5 (dans sa version windows) dispose de la
fonction non-standard execCommand qui permet d'accéder à
des fonctions d'édition avancées sans avoir à les
programmer soi-même. Il est par exemple possible de faire du
couper/copier/coller, mettre en gras/souligné/italique, changer
de police de caractères... Mais execCommand ne sert pas que
à editeur WYSIWYG, il permet aussi par exemple de bookmarker une
page. (Il est aussi possible d'utiliser external.AddFavorite() par
ça)
queryCommandSupported() retourne un booléen permettant de savoir
si la commande est supporté sur une sélection
donnée.
Seul un paramètre le premier paramètre de execCommand est
requis, il s'agit de la fonction à appeler. Le deuxième
est un booléen indiquant s'il on souhaite afficher une interface
utilisateur quand la fonction le proprose, le troisième permet
de donner une valeur par défaut à l'interface utilisateur
(si deuxième paramètre à true).
Affichage d'une boîte de dialogue permettant d'insérer un
lien :
document.execCommand("CreateLink", true);
Affichage d'une boîte de dialogue permettant d'insérer un
lien, avec comme valeur par défaut "http://www.supinfo.com" :
Voici non-exaustive de fonctions
execCommand utiles pour démarrer. Pour avoir la
liste complète rendez-vous sur la MSDN.
BackColor
Affecte ou
récupère la couleur de fond de la sélection
courrante.
Bold
Passe la sélection
courrante du statut gras à non-gras, et vise-versa.
Copy
Copie la sélection
courrante dans le presse-papier.
CreateLink
Créée un hyperlien
sur la sélection courrante, ou affiche une boîte de
dialogue invitant l'utilisateur à spécifier une URL pour
créer un hyperlien sur la sélection courrante.
Cut
Copie la sélection
courrante dans le presse-papier, avant de l'effacer de l'écran.
Delete
Efface la selecion courrante.
FontName
Affecte ou
récupère la police de caractère de la
sélection courrante.
ForeColor
Affecte ou
récupère la couleur de texte de la sélection
courrante.
InsertImage
Remplace la sélection
courrante par une image.
Italic
Passe la sélection
courrant du statut italique à non-italique, et vise-versa.
JustifyCenter
Justifie centré le block
de la sélection courrante.
JustifyLeft
Justifie à gauche le
block de la sélection courante.
JustifyRight
Justifie à droite le
block de la sélection courante.
Paste
Remplace la sélection
courrante par le contenu du presse-papier.
Redo
Répète la
dernière action annulée. (Edition ->
Répéter)
RemoveFormat
Retire les tags de mise en page
de la sélection courrante.
Underline
Passe la sélection
courrante du statut souligné à non-souligné, et
vise-versa.
Undo
Annule la dernière action
effectuée. (Edition -> Annuler)
Unlink
Retire les lienhypertextes de la
sélection courrante.
2.1 Exemple
Voici un exemple utilisation les fonctions execCommand : undo, redo,
cut, copy, paste, bold, italic, underline, strikethrough, justifyleft,
justifycenter, justifyright, createLink, insertImage,
insertorderedlist, insertunorderedlist, forecolor, backcolor.
function callColorDlg(sColorType)
{
if (sInitColor == null)
// affichage de la
boîte de dialogue de choix de couleur
var sColor = dlgHelper.ChooseColorDlg();
else
var sColor = dlgHelper.ChooseColorDlg(sInitColor); //change
decimal to hex sColor =
sColor.toString(16); // ajout de
zéro si il y a moins de 6 chiffres if
(sColor.length < 6) {
var sTempString = "000000".substring(0,6-sColor.length); sColor =
sTempString.concat(sColor); } // change la
couleur de la sélection
document.execCommand(sColorType, false, sColor); sInitColor =
sColor; oDiv.focus(); }
La balise <OBJECT> permet
d'initiliser
une boîte de dialogue windows pour le choix de couleur, elle est
affichée avec sa fonction ChooseColorDlg(). Le paramètre
sColorType est passé à la fonction execCommand, les
valeurs les plus appropriées à lui passer sont BackColor
et ForeColor.
La MSDN propose également de récupérer la
liste des polices de caractères de l'ordinateur, mais il vaut
proposer les polices de caractères les plus courrantes à
l'utilisiteur final, car il ne comprendra pas forcément que les
autres utilisateurs ne puisse pas voir son texte dans une police de
caractères qu'il est le seul à posséder.
Re-voici une nouvelle version de notre éditeur avec le choix des
couleurs dans la boîte de dialogue Microsoft.
2.3 Mode HTML
Pour récuper le contenu HTML d'un éditeur, on utilise
innerHTML.
Ainsi pour passer du mode visuel au mode HTML :
var edt =
document.getElementById("monEditeur"); var tmp = edt.innerHTML; edt.innerText = tmp;
pour passer du mode HTML au mode visuel :
var edt =
document.getElementById("monEditeur"); var tmp = edt.innerText; edt.innerHTML = tmp;
2.4 Enregistrement
Pour que le contenu soit enregistré via un formulaire
<FORM>, il faut que son contenu soit dupliqué d'un
élément de formulaire tels que <INPUT
type="hidden">, <INPUT type="text">, <TEXTAREA> ...
Le plus adpté est le <INPUT type="hidden"> puisqu'il est
invisible. Avant l'envoi en POST ou en GET du formulaire il faudra donc
copier le contenu de l'éditeur dans ce <INPUT
type="hidden">, cet événement pourra être lors
du clique sur le bouton de soumission du formulaire.
Si l'on est en mode visuel :
var edt =
document.getElementById("monEditeur"); var hidden =
document.getElementById("monInputHidden");
hidden.value = edt.innerHTML;
Si l'on est en mode HTML :
var edt =
document.getElementById("monEditeur"); var hidden =
document.getElementById("monInputHidden");
hidden.value = edt.innerText;
920 Visites
Marc FALESSE
[20 mn de lecture - paru le 11/5/2003 - Public : Débutant]