Comment afficher les styles dans un HTML textarea

Question

Je suis en train d'ajouter différents styles dans une zone de texte, par exemple des couleurs vives, différentes, etc.

éditeurs WYSIWYG (par exemple tinyMCE) utilisés dans les pages web En général cela, mais je ne parviens pas à travailler comment ils le font.

Vous ne pouvez pas faire ceci:

alt text http://www.yart.com.au/test/html.gif

Alors comment fonctionnent-ils y parvenir?

Answer 1

Owen a la bonne idée. Ces bibliothèques remplacent la zone de texte par un iframe, puis placent le document iframe en mode designMode ou contentEditable. Cela vous permet littéralement de modifier le document html dans l'iframe tandis que le navigateur gère ensuite le curseur et toutes les frappes pour vous et vous donne une API qui peut être appelée pour faire des changements de style (gras, italique, etc.). Ensuite, lorsque l'utilisateur soumet le formulaire, il copie le innerHTML de l'iframe dans la zone de texte d'origine. Pour plus de détails sur comment activer ce mode et ce que vous pouvez faire avec, voir: https://developer.mozilla.org/En/Rich-Text_Editing_in_Mozilla

Cependant, je vous suggère d'utiliser l'une des bibliothèques de contrôle de texte enrichi existantes si vous souhaitez cette fonctionnalité sur votre site. J'en ai construit un avant et j'ai constaté que vous allez passer énormément de temps à gérer les incohérences du navigateur afin d'obtenir quelque chose qui fonctionne bien. Au-delà des différences dans la façon dont vous activez les fonctionnalités d'édition, vous souhaiterez également normaliser le code HTML créé. Par exemple, IE crée <br> éléments lorsque l'utilisateur appuie sur Entrée et que FF crée <p>. Pour les modifications de style, IE utilise <b>, <i>, etc. alors que FF utilise des plages avec des attributs de style.

Answer 2

Habituellement, ils superposent la zone de texte avec leur propre composant d'affichage comme un div. Au fur et à mesure que l'utilisateur tape, javascript prendra le contenu tapé et appliquera les styles dans la zone d'affichage. La valeur de la zone de texte est le texte avec les balises html nécessaires pour le rendre dans le style spécifié. Donc, visiblement, l'utilisateur voit le texte stylé.

Ceci est une explication simplifiée bien sûr.

Answer 3

Je crois que tinymce utilise spécifiquement une table/iframe à des fins d'affichage (qui est substituée à la place de la zone de texte existante). Une fois que vous êtes prêt à enregistrer, il copie toutes les informations dans la zone de texte pour traitement.