عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs On SPIP-Zone, 237 visitors now

Home > Tools for editing > Édition publique > Crayons > Crayons


A plugin to edit contents directly on the public site

3 May 2008 – by paolo – commentaires

All the versions of this article: [English] [Español] [français]

5 Votes

Configuring templates to use the plugin is very easy. It consists in adding the class #EDIT{...} to elements you wish to make editable.


Version 1.0 was published on 23 April 2008.


When the plugin is activated content can be eidted directly, “in situ” on the public pages of the site by those logged in with with the appropriate rights.

You need to adapt your templates to make them compatible with the plugin (Note: most of the templates available on spip-contrib are already compatible). The principle is simple: a field is editable if it contains the class crayon objet-champ-id. This class can be produced using the tag #EDIT{}. For example, in order to render the title of articles editable, you just need to replace the line

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

Another example: to use “Crayons” on the text field of articles, change:
[<div class="texte">(#TEXTE|image_reduire{520,0})</div>]

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

N.B. The pages in question must contain a </head> tag (written in small letters).



When a page is loaded, the plugin acts using the pipeline affichage_final.

It checks:

  • if the user is authorised;
  • if the page contains at least once a series of characters “crayon xxxx-yyyy-nn”;
  • and if the user has the permissions to edit at least one of the elements marked in this way.

If these conditions are satisfied, the plugin inserts the external script crayons.js in the <head> section of the page and also the configuration data. When the page is fully loaded the script executes, checking at regular intevals if new crayons have become available, in order to activate them if necessary.

Loading in the browser

When the page has finished loading (and if the visitor has editing permissions for the crayons present), the crayons.js script selects all the elements with the class crayon type-champ-id, and, for the ones for which the user is authorised, adds a clickable image (a pen) together with the class crayon-autorise to show that these texts are available for editing.

A click on the pen or a double-click on the element itself activates the editing form.

Activation of the crayon

A click on the “crayon” (or a double-click on the element) triggers a request to the server to send the editing form to replace the displayed element.

The request specifies the “type”, le “champ” (field) and the “id” for which the form has been requested.

Having checked that data exists and the permissions on it, the server sends the form (as JSON-format Javascript data). The type of form used and its dimensions are determined by the kind of element concerned and the space it occupies. The form contains the raw text of the field, as it was entered in the admin area, but the display size, font and colour of the characters are preserved.

crayon.js links this form to the underlying field and caches the contents of the latter.

The user can now edit the data.

N.B.: It is only the server which is able to display the final result. A click outside the editiing zone will once again show the original contents of the field.
When editing is interrupted in this way, a cogwheel alerts you that you have started changing the field. A click on the wheel or a double-click on the element takes you back to your changed version — the changes are not lost.
If you leave the page, a final reminder asks you if you wish to save your changes.

Saving the changes

The form has a series of buttons:

  • OK (as well as the Enter key [1]) saves the changes,
  • Annuler (as well as the Esc) abandons all changes made to the original text,
  • A click outside the editing zones places the changes in cache and returns to the original display.

The form also contains the id of the data and the keys linked to it.

The form is submitted by POST using ajaxForm asynchronously. When it receives it, the server:

  • analyses the data submitted, checking its consistency and its freshness (so as to annul it if the same data has been modified elsewhere in the meanytime);
  • re-checks the editing permissions;
  • calls the standard SPIP procedures to update the data.

Any updates are recorded in the version-tracking system in SPIP just as they would have been if they had been made in the admin area.


Several configuration options are available through the use of the CFG plugin. In particular:
-  if it is necessary to confirm “OK” when nothing has been changed;
-  whether to show a warning about saving the page if you try to navigate away from the page while a change has not yet been confirmed;
-  the activation of the typographical shortcut bar;
-  colours which make it easier to see which zones are editable.

N.B. If the plugin is not installed or deactivated, the #EDIT{...} tag returns an empty string. This means that templates can be made “crayons compatible” without risk, even if in the end you decide not to use the plugin.

Extended use

Crayons can be used with all SPIP’s standard tables (articles, brèves, rubriques, etc.). It is also possible to use crayons for forums et les signatures, but, for these last two, the plugin “Autorité” also needs to be installed to allow modifications.

For all the tables, fields of “line” type (title, subtitle, etc.) and of “text area” type (text, description, summary/deck) can be edited.

logos can also be edited by using the crayon #EDIT{logo}; a control is provided to resize logos on the fly, during upload.

documents can be edited using #EDIT{fichier}. In this case the new document replaces the old one and the filesize, as well as, in the case of graphics, the height and width are updated in the database (N.B. Not yet compatible with remote documents).

Finally, but only with recent SVN versions of SPIP, it is also possible to edit the champs extra.

-  Crayons can be used with any table, on the condition that it has a numeric primary key called id_xxx, where xxx is the name of the table.
-  If a “crayons” text is a MEDIUMTEXT or longer MySQL field, the plugin displays a TEXTAREA, in other cases it displays an INPUT field.
-  Only full administrators can use crayons on texts from non-SPIP tables.

To do

The editing form (« contrôleurs ») as well as the view obtained can be overridden using simple templates (see the examples in the plugin’s controleurs/ and vues/directories).

The forms can be used simultaneously to edit several fields of a record (article), or even several records from one or more tables: all the flexibility needed to build specialised and efficient editing interfaces.

As always, contributors are welcome!


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.


[1Or, on the Mac, pressing Ctrl-S, and on PCs Alt-S or F8.

updated on 11 April 2015

Back to top

Your comments

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Add a document

Back to top

Here they're talking

  • (fr) GIS 4

    11 août 2012 – 1265 commentaires

    Présentation et nouveautés La version 4 de GIS abandonne la libraire Mapstraction au profit de Leaflet. Cette librairie permet de s’affranchir des librairies propriétaires tout en gardant les mêmes fonctionnalités, elle propose même de nouvelles (...)

  • (fr) cirv : plugin « rédacteur valideur »

    29 octobre 2010 – 49 commentaires

    Le plugin « cirv : rédacteur valideur » offre la possibilité d’autoriser certains rédacteurs à publier leurs propres articles. Compatibilité Le plugin est compatible avec SPIP 2.0, SPIP 2.1 et SPIP 3.0. Il est compatible avec PHP 5 (y compris PHP (...)

  • (fr) Formidable, le générateur de formulaires

    23 janvier 2012 – 1987 commentaires

    Un générateur de formulaires facilement configurable pour les non-informaticiens et facilement extensible pour les développeurs. Introduction L’objectif était de créer un plugin permettant de générer des formulaires. Historiquement, 2 plugins (...)

  • (fr) Un retour d’expérience d’utilisation de Formidable

    26 octobre – commentaires

    Il s’agissait de créer un formulaire d’inscription à un évènement modérer les inscriptions dans le privé publier les inscriptions dans le public Nous avons discuté de cette présentation lors de l’apéro SPIP du 15 février 2016 à la Cantine (...)

  • (fr) Les crayons

    23 avril 2008 – 813 commentaires

    Ce plugin permet d’éditer les contenus sur les pages publiques du site, sans passer par l’espace privé de SPIP.