SPIP-Contrib

SPIP-Contrib

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

288 Plugins, 197 contribuciones sur SPIP-Zone, 251 visitantes en este momento

Portada del sitio > Rédaction > Édition publique > Los lápices > Los lápices (les crayons)

Los lápices (les crayons)

Un plugin para la edición directa desde el sitio público

6 de marzo de 2007 – por Martin Gaitan – commentaires

Todas las versiones de este artículo: [English] [Español] [français]

4 votos

Actualizaciones directas con javascript insertados por jQuery en la página, respetando las autorizaciones y el funcionamiento nativo de SPIP.

La parametrización del esqueleto es muy simple: se basa en agregar la baliza #EDIT{...} a los elementos que se quiere volver modificables.

Puesta en marcha

Este plugin se desarrolla en spip-zone en http://trac.rezo.net/trac/spip-zone.... Está disponible a través de SVN o en el snapshot [1] http://zone.spip.org/files/spip-zon...

Como todos los plugins, el primer paso de la instalación consiste en copiar el directorio crayons/ en el subdirectorio plugins/ del sitio, y luego activarlo desde la interfaz privada de gestión de plugins. (el zip está preconfigurado en plugins/lápices/ )

Los esqueletos usados deben obligatoriamente contener una baliza #INSERT_HEAD en el <head>, ya que es indispensable para insertar los scripts js necesarios por jQuery. Si usas los esqueletos por defecto de la versión 1.9.2, no tienes nada que modificar, ya son compatibles.

Luego, para hacerlo operativo, basta con agregar en el atributo class de un elemento la baliza #EDIT{campo}. Por ejemplo, para volver «crayoneable» el texto de un artículo deberías modificar
el código

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

del esqueleto article.html por:

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

Cuando SPIP calcula la página, si los lápices se activan, la baliza
#EDIT{texte} será tranformada en crayon type-champ-id, y la magia podrá entonces operar. Si el plugin no está activo, el código será <div class="texte"> como de costumbre. Por lo tanto, es posible «crayonear» un esqueleto sin que cambie nada cuando el plugin no esté activo.

Funcionamiento

Fabricación de la página del lado del servidor

Cuando se carga una página, el plugin actúa en la tubería (pipeline) affichage_final.

Entonces comprueba:

  • si el usuario está identificado
  • si la página contiene al menos una cadena de caracteres “crayon xxxx-yyyy-nn”,
  • y si el usuario posee derechos sobre al menos uno de los elementos así señalados

Cuando las condiciones se cumplen, inserta en el

de la página el script externo crayons.js así como de los datos de configuración que incluyen, en particular, la lista de los elementos autorizados para este usuario. El cuerpo de la página no es modificado, y el script tiene un impacto despreciable en los resultados si no hay un usuario conectado.

Carga por el navegador

Cuando la página termina de cargarse (y si el visitante tiene derechos de edición sobre los lápices presentes en la página), el script crayons.js selecciona todos los elementos poseedores de la clase crayon type-champ-id, y si se autorizan para el usuario en curso, se adjunta una imagen cliqueable (un lápiz) y se agrega la clase crayon-autorise para indicar que son «editables».

Un click sobre esta imagen, y también un dobleclick sobre el propio elemento, activan el formulario de edición.


Activación del lápiz

Un click sobre el «lápiz» (o un dobleclick sobre el elemento) desencadena una petición al servidor, que devuelve el formulario de modificación que va a «sustituir» al elemento indicado.

La petición especifica al servidor el «tipo», el «campo» y el «id» que se pide para el formulario.

Después de la comprobación de la existencia de los datos y derechos sobre estos, el servidor devuelve el formulario (en forma de datos javascript, en formato JSON). El tipo y las dimensiones de los campos se determinan según su naturaleza y el lugar reservado al elemento. Contiene el texto en bruto, como cuando se publica desde el espacio privado; se preservan el formato, el tamaño y el color de los caractéres.

crayon.js asocia este formulario al elemento y luego «oculta» a este último.

El usuario puede entonces modificar los datos.

Atención : la visualización final no puede ser realizada sino por el servidor: un click fuera del cuadro de edición mostrará de nuevo el contenido original.

Cuando cambian algo, una rueda dentada les indica que introdujeron una modificación. Click sobre el botón o doble-click sobre el elemento para salvar el cambio.
Y si abandonan la página, un último recordatorio les propondrá salvar los cambios.


Seguridad

El formulario posee una serie de botones/teclas asociadas:

  • OK (así como la tecla Enter) permite salvar los cambios.
  • Annuler (así como la tecla Escape) abandona toda actualización.
  • Un click fuera de las zonas de edición oculta el formulario y muestra de nuevo el elemento original.

Contiene también identificadores y claves asociados a los datos.

El formulario es procesado en POST por ajaxForm, ya que es asincrónico. Al recibir los datos, el servidor:

  • analiza los datos presentados, su coherencia y su actualidad (con el fin de cancelar el envío si los datos se modificaron al mismo tiempo desde otra conexión).
  • comprueba de nuevo los derechos de edición.
  • llama a los procedimientos internos de SPIP para actualizar los datos en la base.

