web-dev-qa-db-fra.com

Comment créer un éditeur de texte riche

Salut tout ce que je veux savoir quel est le concept derrière la création de l'éditeur de texte riche. je veux dire comment créer un éditeur de texte riche. Je veux apprendre l'implémentation.

PS: veuillez ne pas suggérer d'utiliser YUI ou toute autre bibliothèque intégrée. Je veux en faire un mien.

Alors, quel est le concept derrière?

Merci :)

javascripthtmlrich-text-editor
39
codeomnitrix

Le moyen le plus simple est le suivant. Il est utilisé par TinyMCE et CKEditor et bien d'autres. Il existe de nombreuses variantes: en particulier, si vous créez un éditeur de code, il existe des astuces astucieuses que vous pouvez effectuer à l'aide de zones de texte et d'une police à espacement fixe.

  • Créez dynamiquement un iframe et placez le contenu modifiable dans le document de cet iframe
  • Définissez l'iframe pour qu'il soit modifiable en définissant la propriété designMode de son document sur "on" ou en définissant la propriété contentEditable de son élément <body> Sur true. Notez que designMode le support est antérieur à contenteditable dans Firefox et en conséquence est beaucoup moins bogué.
  • Ajoutez des boutons (tels que gras, italique, insérez une image, etc.) dans un endroit raisonnable (comme directement au-dessus de l'iframe modifiable) dans le document principal qui agissent sur le contenu sélectionné dans l'iframe. Tous les navigateurs fournissent une méthode execCommand() (voir MSDN et MDN =, par exemple) pour effectuer un grand nombre de ces actions, bien qu'il y ait une certaine variation dans la façon exacte dont elles fonctionnent et dans la marge qu'elles produisent.

C'est l'essentiel de son fonctionnement. La plupart des éditeurs font des tonnes d'autres choses compliquées qui ne sont pas immédiatement évidentes, en partie pour aplanir les nombreuses différences entre les navigateurs et en partie pour fournir des fonctionnalités supplémentaires non couvertes par les commandes du navigateur intégrées. C'est une chose très compliquée et difficile à réussir, qui nécessite un haut niveau d'expertise et d'engagement et n'est pas quelque chose à prendre à la légère.

54
Tim Down

Je ne vous suggérerai pas de regarder les autres à utiliser, mais je suggère de jeter un œil à jWYSIWYG pour voir comment il est codé dans jQuery.

1
Chris Bornhoft