Comment afficher les styles dans une zone de texte HTML
https://stackoverflow.com/questions/245507
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
J'essaie d'ajouter différents styles dans une zone de texte, par exemple gras, couleurs différentes, etc.
Les éditeurs WYSIWYG (par exemple, tinyMCE) utilisés dans les pages Web le font généralement, mais j'ai du mal à comprendre comment ils le font.
Vous ne pouvez pas faire ceci:
texte de remplacement http://www.yart.com.au/test/html.gif
Alors, comment y parviennent-ils?
La solution
Owen a la bonne idée. Ces bibliothèques remplacent la zone de texte par un iframe, puis placent le document de l'iframe en mode designMode ou contentEditable. Cela vous permet littéralement de modifier le document html dans l'iframe pendant que le navigateur gère ensuite le curseur et toutes les frappes au clavier et vous fournit une API pouvant être appelée pour apporter des modifications 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 la façon d'activer ce mode et ce que vous pouvez en faire, voir: https: // developer.mozilla.org/En/Rich-Text_Editing_in_Mozilla
Toutefois, je vous suggère d'utiliser l'une des bibliothèques de contrôle de texte enrichi existantes si vous souhaitez utiliser cette fonctionnalité sur votre site. J'en ai déjà construit un et j'ai constaté que vous passeriez énormément de temps à gérer les incohérences du navigateur afin d'obtenir quelque chose qui fonctionne bien. Au-delà des différences d'activation des fonctionnalités d'édition, vous souhaiterez également normaliser le code HTML créé. Par exemple, IE crée <br> des éléments lorsque l'utilisateur appuie sur Entrée et que FF crée <p> balises. Pour les modifications de style, IE utilise <b>, <i>, etc., tandis que FF utilise des étendues avec des attributs de style.
Autres conseils
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 prend le contenu saisi et applique 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.
Je pense que tinymce utilise spécifiquement un tableau / iframe à des fins d'affichage (qui est substitué à la place de la textarea existante). Une fois que vous êtes prêt à l’enregistrer, toutes les informations sont copiées dans la zone de texte pour traitement.
