Quelques pas avec contenteditable

C’était un peu long à écrire la note précédente, et à la rédaction il y a eu quand même quelques moments de frustrations avec CKEditor, la solution de facilité mise en place pour avoir une édition « texte riche ».

À bouquiner sans rapport un peu après, dans un moment de pause, j’y ai repensé et je me suis dit qu’il y avait sans doute un truc à faire; résultat j’ai sorti de ma mémoire l’existence de l’attribut contenteditable et à lire cette page je me suis dit que ce n’était pas bien compliqué qu’au moins le travail de relecture et petites corrections pourrait être aidé à pouvoir directement faire les modifications, sans basculer en mode édition. (aussi, que je devrais noter un jour à quel point MDN est important et utile)

Rapidement ainsi, en place, un peu côté serveur pour avoir une API acceptant le nouveau contenu, et côté client, ajouter contenteditable="true" à l’attribut principal du contenu, un bouton, et un POST vers le serveur en javascript,

  $('#save').on('click', function() {
    var text = $('div[contenteditable]')[0].innerHTML;
    $.post(
      'api-save/',
      {text: text}
    ).fail(function() {
      $('#save').css('background', 'red');
    });
    return false;
  });

et c’est gagné. (extrait de code copié ici uniquement pour laisser admirer la gestion d’erreur).

Après ça se met à trotter tout seul : ce serait quand même pratique de pouvoir taper un titre, puis à la faveur de nouvelles pauses, de mettre en gras/italique/etc., puis de quand même activer une protection CSRF, puis d’ajouter des liens, puis des sections de code.

Au final, un petit mix javascript/jquery, avec des appels à document.execCommand même si c’est marqué obsolète (il manque malheureusement à la page des recommandations sur quoi utiliser en remplacement), et fonctionnellement tout ce qu’il me faut (sauf parfois le téléchargement d’images, ce sera pour une autre fois).

Au final surtout, un bien plus grand confort d’édition et l’idée du coup, quand les contraintes le permettent (fonctionnalités légères, pas à se soucier de compatibilité, ou de grande accessibilité), que faire ainsi un travail sur mesure est tout à fait raisonnable. (et déjà j’imagine des endroits).