Créer un éditeur de texte en ligne avec l'attribut satisfaistable

La construction d'un éditeur de texte en ligne n'est pas triviale. Le processus commence par rendre l'élément cible modifiable, gérer le potentiel SyntaxError Exceptions en cours de route.

Création de votre éditeur

Pour créer cet éditeur, vous devrez modifier dynamiquement le contenu des éléments HTML. Voici la structure HTML de base:

Edit Document<br><br><br>
<div id="editor">
  <h1 id="title">A Nice Heading.</h1>
  <p>Last Edited By - Monty Shokeen</p>
  <p id="content">Some content that needs correction.</p>
</div><br><br>

Chaque élément que vous souhaitez rendre modifiable a besoin d'un identifiant unique. Nous ajouterons également une barre d'outils simple:

<div id="toolbar">
  H1
  H2
</div><br><br>

Maintenant, ajoutons les fonctionnalités. Nous allons joindre un événement de clic au bouton H1 pour démontrer l'entrée du texte. Pour tester cela, utilisez un serveur Web simple (comme serve). Exécutez serve dans votre répertoire de projet; Le serveur commencera, fournissant un lien vers votre fichier html.

en utilisant designMode pour l'édition de pages entière

contentEditable est idéal pour éditer des éléments individuels. Pour modifier presque tout le contenu d'une page, utilisez la propriété designMode. Cela affecte l'ensemble du document. Activer avec document.designMode = 'on'; et le désactiver avec document.designMode = 'off';.

Ceci est particulièrement utile lors de la séparation de la conception et de la création de contenu. Un concepteur fournit le texte de mise en page et d'espace réservé, tandis qu'un créateur de contenu remplit le contenu réel. Pour expérimenter, ouvrez la console de développeur de votre navigateur, tapez document.designMode = 'on'; et appuyez sur Entrée. La page entière doit devenir modifiable.

Conclusion

L'attribut contentEditable simplifie les modifications rapides, comme la modification des articles ou des commentaires utilisateur. Initialement introduit dans IE 5.5, c'est maintenant une norme Whatwg avec un large support de navigateur (à l'exclusion d'Opera Mini).

JavaScript reste la pierre angulaire du développement Web. Bien qu'il ait une courbe d'apprentissage, de nombreux frameworks et bibliothèques sont disponibles. Explorez le marché d'Envato pour des ressources supplémentaires.

Ce tutoriel a couvert les principes fondamentaux de contentEditable, démontrant un éditeur en ligne de base et ajoutant des boutons de formatage riche.

Cet article comprend des mises à jour de Jacob Jackson, un développeur Web, un écrivain technique, un freelancer et un contributeur open-source.

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!