Les crayons

Un plugin pour une édition directe sur le site public

Publié le : 23 avril 2008 – Dernière modification le 22 janvier 2024 – par Fil, toggg – 861 commentaires

English, Español, français, Português do Brasil
1
2
3
4
5
198 votes
Ce plugin permet d’éditer les contenus sur les pages publiques du site, sans passer par l’espace privé de SPIP.

Le paramétrage côté squelettes est des plus simples : il repose sur la classe #EDIT{...} adjointe aux éléments qu’on veut rendre modifiables.

Résumé

Après l’activation du plugin, les contenus peuvent être directement édités « en place » sur les pages publiques du site, par les personnes autorisées.

Cela demande de préparer vos squelettes pour les rendre compatibles avec ce plugin (à noter : c’est le cas de la plupart des squelettes distribués sur SPIP-Contrib). Le principe est simple : un bloc est éditable s’il contient la classe crayon objet-champ-id. Une balise #EDIT{} facilite encore l’écriture. En fait, pour permettre d’éditer le titre d’un article, il suffit de remplacer dans le squelette de la page article.html, la ligne (par exemple) :

<h1>#TITRE</h1>

par :

<h1 class="crayon article-titre-#ID_ARTICLE">#TITRE</h1>

ou encore, plus simplement :

<h1 class="#EDIT{titre}">#TITRE</h1>

Autre exemple, pour rendre « crayonnable » le texte d’un article, transformer :

