javascript Rich Text Editors

Question

Il existe plusieurs (très bons) éditeurs Web en texte enrichi écrits en Javascript (par exemple, FCKeditor, YUI Texteditor et bien d’autres).

Cependant, je n'ai trouvé aucun tutoriel sur la construction d'un tel composant. Quelque chose qui expliquerait à la fois les considérations de haut niveau (architecture) et / ou plus de détails dans "de bas niveau" et "critique" (c’est-à-dire pourquoi la plupart des éditeurs utilisent iFrame, comment gérez-vous les entrées au clavier comme Ctrl-B, Ctrl-C lorsque le texte est sélectionné et qu’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.

Quelqu'un a-t-il connaissance d'un didacticiel couvrant les problèmes ci-dessus (idéalement, quelque chose qui explique comment créer un éditeur wysiwyg à partir de rien)?

Answer 1

Après d’autres recherches, j’ai trouvé ce qui suit. La fonctionnalité permettant de créer un éditeur de texte enrichi est déjà implémentée sur le navigateur. IE a été le premier à créer une telle API et Firefox l’a répliquée.

Présentation

Le point principal est que l'objet javascript "document". a une propriété appelée designMode qui peut être définie sur "on". Ceci 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 le ferait: 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";

Étant donné que ce qui précède affecte toutes les pages Web, la plupart des éditeurs utilisent des iFrames, de sorte que la zone modifiable est uniquement l’iFrame qui possède son propre objet de document.

De plus, il existe une API qui permet un accès javascript facile au style. Ceci est exposé avec la méthode execCommand (). Par exemple, vous pouvez appeler à partir de Javascript

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

et le texte sélectionné deviendra gras.

Didacticiels

J'ai trouvé ce qui suit:

Une brève étape par étape guide .

Un guide . Il contient la référence d'API la plus pratique que j'ai trouvée et quelques liens supplémentaires.

Un guide de Microsoft .

Answer 2

Utilisez votre curiosité pour vous motiver à ouvrir simplement le code source dans votre éditeur favori et à commencer à explorer. Puisque ces éditeurs sont écrits en JavaScript, les réponses sont gratuites.

Je réalise que vous recherchez 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.