Editer sur place

Bonjour à tous
Je cherche à savoir s'il existe un moyen de faire de l'édition "sur place".
Ce que je veux dire par là:
J'ai une balise, <span>ceci est un texte</span>
Ce que j'aimerais c'est que lorsqu'on sélectionne à la souris tout ou partie du texte contenu dans la balise on puisse facilement le modifier.
Pour l'instant je fais "onclick" qui affiche un <input type="text"> en position absolute à côté de la balise <span>, initialisé au contenu de cette balise, l'utilisateur peut modifier le contenu et le valider, et ça change l'affichage.
Connaitriez vous une façon plus souple (pour l'utilisateur) d'effectuer la même opération?
Merci de vos conseils

Oui, mais pour modifier une page en front une fois l'utilisateur connecté ce doit être plutôt sympa (pour la correction orthographique et les erreurs de syntaxe notamment).

D'autant plus que ça permet d'éditer des contenus plus complexes:

http://codepen.io/anon/pen/rWREMK

Après il faudra tout de même du javascript si on veut persister la modification (en localStorage, sessionStorage ou sur serveur avec de l'ajax)

p.s @papy, merci et bonne fin d'année à toi
Modifié par kustolovic (21 Dec 2016 - 16:39)

Sur un WordPress ça doit être sympa. Mais côté front il faudrait appeler tout l'environnement permettant d'enregistrer le contenu en php (jeton de sécurité, etc...), du boulot en perspective, surtout que le CMS en question se propose d'ajouter cette fonctionnalité un de ces 4...

Me voici de retour et j'ai fait un premier test.
Le contenu de la balise est effectivement modifié, mais ce que je ne vois pas c'est comment savoir si quelque chose a été ou non modifié.

<nav id="pagination_fr" class="pagination" contenteditable="true">
    <ul>
        <li id="pagination_fr_1" onblur="pgnChange(this)">Le dieu Osiris</li>
        <li id="pagination_fr_2" onblur="pgnChange(this)">Les fêtes d'Osiris</li>
        <li id="pagination_fr_3" onblur="pgnChange(this)">Les deux morts d'Osiris</li>
        <li id="pagination_fr_4" onblur="pgnChange(this)">Quand Osiris régnait sur terre</li>
    </ul>
</nav>

Le texte de la première entrée de la liste était simplement "Osiris", j'ai pu le modifier en "Le dieu Osiris" sans problème, mais ni "onchange" ni "onblur" ne semblent pas se déclencher quand je sors de la balise..
Quelle est la techno à utiliser?
Modifié par PapyJP (21 Dec 2016 - 18:39)

Le focus et le blur ne s'appliquent que sur l'élément en contenteditable. De plus dans ton exemple il est possible de supprimer des li ou d'en ajouter…

ça devrait fonctionner ainsi:

<nav id="pagination_fr" class="pagination">
    <ul>
        <li id="pagination_fr_1" onblur="pgnChange(this)" contenteditable="true">Le dieu Osiris</li>
        <li id="pagination_fr_2" onblur="pgnChange(this)" contenteditable="true">Les fêtes d'Osiris</li>
        <li id="pagination_fr_3" onblur="pgnChange(this)" contenteditable="true">Les deux morts d'Osiris</li>
        <li id="pagination_fr_4" onblur="pgnChange(this)" contenteditable="true">Quand Osiris régnait sur terre</li>
    </ul>
</nav>

Par contre je dois avertir d'un inconvénient possible: contenteditable permet les balises et autre, si on copie/colle depuis une page web ou un document Word on risque d'embarquer la mise en forme et les balises. Si c'est pour des utilisateurs averti et connus ce n'est pas grave, par contre si c'est à destination du grand public il faudrait nettoyer le presse-papier au collage.

Bonjour,

oui 2 remarques qui vont en ce sens:
- les navigateurs font chacun à leur sauce (je ne me suis pas renseigné sur l'état de l'art depuis qu'HTML5 est apparu mais c'était pas joyeux...)
- attention quand 2 éditeurs modifient en même temps (et que les modifications sont répercutées via le serveur à tous les visiteurs et éditeurs) : le premier va perdre ses modifications, le second ne pas savoir qu'un autre avait déjà commencé... Il faut dans ce cas ajouter un système similaire à Wikipédia d'alerte / info ou de blocage