[<div class="texte">(#TEXTE|image_reduire{520,0})</div>]

en :

[<div class="#EDIT{texte} texte">(#TEXTE|image_reduire{520,0})</div>]

Les pages concernées doivent obligatoirement comporter une balise </head>, écrit précisément de cette façon (lettres minuscules).

Fonctionnement

Fabrication de la page côté serveur

Lors du chargement d’une page, le plugin agit dans le pipeline affichage_final.

Il vérifie alors :

  • si l’utilisateur est identifié
  • si la page contient au moins une chaîne de caractères “crayon xxxx­-yyyy-nn”,
  • et si l’utilisateur possède des droits sur au moins un des éléments ainsi marqués

Le cas échéant, il insère dans le <head> de la page le script externe crayons.js ainsi que des données de configuration ; le script s’exécute à la fin du chargement de la page, et vérifie à intervalles réguliers si de nouveaux crayons sont disponibles, de façon à les activer en cas de besoin.

Chargement par le navigateur

Lorsque la page finit de se charger (et si le visiteur a des droits d’édition sur les crayons présents dans la page), le script crayons.js sélectionne tous les éléments possédant la classe crayon type­-champ-id, et si ils sont autorisés pour l’utilisateur inscrit, leur adjoint une image clicable (un crayon) et leur ajoute la classe crayon-autorise pour indiquer qu’ils sont « éditables ».

Un clic sur cette image, mais aussi un double-clic sur l’élément lui-même, provoquent l’activation du formulaire d’édition.

Activation du crayon

Un click sur le « crayon » (ou un double-clic sur l’élément) déclenche une requête vers le serveur, qui renvoie le formulaire de modification qui va « remplacer » l’élément affiché.

La requête spécifie au serveur le « type », le « champ » et l’« id » pour lesquels le formulaire est demandé.

Après vérification de l’existence des données et des droits sur celles-ci, le serveur renvoie le formulaire (sous forme de données javascript, au format JSON). Le type et les dimensions du champs sont déterminés d’après sa nature et la place réservée à l’élément. Il contient le source brut du texte, comme lorsque on édite depuis l’espace privé ; la police, la taille et la couleur des caractères sont préservées.

crayon.js associe ce formulaire à l’élément puis "cache" ce dernier.

L’utilisateur peut maintenant modifier les données.

Attention : l’affichage final ne peut être réalisé que par le serveur, un click en dehors de la zone d’entrée après des modifications affichera à nouveau le contenu originel.
Dans ce cas, une roue dentée vous signale que vous avez introduit une modification. Click sur le bouton ou double-click sur l’élément vous y ramène, elles ne sont pas perdues.
Si vous abandonnez cependant la page, un dernier rappel vous propose de sauvegarder.

Sauvegarde

Le formulaire possède une série de boutons/touches associées :

  • OK (ainsi que la touche Entrée [1]) permet de sauvegarder,
  • Annuler (ainsi que la touche Escape) abandonne toute mise à jour,
  • Un clic en dehors des zones de saisie cache ces zones et revient à l’affichage initial.

Il contient aussi des identificateurs et des clés associés aux données.

Le formulaire est soumis en POST par ajaxForm donc asynchrone. Sur réception, le serveur :

  • analyse les données soumises, leur cohérence et leur actualité (afin d’annuler l’envoi si les données ont été entre-temps modifiées par ailleurs).
  • vérifie une nouvelle fois les droits d’édition.
  • appelle les procédures internes de SPIP pour mettre à jour les données.
  • renvoie une vue des données modifiées, et déclenche les comportements javascript précisés par la fonction onAjaxLoad de SPIP.

Le système alimente notamment l’historique des modifications, de la même façon que l’espace privé.

Configuration

Le plugin propose plusieurs options, activables via le plugin CFG ; notamment :
-  un message si on confirme OK mais que rien n’est changé ;
-  une alerte permettant de sauvegarder les modifications si on abandonne la page alors qu’un texte est en cours d’édition ;
-  l’activation de la barre typographique ;
-  des couleurs permettant de mieux repérer les zones modifiables.

À noter : si le plugin est absent ou désactivé, la balise #EDIT{...} renvoie une chaîne vide ; cela permet donc de « crayonner » des squelettes même si l’on décide finalement de ne pas utiliser le plugin

Utilisation étendue

Toutes les tables standard de SPIP (articles, brèves, rubriques, etc.) sont gérées, y compris les forums et les signatures de pétition (mais, pour ces deux dernières, il faut utiliser le plugin Autorité pour permettre des modifications) ; pour chacune de ces tables, tous les champs de type « ligne » (titre, soustitre etc), ou « texte » (texte, chapo, descriptif...) sont crayonnables.

On peut également éditer les logos avec le crayon #EDIT{logo} ; un réglage permet de redimensionner ces logos à la volée lors de l’upload.

Les documents sont modifiables avec le crayon #EDIT{fichier} : le nouveau document vient remplacer l’ancien et sa taille, hauteur et largeur sont mises à jour. (NB : pas encore compatible documents distants).

Enfin, à partir de spip 2, on peut éditer les champs extra.

À noter :

  • Les crayons fonctionnent avec n’importe quelle table — à condition que cette table possède une clé primaire (numérique) qui s’appelle id_xxx, où le nom de la table est spip_xxxs.
  • pour la table spip_meta qui ne propose pas ce type d’index numérique, il faut utiliser la balise #EDIT d’une manière un peu différente en préfixant le champs à éditer par meta-, par exemple [2] : 
    #EDIT{meta-descriptif_site}
  • pour éditer une valeur de configuration de plugin, on utilise la même syntaxe en ajoutant « meta » ; Par exemple pour éditer un champs de configuration adresse pour un plugin dont le préfixe est croque : 
    [<div class="inner #EDIT{meta-croque/adresse}">(#CONFIG{croque/adresse})</div>]
  • Si un texte « crayonnable » est un champ MySQL MEDIUMTEXT ou plus long, les crayons affichent un TEXTAREA, et sinon, un INPUT.
  • Seuls les admins complets peuvent ainsi crayonner des textes provenant d’une table non-SPIP.

Editions simultanées de plusieurs champs

L’obtention du formulaire d’édition (« contrôleurs ») ainsi que la vue obtenue en retour sont surchargeables, par de simples squelettes (voir les exemples dans les répertoires controleurs/ et vues/ du plugin).

Ces formulaires peuvent travailler en parallèle sur plusieurs champs d’un enregistrement (article), voire plusieurs enregistrements d’une même table ou de tables différentes [3] : il y a là de quoi faire des interfaces d’édition spécialisées et très efficaces.

Comme toujours, contributrices et contributeurs sont bienvenus !

Notes

[1] Ainsi que, sur Mac, la touche ctrl-S, et sur PC les touches alt-S ou F8, ou encore la combinaison MAJ-entrée.

[2] Ceci est valable depuis la version 1.6.1 du plugin. Pour les versions précédentes la syntaxe est différente. Il faut insérer manuellement la class dans le code suivant la syntaxe meta-valeur-XXX où XXX représente le nom de la propriété à modifier. Par exemple pour modifier le nom du site (propriété : nom_site) on pourrait faire :

<h1 class="crayon meta-valeur-nom_site">#NOM_SITE_SPIP</h1>

[3] Par exemple pour ouvrir en édition l’ensemble des champs descriptifs d’une adresse postale.

Debug : Les crayons ont un mode de débug activable en mettant dans mes_options.php la ligne suivante :

define('_DEBUG_CRAYONS', true);

Ce code ralentit un peu le fonctionnement, puisque le script est rechargé à chaque fois, mais facilite le repérage de bugs et le développement de nouvelles fonctionnalités.

Voir aussi : Doc complémentaire

Discussion

5 ans 1 an 3 mois Sans limite
par date
Filtrer

303 discussions

  • 1
    Maïeul

    Salut,

    avec la version 1.9.8 des crayons, et SPIP 2.1.10, j’essaie d’activer les crayons sur le champ slogan_site, proposé par le bandeau.

    Je met donc

    #EDIT{meta-slogan_site}

    mais rien n’y fait, j’ai n’ai pas de crayons (alors que cela marche nickel pour le contenu).

    Une idée ?

    merci

    • Fil

      il faut aussi bidouiller les autorisations ; a mon sens ca reste un truc a developper proprement dans les crayons, car la ca fonctionne a la rache

    Répondre à ce message

  • popojcb

    Crayon et Champs extras !

    Bonjour à tous,
    Une petite question, sous spip2.1, j’affiche mes champs extras et peut sélectionner les champs extras par le crayons. MAIS à l’édition, le champs de saisie et ne s’affichent pas seul les boutons de validations, voir images jointes.
    J’ai fouillé trois heures, mais la réalité est là : sortie de spip et du css je ne rame !!!
    Une idée ? Une piste ?

    Merci d’avance ;)

    ma boucle :

    <div class="surlignable">
[(#LOGO_ARTICLE|image_reduire{200,200})]
[<p class="#EDIT{surtitre} surtitre">(#SURTITRE)</p>]
<h1 class="#EDIT{titre} entry-title">#TITRE</h1>
[<p class="#EDIT{soustitre} soustitre">(#SOUSTITRE)</p>]
[(#LISTER_VALEURS{technique})] - [<p class="#EDIT{meta-technique} technique">(#TECHNIQUE|filtrer_entites|inserer_attribut{'alt',#TECHNIQUE})</p>]
[<div class="#EDIT{meta-technique} soustitre">(#LISTER_VALEURS{technique})</div>]
</div>

    Répondre à ce message

  • 1
    mrstern

    Bonjour,
    je viens de mettre la dernière version de crayons sur mon spip 2.0.
    Problème : lorsque je change la configuration dans cfg (par exemple : je coche « barre typo dans les crayons ») et que j’enregistre, il m’indique bien « config info enregistrée » mais il n’en est rien. Tout revient décoché. Je n’avais pas ce pb avec mon ancienne version du plugin.
    Une idée ?
    mrstern

    Répondre à ce message

  • Novispip

    Une question sur les crayons et les champs extra de type liste-enum

    Lorsque l’on souhaite éditer un champ extra de type liste, les crayons nous affichent un input texte avec le chiffre correspondant à la #CLE du champ extra voulu.

    Ma question est :
    -  quel fichier modifier pour fixer une condition sur le TYPE du champ extra en cours de modification ?
    -  cette condition affichera :
    soit un input classique
    soit un select rempli des valeurs de la liste du champ extra.

    Je vous donnerai mon code avec grand plaisir, mais avant ça il faut que je sache exactement où gratter ;)

    Merci pour le coup de main !

    Répondre à ce message

  • 7
    Novispip

    Bonjour,
    j’ai un souci en utilisant les crayons :

    Voici mon code :

    [

    <div class="comment-texte #EDIT{texte}">(#TEXTE|lignes_longues)</div>]

    Lorsque je survole le texte, le crayon ne s’affiche pas..

    Ais-je zappé des étapes ?

    Merci pour l’aide ;)

    • Novispip

      j’ai installé le plugin et ajouté ce code dans ma page.

      Ais-je raté des étapes de la mise en place des crayons ?

    • Novispip

      Voilà le problème :

      dans gestion des plugins -> porte plume je peux lire :

      « Un autre plugin interdit l’usage du porte-plume dans l’espace public. »

      Comment faire pour trouver celui qui bloque le porte plume ?

    • Novispip

      en réalité non, le porte plume est le porte plume, il faut l’activer dans les options avancées, mais le plugin crayons ne marche toujours pas avec ce code :

      <div class="comment-texte #EDIT{texte}">(#TEXTE|lignes_longues)</div>]

      Help !

    • Novispip

      Je réitère ma question de manière claire :

      j’utilise ce code dans un commentaire de forum d’article :

      [<div class=" #EDIT{texte} comment-texte">(#TEXTE|lignes_longues)</div>]

      lorsque ma page se charge, j’obtiens :

      <div class="comment-texte crayon forum-texte-71"><p>coucou!</p></div>

      Quand je survole ce texte le crayon ne s’affiche pas...La balise marche, mais pas l’outil... bizarre... pourquoi ça ne marche pas ?

    • Novispip

      je tiens à préciser que je suis administrateur et que je viens d’ajouter le commentaire

    • Fil

      Ah tu fais bien de préciser qu’il s’agit des commentaires… car par défaut personne n’est autorisé à modifier un commentaire posté. Le plugin Autorité te permet de modifier ce comportement : http://www.spip-contrib.net/Le-plugin-Autorite

    • Novispip

      Merci beaucoup Fil !

    Répondre à ce message

  • Paladin

    Objectif : accéder en mode édition à un article via les crayons, en espace public, via Jaws (revue d’écran, donc principalement pour aveugles et malvoyants profonds).
    Problématique : impossible de double-cliquer sur le texte avec Jaws. Nous avons trouvé une démarche pour passer en mode édition via 12 étapes. Sportif !

    Y’at-il possibilité de rajouter une commande clavier dans les évènements JavaScript des crayons (par exemple, ’ctrl maj e’ pour IE), ou de transformer le crayon qui apparaît en vrai lien ’<a ’. A l’heure actuelle, c’est un ’em’, et il est impossible d’y accéder via Jaws. En le transformant en lien, on peut l’afficher dans la liste des liens (insert f7).

    Si quelqu’un a déjà fait le tour du sujet ? Ou trouvé une démarche plus simple ?

    Merci.

    Répondre à ce message

  • Les Sab

    Bonjour,

    j’ai désactivé le plugin crayon car je ne souhaite plus l’utiliser. J’ai modifié le squelette Article pour que le crayon ne soit plus actif sur cette page. Par contre, lorsqu’un auteur veut travailler sur un article en cours de rédaction dans l’espace privé, l’article ne s’affiche pas et le message d’erreur suivant apparaît :
    Fatal error : Call to undefined function classe_boucle_crayon() in /home/www/client/XXXX/www/ecrire/public/composer.php(49) : eval()’d code on line 68

    Quelle ligne de quel fichier dois-je modifier pour corriger cette erreur ?
    Est-ce que le code du fichier composer ?

    Merci pour votre aide,

    Les Sab

    Répondre à ce message

  • 2
    Pascual

    Bonjour,

    une petite question pratique : dans un site n’utilisant pratiquement que des champs EXTRAS, comment me serait-il possible de donner le droit d’utiliser le crayonnage en partie privé EN PLUS à l’AUTEUR de l’article (et pas qu’aux Webmestres) ?

    Je viens de lire qu’il n’y a que les WEBMESTRES qui le pouvaient... et là, c’est l’horreur !

    En vous remerciant d’avance pour m’indiquer une piste à suive (à mon humble niveau de non-programmeur) ;)

    Répondre à ce message

  • 4
    Sarah

    J’aimerai avoir un affichage conditionnel suivant la valeur d’un champ éditable avec crayon.

    Si dans le champ 1, j’ai A, j’affiche B, et si j’ai C, j’affiche D.

    Le problème est que comme seul le champ édité est rechargé, la boucle CONDITION n’est pas vérifiée. Comment je peux forcer la page à se recharger ?

    Une autre solution que j’ai essayé : mettre la suite dans le fichier correspondant du répertoire « vues » ; ça ne s’affiche que quand la vue est renvoyée. Le problème est que je ne peux pas éditer les champs suivants, c’est comme s’il faisaient partie du même champ.

    Le code que j’utilise (ce sera peut-être plus clair) :

    	<b>Statut : </b><br />
	<div class="#EDIT{statut_diplome} statut_diplome">[(#STATUT_DIPLOME|=={''}|?{'Sélectionnez votre situation',#STATUT_DIPLOME})]</div><br />

	
	<BOUCLE_etud_formation(CONDITION){si #STATUT_DIPLOME|=={'Étudiant/e - Préparation de diplôme'}}>
		<b>Niveau du diplôme préparé : </b><br />
	</BOUCLE_etud_formation>
		<b>Niveau de formation : </b><br />
	<//B_etud_formation>

	<div class="#EDIT{niveau_formation} niveau_formation">[(#NIVEAU_FORMATION|=={''}|?{'Choisissez un niveau de formation',#NIVEAU_FORMATION})]</div><br />
    • Fil

      Je pense que tu peux y arriver en ajoutant une class (conditionnelle) juste après #EDIT{...} ; cette class sera transportée dans les #ENV du contrôleur puis dans la vue, charge à toi de la lire dans ce #ENV et de modifier ton affichage en conséquence.

    • Sarah

      je comprend pas trop la réponse.

      Qu’est-ce que tu appelles une classe conditionnelle ?

      Le problème est que justement je n’entre pas dans le contrôleur des champs suivants, champ que je dois afficher seulement si une des options est choisie.

      Dans le code que j’ai donné, c’est vrai que je pourrai mettre le texte qui suit dans la vue, mais le problème est que le code continue (c’était pas très clair), et que je dois de nouveau utiliser cette condition :

      	<BOUCLE_etud_formation(CONDITION){si #STATUT_DIPLOME|=={'Etudiant'}}>
		<b>Niveau du diplôme préparé : </b><br />
	</BOUCLE_etud_formation>
		<b>Niveau de formation : </b><br />
	<//B_etud_formation>

	<div class="#EDIT{niveau_formation} niveau_formation">[(#NIVEAU_FORMATION|=={''}|?{'Choisissez un niveau de formation',#NIVEAU_FORMATION})]</div><br />

	<BOUCLE_etud_domaine(CONDITION){si #STATUT_DIPLOME|=={'Etudiant'}}>
		<b>Domaine d'activité envisagé : </b><br />
	</BOUCLE_etud_domaine>
		<b>Domaine d'activité occupé : </b><br />
	<//B_etud_domaine>

	<div class="#EDIT{domaine_activite} domaine_activite">[(#DOMAINE_ACTIVITE|=={''}|?{'Choississez un domaine activité',#DOMAINE_ACTIVITE})]</div><br />

	<BOUCLE_etud_entretien(CONDITION){si #STATUT_DIPLOME|=={'Etudiant'}}>
	</BOUCLE_etud_entretien>
	<b>J'accepte de faire un entretien (1 heure) : </b><br />
	<div class="#EDIT{entretien_metier} entretien_metier">[(#ENTRETIEN_METIER|=={''}|?{'Choisissez une réponse',#ENTRETIEN_METIER})]</div>
	<//B_etud_entretien>

      À part recharger la page, je vois pas trop comment faire...

    • Sarah

      c’est bon, j’ai résolu le problème, merci

      J’ai utilisé une variable, et j’ai mis la suite du code dans le fichier de vue.
      J’ai également du écrire littéralement l’intitulé de la classe, et non utiliser #EDIT

    • Rainer Müller

      Avec internet-explorer 8 le contenu modifié n’est pas actualisé, quand on click sur ok, le fond gris se maintien et le contenu n’est pas rafraichis. Quelq’un à un remède

    Répondre à ce message

  • 1
    Didier

    Bonjour,
    Dans un formulaire j’ai un champ de type select, donc avec un choix restreint de valeurs.

    Avec Les Crayons, la modification se fait en champ texte librement modifiable. Donc au moment de la saisie, pas de contrôle sur la valeur de la saisie.
    Ensuite cela est contrôlé au niveau de la basse de donnée, mais l’utilisateur qui a fait la saisie n’est bien sûr pas avertie si sa saisie est correcte ou non.

    Donc je cherche un controleur de type select qui fonctionne avec le plugin Crayons.

    Didier

    • Didier

      Je me réponds, avec la réponse.
      L’affichage des controleurs crayons se gérent dans le repertoire « controleurs » du plugin
      Dans mon cas, je dois afficher un champ, d’une table SQL personnalisée, qui s’appelle « type_evt »
      D’abord créer le fichier type_evt.html dans le repertoire « controleurs »
      Puis voila contenu de mon fichier, afin d’afficher un select à travers le plugin crayons :

      <BOUCLE_a_type_evt(EVENEMENT){id_evenement=#ENV{id_evenement}}>
<select class="crayon-active" name="#ENV{name_type_evt}" style="width:200px;">
	<option value="rassemblement"[
		(#TYPE_EVT|=={rassemblement}?{selected})="selected"]>Rassemblement</option>
	<option value="visite"[
		(#TYPE_EVT|=={visite}?{selected})="selected"]>Visite ou porte ouverte</option>
</select>
</BOUCLE_a_type_evt>

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom