Créer un éditeur en ligne nécessite des efforts. Vous commencez par changer l’élément à éditer avec un contribution ou zone de texte champ. Pour une expérience utilisateur transparente, vous devrez peut-être également utiliser du code CSS afin de faire correspondre le style des éléments échangés à ceux d'origine. Une fois que l'utilisateur a terminé son édition, vous devrez encore changer les éléments après avoir copié tout le contenu dans l'original.. 

le contentEditable attribut rend cette tâche beaucoup plus facile. Tout ce que vous avez à faire est de définir cet attribut sur vrai et les éléments standard HTML5 deviendront modifiables. Dans ce tutoriel, nous allons créer un éditeur de texte enrichi en ligne basé sur cette fonctionnalité..

Les bases

Cet attribut peut prendre trois valeurs valides. Ceux-ci sont vrai, faux et hériter. La valeur vrai indique que l'élément est éditable. Une chaîne vide sera également évaluée à true. faux indique que l'élément n'est pas éditable. La valeur hériter est la valeur par défaut. hériter indique qu'un élément sera éditable si son parent immédiat est éditable. Cela implique que si vous rendez un élément modifiable, tous ses enfants, et pas seulement les éléments immédiats, le deviendront également, à moins que vous ne définissiez explicitement leur élément. contentEditable attribuer à faux. 

Vous pouvez modifier ces valeurs de manière dynamique avec JavaScript. Si la nouvelle valeur ne correspond à aucune des trois valeurs valides, une exception SyntaxError est renvoyée..

Création de l'éditeur

Pour créer l’éditeur en ligne, vous devez avoir la possibilité de modifier la valeur de contentEditable attribuer chaque fois qu'un utilisateur décide de modifier quelque chose. 

En basculant le contentEditable attribut, il est nécessaire de connaître la valeur actuelle de l’attribut. Pour ce faire, vous pouvez utiliser le isContentEditable propriété. Si isContentEditable résultats vrai pour un élément, l'élément est actuellement éditable, sinon il ne l'est pas. Nous utiliserons cette propriété sous peu pour déterminer l’état des différents éléments de notre document..

La première étape de la construction de l'éditeur est la création d'un bouton permettant de basculer entre l'édition et certains éléments modifiables..

Editer le document 
 
Une belle rubrique.
 
Dernière édition par - Monty Shokeen
 
Certains contenus à corriger.
 

Chaque élément que nous souhaitons conserver modifiable doit avoir son propre Id. Cela sera utile lorsque nous aurons à enregistrer les modifications ou à les récupérer ultérieurement pour remplacer le texte contenu dans chaque élément..

Le code JavaScript suivant gère toutes les opérations d’édition et de sauvegarde..

