Nous sommes fiers aujourd’hui de vous annoncer la sortie de notre tout nouvel éditeur de contenu ! Comme celui intégré sur notre plateforme depuis ses débuts, cet éditeur de contenu est également appelé – pour les fins connaisseurs -, WYSIWYG (What You See Is What You Get ou, en français, “ce que vous voyez est ce que vous obtenez”). Cet outil vous permet d’éditer et de personnaliser votre texte directement, par exemple en y ajoutant des images, liens ou documents, et bien plus, selon les fonctionnalités.

C’est une petite révolution qui est en cours chez Cap Collectif, et qui s’inscrit dans la tendance actuelle d’amélioration et de simplification du back office. L’objectif ? Une utilisation toujours plus simple et intuitive de la plateforme et de son administration, pour améliorer la vie des administrateurs. 

De CKEditor à DRAFT, petite histoire du WYSIWYG chez Cap Collectif

C’est connu dans le monde du développement Web : les éditeurs de contenu sont des sujets complexes. La promesse “ce que vous voyez est ce que vous obtenez” n’est pas la plus facile à exaucer. 

Chez Cap Collectif, nous avons démarré en 2014 avec CKEditor, qui permet d’ajouter du contenu enrichi. Celui-ci, très fonctionnel, permettait de basculer en mode HTML facilement. Mais ses fonctionnalités et sa mise en forme commençaient à être datées.

Côté utilisateurs (et donc front office), nous avons choisi un éditeur de texte plus épuré,  car destiné à un public différent des administrateurs. Cette option, Quill, offre toutes les fonctionnalités basiques, comme l’illustre la capture d’écran ci-dessous. L’éditeur est notamment utilisé lors du dépôt d’une proposition, ou de certaines réponses au questionnaire dans notre plateforme.  

En 2020, nous avons décidé de refondre progressivement l’administration, dans l’objectif de rendre l’utilisation et le paramétrage de la plateforme plus simples à tous les niveaux. La question de l’éditeur de texte choisi était donc centrale : celui-ci est une des fonctionnalités les plus utilisées par les administrateurs des plateformes, il nous fallait donc un éditeur esthétique, moderne, et offrant davantage de libertés dans la personnalisation des contenus. 

Pour répondre à ces enjeux, nous avons donc décidé de créer notre propre éditeur de texte. Pour cela, nous avons utilisé un socle – la technologie DRAFT.js, développée par Facebook -, auquel nous avons ajouté nos propres fonctionnalités. 

Que pouvez-vous attendre de ce WYSIWYG de pointe ?

En plus de son esthétique, qui en fait un outil visuel et agréable à utiliser, ce nouvel éditeur vous permettra à la fois d’améliorer le confort dans la réalisation de vos tâches, ainsi que la mise en forme sur votre plateforme. 

→ Amélioration du confort dans la réalisation des tâches :

  • Les raccourcis claviers seront gérés, pour une utilisation plus rapide (exemple : Ctrl Z pour annuler ou Ctrl Y pour revenir en arrière) ;
  • Le mode full-screen vous permettra de travailler sur une page entière ; 
  • Une performance maximale pour éviter la latence à chaque frappe ; 
  • Les images pourront être uploadées directement depuis votre ordinateur, ou depuis une URL ; 
  • Les champs à configurer pour l’intégration d’éléments autres que du texte seront bien plus simples et réduits ; 

→ Amélioration de la mise en forme sur la plateforme :

  • Les images sont chargées, par défaut en responsive (c’est-à-dire qu’elles s’adaptent à la taille de l’écran sur lequel la plateforme est consultée) ; 
  • L’éditeur vous rappellera d’ajouter les textes de remplacement sur vos images, afin de garantir une plateforme accessible à tous ;
  • Les vidéos seront intégrées directement dans des iframes sans besoin de configurer l’iframe via du code HTML.

Plus besoin, donc, d’utiliser d’ajouter de code HTML pour pousser plus loin la personnalisation de vos contenus : tout a été pensé pour une utilisation extensive et adaptée à vos besoins. Néanmoins, les développeurs et autres férus du Web auront toujours la possibilité de passer en vue HTML, dont le format sera celui d’un éditeur de code (coloration syntaxique, vérification automatique du code pour éviter les erreurs, etc.) : ne vous y essayez pas si vous n’êtes pas compétents, vous risqueriez de ne plus pouvoir revenir en arrière ! 

Manuel d’usage et de mise en place de votre WYSIWYG flambant neuf 

Afin d’implémenter l’éditeur de texte petit à petit, nous lançons d’abord une version bêta. Vous pouvez dès à présent activer votre nouvel éditeur de texte et le tester. Celui-ci se trouvera dans un premier temps dans certaines parties du back office : champs du formulaire et du questionnaire, ainsi que formulaire de contact. Il sera petit à petit déployé sur l’ensemble du back office et à l’ensemble des plateformes. 

Pour l’activer, il vous suffit de faire la demande à notre équipe assistance en envoyant un email à l’adresse [email protected]. N’hésitez pas à nous transmettre vos retours ! 

Un petit pas pour le back office… mais un grand pas pour les administrateurs !

Cette amélioration s’inscrit dans un objectif au coeur de notre feuille de route à venir : la refonte progressive de l’administration de la plateforme, vers une utilisation simplifiée et améliorée dans toutes les tâches quotidiennes des administrateurs. D’autres améliorations des tâches de l’administrateur seront donc à venir au cours de l’année 2020… À bientôt !