éditeurs de texte enrichi javascript
Il existe plusieurs (très bons) éditeurs Web de texte enrichi écrits en Javascript (par exemple FCKeditor, Yui Texteditor et beaucoup d'autres).
Cependant, je n'ai trouvé aucun tutoriel sur la façon de construire un tel composant. Quelque chose qui expliquerait à la fois des considérations de haut niveau (architecture) et / ou plus de détails dans les points "critiques" de bas niveau (c'est-à-dire pourquoi la plupart des éditeurs utilisent-ils iFrame, comment gérez-vous l'entrée du clavier comme Ctrl-B, Ctrl-C lorsque le texte est sélectionné et quand il ne l'est pas etc)
Ma principale motivation est la curiosité; si je devais développer un tel éditeur aujourd'hui, je ne saurais pas par où commencer.
Est-ce que quelqu'un connaît un tutoriel qui couvre les problèmes ci-dessus (idéalement, quelque chose qui explique comment construire un éditeur wysiwyg à partir de zéro)?
2 réponses
Après plus de recherches, j'ai trouvé ce qui suit. La fonctionnalité de construction d'un éditeur de texte enrichi est déjà implémentée dans le navigateur. IE a été le premier à créer une telle API et Firefox l'a répliquée.
Aperçu
Le point principal est que l'objet javascript "document" a une propriété appelée designMode qui peut être définie sur "on". Cela convertit toute la page en un composant de type textarea. Imaginez que le navigateur ouvre la page de la même manière que MS-Word: l'utilisateur peut voir le formatage mais il peut aussi taper la page (normalement le navigateur ouvre une page en lecture seule).
window.document.designMode = "On";
Parce que ce qui précède affecte toute la page web, la plupart des éditeurs utilisent des iFrames de sorte que la zone modifiable ne soit que l'iFrame qui a son propre objet document.
En plus de cela, il existe une API qui permet un accès javascript facile au style. Ceci est exposé lancer la méthode execCommand (). Par exemple, vous pouvez appeler à partir de Javascript
document.execCommand('bold', false, '');
Et le texte sélectionné devenez audacieux.
Tutoriels
J'ai trouvé ce qui suit:
Une brève étape par étape guide de.
Un guide mozilla . Il a la référence D'API la plus pratique que j'ai trouvée et aussi quelques liens supplémentaires.
Un guide de microsoft .
Utilisez votre curiosité pour vous motiver à ouvrir simplement le code source dans votre éditeur préféré et commencer à explorer. Puisque ces éditeurs sont écrits en JavaScript, les réponses sont gratuites pour la recherche.
Je me rends compte que vous cherchez quelque chose de plus facile à digérer, mais lire le code source peut être très gratifiant.
Commencer à construire un éditeur pourrait être aussi simple que de prendre un éditeur open source existant et de le modifier pour répondre à vos propres besoins spéciaux.