Vale aclarar que el sistema registra el historial de modificaciones, de la misma forma que lo hace el espacio privado.

Configuración

La configuración básica es especificada por una función opcional crayons_config() dentro de mes_options.php. Esta función debe devolver una tabla asociativa |Nombre|PorDefecto|Efecto| |msgNoChange|false|alerta si se aprienta OK pero no hay cambio |

msgAbandon true confirmación para salvar cambios si se abandona la pagina

El resto de la configuración se hace por medio de las clases asignadas al elemento.

Se puede añadir a las clases #EDIT{campo} (crayon type-champ-id) la clase #EDIT (type--id)
Indica que es necesario agregar al elemento, al lado del lápiz una imagen cliqueable (la celebre +) para pasar a la edición privada del objeto.
Por ejemplo en el texto de un artículo:
[<div class="#EDIT{texte} #EDIT texte">(#TEXTE|...)</div>]

Ver los esqueletos por defecto como ejemplo.

Ampliaciones

Hasta el 15/11/2006, sólo las tablas de artículos, de brèves y de secciones se podían modificar; para cada una de estas tablas, todos los campos de tipo «linea» (título, subtítulo, etc.), o «texto» (texto, epígrafe, etc...) son widgetisables.

No obstante, los documentos, los autores, los sitios y los foros se pueden «crayonear» con las recientes versiones.

La obtención del formulario (controleur/) así como la vista obtenida a cambio (vue/) son sustituibles.
Un lápiz para un id puede poseer varios campos.
Internamente, los textos están disponibles en alemán, inglés, francés, italiano y el que tu quieras traducir.

Entre las obras posibles:
-  varios ídem en un lápiz, administrar listas
-  hacer lápices de fecha
-  un sistema de tags manera del.icio.us para modificar las palabras clave asociadas
-  utilizar estos lápices para hacer interfaces de edición especializadas (o ultraeficaces)
-  etc

¡Como siempre, los contribuidores son bienvenidos!

P.-S.

Para tener en cuenta: antes del 3 de diciembre de 2006 «les crayons» se llamaba «Widgets», lo que puede ser útil si quieres conocer sus pasos de desarrollo.

Notas

[1Este archivo zip se actualiza automaticamente con la ultima versión en desarrollo

Dernière modification de cette page le 5 de abril de 2015

Volver arriba

Sus comentarios

  • El 3 de julio de 2008 a 18:23, por Miguel En respuesta a: Los lápices (les crayons)

    Atención!!!

    ¡¡¡Al instalar este plugin (y solo este) todos mis artículos han perdido sus tildes!!!

    He perdido un montón de información...

    Todos los campos de todas las tablas están ahora en codificación de caracteres latin1_swedish_ci.

    Desconozco si estaban así antes de instalar el plugin.

    AYUDA POR FAVOR!!

    La web es www.divulgauned.es

    • El 9 de julio de 2008 a 13:47, por Miguel En respuesta a: Los lápices (les crayons)

      Solucionado.

      Las tablas no habían sido alteradas, solo la declaración del tipo de código utilizado en la parte HEAD de mi web.

      : )

    Responder a este mensaje

Comentar este artículo

¿Quién es usted?
  • [Conectarse]

Para mostrar su avatar con su mensaje, guárdelo en gravatar.com (gratuit et indolore) y no olvide indicar su dirección de correo electrónico aquí.

Añada aquí su comentario Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Añadir un documento

Volver arriba

Hablando de eso...

  • (fr) La Fabrique

    20 avril 2012 – 302 commentaires

    La Fabrique est un outil pour webmestres ou développeurs qui souhaitent créer des plugins. La Fabrique est capable de générer le code source minimal d’un plugin pour SPIP 3 (elle accélère donc le démarrage d’un plugin) et peut s’occuper également de (...)

  • (fr) ScolaSPIP 4

    19 janvier 2016 – 178 commentaires

    ScolaSPIP est plugin-squelette responsive personnalisable pour sites Web d’établissements scolaires basé sur SPIPr Présentation de ScolaSPIP Ce plugin pour SPIP 3 est développé par la Dane de l’académie de Versailles pour les webmestres de cette (...)

  • (fr) Conversion des brèves en articles

    19 mai 2011 – 41 commentaires

    Avec l’évolution de SPIP, les brèves deviennent un objet historique, dont le maintien s’avère parfois inadapté. Il peut donc se révéler utile de convertir les brèves en articles, c’est ce que fait ce plugin. La conversion des brèves en articles Ce (...)

  • (fr) Mise à jour automatique des plugins

    5 octobre 2009 – 149 commentaires

    Une nouvelle lame du Couteau Suisse permet de visualiser les plugins nécessitant une mise à jour, tout comme SPIP lui-même ! Présentation Rendons à César ce qui est à César, voici un extrait de la présentation du Couteau Suisse pour sa lame « Mise (...)

  • (fr) ScolaSPIP 3

    21 mai 2012 – 443 commentaires

    Un plugin-squelette personnalisable pour sites Web d’établissements scolaires