Attention : Le contenu de ces pages n'a pas été mis à jour depuis longtemps. Il est probablement obsolète pour Firefox 4.0/Gecko 4.0 et supérieur. Pour du contenu plus récent, allez consulter developer.mozilla.org.

Editor

Voici quelques informations sur le mécanisme d'édition dans Gecko, que l'on trouve dans les balises textbox, input, textarea et editor.

Concepts

Chaque zone de saisie dans Mozilla, est en fait une sorte de iframe : un document HTML y est affiché, indépendant du document qui contient la balise textbox, editor etc..

Quand vous saisissez quelque chose dans une de ces balises, vous êtes en fait en train d'éditer un document HTML de manière wysiwyg, et plus exactement, vous modifiez le contenu de la balise <body> de ce document. Un objet, basé sur nsIEditor est chargé de controller la saisie et permet de manipuler le contenu et la selection (le curseur ou un morceau de texte sélectionné). Cet objet est ce qu'on appelle un éditeur.

Il y a deux éditeurs dans Gecko : un éditeur texte simple, et un éditeur html. Ce sont respectivement les objets @mozilla.org/editor/texteditor;1 et @mozilla.org/editor/htmleditor;1.

L'éditeur texte simple est celui utilisé dans <textbox>, <input>, <textarea> et autre zone de saisie purement textuelle. L'editeur html est utilisé dans <editor> ou dans midas (le "truc" utilisé dans les scripts JS pour éditer du wysiwyg dans les pages web, genre FckEditor..).

*Attention** : l'éditeur html ne peut éditer que du html (servit en text/html), et non pas du xhtml servit en application/xml+xhtml. D'ailleurs, il ne connait pas le xhtml et un fichier xhtml (servit en text/html) pourrait devenir invalide aprés édition et sauvegarde.

Récupérer l'éditeur

La balise input contient déjà quelques méthodes pour manipuler le contenu en cours d'édition (voir la référence. Mais si vous voulez aller plus loin, il vous faut récupérer l'objet éditeur utilisé.

balise input et textarea

L'objet representant un input implémente l'interface nsIDOMNSEditableElement. Elle possède une propriété editor qui contient l'objet editeur (texte simple).

  var input = document.getElementById("myinput");
  input.QueryInterface(Components.interfaces.nsIDOMNSEditableElement);
  var editor = input.editor;

balise textbox

La balise textbox xul est en fait un binding XBL qui contient un input html ou textarea html. Il contient une propriété inputField pointant vers cette balise html. Il suffit de la récupérer et ensuite de faire comme précédement :

 var mTextBox = document.getElementById("montextbox");
 var input = monTextBox.inputField;
 input.QueryInterface(Components.interfaces.nsIDOMNSEditableElement);
 var editor = input.editor;

(Si les méthodes et attributs de la balise input vous suffisent, vous n'avez pas besoin des deux dernières lignes, ni de lire la suite ;-) )

balise editor

La balise <editor> en xul est un binding xbl qui possède des méthodes toute prête :

  var mEditorTag = document.getElementById("moneditor");
  var editor = mEditorTag.getEditor(mEditorTag.contentWindow); // interface nsIEditor

ou encore

  var editor = mEditorTag.getHTMLEditor(mEditorTag.contentWindow); // interface nsIHTMLEditor

Modifier le contenu

Une fois que vous avez l'objet editeur, vous pouvez agir à votre guise en utilisant ses méthodes et propriétés, pour modifier le contenu "à la main", modifier la selection, le curseur etc...

Voir leur api :

editeur texte simple (balise input/textarea)
editeur html (balise editor)

Le contenu de cette page est disponible selon certaines conditions de réutilisation.
Cette page du wiki n'est pas éditable. Le système wiki n'étant plus fonctionnel.