Comment puis-je afficher du HTML dans une TextArea sans utiliser d'outils externes ?

Afficher du HTML dans une zone de texte sans outils externes

Le rendu des balises HTML dans une zone de texte présente un défi en raison de la nature inhérente des zones de texte uniquement . Pour surmonter cette limitation, envisagez d'utiliser un div à contenu modifiable, qui permet efficacement la manipulation du contenu HTML.

Implémentation de div à contenu modifiable

La mise en œuvre d'un div à contenu modifiable est simple :

<div contenteditable="true"></div>

Ce div vous accorde un contrôle total sur son contenu, y compris l'inclusion de balises HTML pour le formatage et structure.

Exemple

Pour illustrer la fonctionnalité d'un div à contenu modifiable, reportez-vous à ceci exemple :

HTML

<div contenteditable="true">
    This is the first line.<br>
    See, how the text fits here, also if<br>
    there is a <strong>linebreak</strong> at the end?<br>
    It works nicely.<br>
    <br><span>

CSS

div.editable {
    width: 300px;
    height: 200px;
    border: 1px solid #ccc;
    padding: 5px;
}

strong {
    font-weight: bold;
}

Cet exemple montre comment le contenu peut être modifié dynamiquement, y compris l'ajout de balises HTML pour l'accentuation (), les changements de couleur et les sauts de ligne.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!