Carnet Plugins

Barre typo SPIP en jQuery

Barre typo SPIP en jQuery

Développement en jQuery de la barre typo de SPIP.

Fonctionnalités

[Arnault]
Il me semble qu’une telle barre typo devrait permettre :

Librairies jQuery qui pourraient être utiles

Traitement

-  enlever l’ancienne barre typo spip Non : il suffit de remplacer inc/barre.php par le nouveau (c’est ce que fait déjà la BTv2).
-  masquer le textarea/input
-  ajouter à la place une zone d’édition wysiwyg
-  a chaque modif de la zone wysiwyg, mettre à jour le textarea/input en arrière plan avec le code spip correspondant. [Arnault] ça va être trop lent à) chaque modif. il faudra trouver autre chose. Peut-être un traitement de mise à jour sur l’evenement submit ?

Remarque : Dans le rendu wysiwyg, il sera nécessaire de bien délimiter les substitutions réalisées par spip (modèles...) en les encadrant dans des divs par exemple, dont les attributs nous donnent les informations sur le modèle d’origine. Ainsi on peut tester qu’on est en train de sélectionner avec la souris un modèle et renvoyer vers la balise d’appel du modèle (et non de modifier le code généré par le modèle). Peut-être généraliser ce principe à toutes les substitutions (raccourcis), pour un découpage du texte plus facile ?

ces délimiteurs permettront également de rendre la zone de rendu d’un modèle non éditable directement dans l’interface wysiwyg. Éventuellement un effet de hover indiquant que le bloc correspond correspond à un modèle.

finalement ça revient à construire un arbre pour représenter le texte en rendu wysiwyg.

Zone de test

-  dans un premier temps, travailler hors spip. la plupart des raccourcis ne nécessitent pas d’être dans un environnement spip pour être développés/testés. A vérifier : car besoin de spip pour les modèles et les liens avec référence à un id d’objet dans spip [lien->doc12]

-  Prévoir plus tard deux SPIP de test : 1.9.2 et 2.0, en sous domaine de spip-zone, par exemple. lorsqu’on en sera au plugin SPIP

Liens sur le sujet

On pourrait partir, par exemple, du code du « WYSIWYG jQuery Plugin »...

[arnault] je vois que WYMEditor permet d’ajouter des plugins, peut être pour ajouter nos propres raccourcis.

-  jqtexteditor

n’a t’on pas intérêt a développer notre propre wysiwyg, simple, uniquement pour les raccourcis spip ? Et surtout adapté pour le système des modèles spip.

[augustin]A regarder de près ?
-  L’extension MarkitUP pour Jquery.
markItUp ! is not a WYSIWYG editor, and it never will be.
Un editeur de balisage en Jquery. Supporte déjà plusieurs syntaxes (html, wiki, dotclear). Semble assez modulaire et extensible.

L’avantage est que la prévisualisation repose sur le parseur de l’application (spip ici). Le code des modèle devrait pouvoir être prévisualisé et l’aperçu tiendrait compte des css du site.

Avec une implémentation de ce type, on évite les pièges du « wysiwyg » bête et méchant : balisage « sale », balisage sémantique inexistant, mélange contenu/mise en forme (très problématique en cas d’utilisation du contenu dans un autre contexte : syndication, requêtage à distance par un autre spip etc...).
Ce n’est pas wysiwyg stricto sensu, mais il y a une prévisualisation qui remplis très bien ce rôle.

[RealET] Dans mes delicious sur le sujet, j’ai retrouvé :

...

En passant : peut-être que l’appellation « barre typo » n’est pas vraiment adaptée, car cette barre propose des fonctions qui vont au delà de la typographie..