var editBtn = document.getElementById ('editBtn'); var editables = document.querySelectorAll ('# title, #author, #content') editBtn.addEventListener ('click', function (e) if (! editables [0] .isContentEditable) editables [0] .contentEditable = ' true '; editables [1] .contentEditable =' true '; editables [2] .contentEditable =' true '; editBtn.innerHTML =' Enregistrer les modifications '; editBtn.style.backgroundColor =' # 6F9 '; else // Désactiver la modification des éditables [0] .contentEditable = 'false'; des éditables [1] .contentEditable = 'false'; des éditables [2] .contentEditable = 'false'; // Modifier le texte et la couleur des boutons editBtn.innerHTML = 'Activer la modification' ; editBtn.style.backgroundColor = '# F96'; // Sauvegarde les données dans localStorage pour (var i = 0; i < editables.length; i++)  localStorage.setItem(editables[i].getAttribute('id'), editables[i].innerHTML);   );

Nous utilisons querySelectorAll () pour stocker tous les éléments modifiables dans une variable. Cette méthode retourne un NodeList qui contient tous les éléments de notre document qui correspondent aux sélecteurs spécifiés. De cette façon, il est plus facile de suivre les éléments modifiables avec une variable. Par exemple, le titre de notre document peut être consulté en utilisant éditables [0], c'est ce que nous ferons ensuite.

Ensuite, nous ajoutons un écouteur d'événement à l'événement click de notre bouton. Chaque fois qu'un utilisateur clique sur le bouton Modifier le document, nous vérifions si le titre est modifiable. Si ce n’est pas éditable, on règle le contentEditable propriété sur chacun des éléments modifiables à vrai. De plus, le texte 'Editer le document' changements à 'Sauvegarder les modifications'. Une fois les modifications apportées, les utilisateurs peuvent cliquer sur le bouton 'Sauvegarder les modifications' bouton et les modifications apportées peuvent être enregistrées en permanence.

Si le titre est éditable, nous définissons le contentEditable propriété sur chacun des éléments modifiables à false. À ce stade, nous pouvons également enregistrer le contenu de notre document sur le serveur pour le récupérer ultérieurement ou pour synchroniser les modifications apportées à une copie existant ailleurs. Dans ce tutoriel, je vais tout sauvegarder stockage local au lieu. Lors de la sauvegarde de la valeur dans stockage local, J'utilise le Id de chaque élément pour m'assurer que je n'écrase rien. 

Voir ma démo de CodePen en direct.

Récupérer le contenu enregistré

Si vous modifiez l'un des éléments de la démo précédente et rechargez la page, vous remarquerez que les modifications que vous avez apportées ont disparu. En effet, aucun code n'est en place pour récupérer les données enregistrées. Une fois le contenu enregistré dans stockage local, nous devons le récupérer plus tard lorsqu'un utilisateur visite à nouveau la page Web.

if (typeof (Storage)! == "undefined") if (localStorage.getItem ('title')! == null) editables [0] .innerHTML = localStorage.getItem ('title');  if (localStorage.getItem ('author')! == null) editables [1] .innerHTML = localStorage.getItem ('author');  if (localStorage.getItem ('content')! == null) editables [2] .innerHTML = localStorage.getItem ('content'); 

Le code ci-dessus vérifie si le titre, l'auteur ou le contenu existe déjà dans stockage local. S'ils le font, nous définissons la innerHTML des éléments respectifs aux valeurs récupérées.

Voir une autre démo de CodePen. 

Rendre l'éditeur plus convivial

Pour améliorer notre éditeur en ligne, nous devons apporter deux modifications. La première consiste à établir une distinction claire entre ce qui est modifiable et ce qui ne l’est pas. Cela peut être réalisé en modifiant l'apparence des éléments modifiables avec CSS. Changer la police et la couleur des éléments concernés devrait faire l'affaire. le [contenteditable = "true"] sélecteur appliquera le style suivant aux éléments chaque fois que le contenteditable attribut est mis à vrai.

[contenteditable = "true"] font-family: "Rajdhani"; couleur: # C00; 

La deuxième amélioration serait la possibilité de sauvegarder automatiquement les données. Vous pouvez le faire de plusieurs façons, comme la sauvegarde automatique toutes les cinq secondes.. 

setInterval (function () for (var i = 0; i < editables.length; i++)  localStorage.setItem(editables[i].getAttribute('id'), editables[i].innerHTML);  , 5000);

Vous pouvez également enregistrer les modifications sur chaque touche Bas un événement.

document.addEventListener ('keydown', fonction (e) pour (var i = 0; i < editables.length; i++)  localStorage.setItem(editables[i].getAttribute('id'), editables[i].innerHTML);  );

Dans ce tutoriel, je m'en tiens à l'ancienne méthode. Vous êtes libre de déclencher l'enregistrement automatique en fonction de tout événement qui semble plus approprié dans vos projets..

Voir la démo CodePen.

Modification de la page entière en mode Création

contentEditable est utile lorsque vous devez modifier quelques éléments sur une page Web. Lorsque le contenu de tous ou presque tous les éléments d’une page Web doit être modifié, vous pouvez utiliser designMode propriété. Cette propriété est applicable à l'ensemble du document. Pour le tourner sur et de, tu utilises document.designMode = 'on'; et document.designMode = 'off'; respectivement.

Cela s'avérera utile dans les situations où vous êtes le concepteur et quelqu'un d'autre est le créateur du contenu. Vous leur fournissez un dessin et du texte factice. Plus tard, ils peuvent le remplacer par un contenu réel. À voir designMode en action, ouvrez l'onglet Console dans les outils de développement de votre navigateur. Type document.designMode = 'on'; dans la console et appuyez sur Entrer. Tout sur cette page devrait être éditable maintenant.

Dernières pensées

le contentEditable Cet attribut est pratique dans des situations telles que l'édition rapide d'articles ou la possibilité pour les utilisateurs de modifier leurs commentaires en un seul clic. Cette fonctionnalité a été implémentée pour la première fois par IE 5.5. Plus tard, il a été normalisé par le WHATWG. Le support du navigateur est également très bon. Tous les principaux navigateurs, à part Opera Mini, prennent en charge cet attribut..  

JavaScript est devenu l'un des langages de facto du travail sur le Web. Ce n'est pas sans apprendre les courbes, et il y a beaucoup de cadres et de bibliothèques pour vous tenir occupé, aussi. Si vous recherchez des ressources supplémentaires à étudier ou à utiliser dans votre travail, consultez ce que nous avons à votre disposition sur le marché Envato..

Ce tutoriel couvrait les bases du contentEditable attribut et comment il peut être utilisé pour créer un éditeur de texte en ligne de base. Le prochain tutoriel vous apprendra comment mettre en œuvre une barre d'outils et fournira des capacités d'édition de texte enrichi..