Voici quelques informations sur le mécanisme d'édition dans Gecko, que l'on trouve dans les balises textbox, input, textarea et editor.
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.
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é.
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;
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 ;-) )
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
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. Lire aussi la page des informations légales.
Mozilla® est une marque déposée de la fondation Mozilla.
Mozilla.org™, Firefox™, Thunderbird™, Mozilla Suite™ et XUL™
sont des marques de la fondation Mozilla.