Éditeurs de texte enrichi javascript

Question

Il y a plusieurs (très bon) rich text éditeurs de sites web écrits en Javascript (par exemple FCKeditor, YUI Texteditor et beaucoup d'autres).

Cependant, je ne pouvais pas trouver toutes tutoriel sur la façon de construire un tel composant. Quelque chose qui pourrait expliquer à la fois les considérations de haut niveau (de l'architecture) et/ou plus de détails dans les bas-niveau des points "critiques" (c'est à dire pourquoi la plupart des éditeurs de là l'utilisation d'une iFrame, comment gérez-vous l'entrée de clavier comme Ctrl-B Ctrl-C lorsque le texte est sélectionné et quand il n'est pas etc)

Ma principale motivation est de la curiosité; si j'avais à mettre en valeur un éditeur aujourd'hui, je ne sais pas par où commencer.

Personne ne sait de toute tutoriel qui couvre les questions ci-dessus (dans l'idéal, quelque chose qui explique comment construire un éditeur wysiwyg à partir de zéro)?

Answer 1

Après plusieurs recherches, j'ai trouvé ce qui suit. La fonctionnalité pour la construction d'un riche éditeur de texte est déjà mis en œuvre dans le navigateur. IE a été la première à créer une telle API et Firefox l'a reproduit.

Vue d'ensemble

Le point principal est que le javascript objet "document" a une propriété appelée designMode qui peut être réglé sur "on". Cette fonction convertit toute la page d'un textarea comme composant. Imaginez que le navigateur ouvre la page de la même manière que MS-Word: l'utilisateur peut voir la mise en forme, mais il peut aussi entrer dans la page (normalement, le navigateur ouvre une page en lecture seule).

window.document.designMode = "On";

Parce que le ci-dessus affecte l'ensemble de la page web, la plupart des éditeurs utilisation d'iFrames, de sorte que la zone modifiable est seulement l'iFrame qui a sa propre objet document.

En plus de cela, il y a une API qui permet facile d'accès javascript pour le style. Ce est exposée jeter le execCommand() la méthode. Par exemple, vous pouvez appeler à partir de Javascript

document.execCommand('bold', false, '');

et le texte sélectionné devenir gras.

Tutoriels

J'ai trouvé ce qui suit:

Une brève étape par étape guide.

Mozilla guide. Il est le plus commode de référence de l'API que j'ai trouvé et aussi quelques liens supplémentaires.

Un guide par microsoft.

Answer 2

Utilisez votre curiosité pour vous motiver à simplement ouvrir le code source dans votre éditeur préféré et commencer à explorer. Étant donné que 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 la lecture du code source peut être très enrichissante.

Commencer à créer un éditeur peut être aussi simple que de prendre un éditeur open source existant et de le modifier pour répondre à vos propres besoins particuliers.