Carnet Wiki

Barre typo SPIP en jQuery

Version 7 — Septembre 2008 Arnault Pachot

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

Fonctionnalités

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

  • un mode wysiwyg générant automatiquement les raccourcis spip dans le texte, avec possibilité de basculer : mode wysiwyg / mode texte avec raccourcis.
  • modifier directement les attributs des modèles dans le mode wysiwyg (on pense notamment à l’alignement left ou right pour les modèles d’images). Il faudrait un raccourci pour insérer un modèle.
  • gérer les balises <multi> en proposant par exemple une zone de saisie par langue, et possibilité d’ajouter une langue.
  • se paramétrer depuis un panneau cfg, pour activer /désactiver certains raccourcis, et lui indiquer sur quels éléments elle doit s’afficher.
  • d’ajouter de nouveaux raccourcis via des plugins SPIP en proposant des points d’entrée
  • d’être indépendante des évolutions de l’interface privée de SPIP
  • proposer un rendu proche de celui du site public (exécution dans une iframe par exemple)

[RealEt] Pour l’instant, reproduire la BTv2 en jQuery (qui ne rajoute pas de raccourcis typo à SPIP, qui améliore juste la BT standard) est déjà un gros chantier.

Passer ça en WYSIWYG est un saut quantique non négligeable ! Surtout depuis les modeles/ de SPIP (et de toute manière pour les [->12], <img12>, [[notes de bas de page]]...).

À la limite, la coloration syntaxique des raccourcis typo est une piste sans doute plus pérenne... (j’avais fait des essais assez sympa avec http://codepress.org/).

Il y a aussi : http://www.cdolivet.-* fonctionner aussi avec les crayons directement dans l’espace public net/editarea /
http://helene . muze.nl/

Liste des raccourcis typo

lister les raccourcis typo (standard, typov2, enluminures)

Raccourcis typo standards :
-  mettre en italic
-  mettre en gras
-  transformer en intertitre
-  transformer en lien
-  transformer en note de base de page
-  entourer de guillemets
-  entourer de guillemets de second niveau
-  À
-  É
-  œ
-  Œ
-  €

Raccourcis typo v2 :
-  ...

Raccourcis typo enluminures :
-  ...

Liens

[arnuault] j’ai l’impression qu’on coupera pas à développer notre propre moteur wysiwyg

Faire un tour d’horizon de ce qui se fait en jQuery comme outils wysiwyg. Voir si on peut récupérer / adapter des parties du code ?

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.

Principe

-  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., en sous domaine de spip-zone, par exemple. lorsqu’on en sera au plugin SPIP

...

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..