[spip-dev] Une barre carrément Wysiwyg

Salut,

Comme je faisais joujou avec les javascript sous Mozilla, je suis tombé sur les "Rich Text". J'ai pas vu que c'était trÚs utilisé sur le Web, m'enfin j'ai joué avec, et c'est plutÎt impressionnant.

Là c'est codé comme un porc (bicoz j'ai un peu galéré je dois dire), mais ça donne ça:

http://rezo.net/~arno/
(évidemment, il faut aller dans les forums: Mozilla 1.3 ou MSIE>=5).

Je vous le donne Émile: c'est carrément Wysiwyg, c'est assez dingue ce qu'on directement copier-coller dedans (des bouts de page avec des images...).

Ca pourrait être utilisé uniquement pour les forums (bicoz ça génÚre du HTML, propre le HTML, mais du HTML quand même).

Si vous pensez que ça vaut le coup, y'a moyen de perfectionner (genre filtrer carrément le résultat: remplacer les gras, italic... par les tags SPIP, et ensuite virer tout le HTML qui reste histoire de ramener les délires à la normale.

ARNO*

Je vous le donne Émile: c'est carrément Wysiwyg, c'est assez dingue ce
qu'on directement copier-coller dedans (des bouts de page avec des
images...).

J'espère que tu vas installer ça très vite dans SPIP, car sur Safari ça
fait carrément disparaître la case de saisie : super cool, j'adore ça.

Wysiwyg : see nothing, get nothing :wink:

-- Fil

Hello,

les editeur wysiwyg ne marche que sur mozilla > 1.3 et IE > 5.0 voire
plustot > 5.5
en aucun cas il ne marcheront sur Safari, Opera, Konqueror....
ces editeurs utilisent des fontionnalite javascript qui ne font pas
partie des normes. Ils utilisent pour Mozilla les fonctions de midas
et pour IE le contenteditable (ou un truc du genre je suis plus tres
sur du nom exact)

Hello,

et si on veux aller encore plus loin:
http://dynarch.com/htmlarea/example-fully-loaded.html

c avec une licence de type BSD

J'ai trouvé ça sur le sujet de la création des barres wysiwyg
http://www.devguru.com/features/tutorials/wysiwyg/wysiwyg1.html

et une appli complète...gratuite...
http://www.interactivetools.com/products/htmlarea/

@+ Coyote...

Effectivement faudrait creuser dans cette direction, car là on simplifie
énormement la vie de l'utilisateur lambda, pour lui plsu besoin
d'apprendre des raccourcis typo il a entre les mains une véritable
interface word.

ARNO* a écrit :

Je l'ai dit: c'est un premier jet, bazardé à la va-comme-je-te-pousse. Et une des choses que je n'ai pas intégré, c'est justement ce qui se passe avec un butineur pas compatible (affichage du champ normal).

Dans mon idée:

- cette barre Wysiwyg apparaît dans les forums; cela permet d'avoir les enrichissements typographiques de base (gras, italique, citer - il ne s'agit surtout pas d'aller vers la profusion des démos citées ici, mais de restreindre à ce qui est réellement nécessaire à un forum), et de virer tous les autres; pour le contributeur des forums, facilité d'utilisation; pour les admins, forums sans trop de surprises;

- et si adoption de cette barre, alors l'ancienne version est totalement bazardée: dans les champs textes qui ne sont pas des forums, tout simplement pas de barre, pour éviter les confusions entre deux barres aux looks similaire mais aux comportements totalement différents.

ARNO*

Coyote wrote:

J'ai trouvé ça sur le sujet de la création des barres wysiwyg
http://www.devguru.com/features/tutorials/wysiwyg/wysiwyg1.html

et une appli complète...gratuite...
htmlarea.com - Ressources et information concernant htmlarea Resources and Information.

Il y a plusieurs projets de ce genre sur sourceForge.
J'ai trouvé celui-là
http://www.fredck.com/FCKeditor/
qui a le mérite de permettre le copier/coller depuis Word en enlevant les
tags propres (sales en fait) à word.
Il n'est par contre pas compatible avec Mozilla (affichage du source HTML
brut)

Jacques PYRAT - www.mission-isolement.gouv.fr

>> Je vous le donne Émile: c'est carrément Wysiwyg, c'est assez dingue ce
>> qu'on directement copier-coller dedans (des bouts de page avec des
>> images...).

Dans ce cas, c'est carrément chiant, car n'importe qui peut polluer
un forum en deux coups de cuiller à pot (même sans le vouloir, genre
"tiens si recopiais cet article que j'aime bien").

- et si adoption de cette barre, alors l'ancienne version est totalement
bazardée: dans les champs textes qui ne sont pas des forums, tout
simplement pas de barre, pour éviter les confusions entre deux barres aux
looks similaire mais aux comportements totalement différents.

Oui mais alors les auteurs vont râler parce que les articles sont moins
pratiques à taper que les forums...

a+

Antoine.

Hello,

Le mer 27/08/2003 à 22:37, ARNO* a écrit :

>> Je vous le donne Émile: c'est carrément Wysiwyg, c'est assez dingue ce >> qu'on directement copier-coller dedans (des bouts de page avec des >> images...).

Dans ce cas, c'est carrément chiant, car n'importe qui peut polluer
un forum en deux coups de cuiller à pot (même sans le vouloir, genre
"tiens si recopiais cet article que j'aime bien").

Ce que je prévoyais: lorsque tu prévisualises, le texte reçu est (sera) filtré: les codes <b>, <i>, <blockquote>, <a href...> sont transformés en raccourcis SPIP pour la sauvegarde dans la base. Tous les autres codes HTML sont sucrés (on peut mettre un message s'il y a des codes HTML sucrés, genre "Votre document comportait des éléments de mise en page incompatibles avec ce site: il a été simplifié; veuillez vérifier ci-dessous que les modifications effectuées blah blah blah...").

- et si adoption de cette barre, alors l'ancienne version est totalement bazardée: dans les champs textes qui ne sont pas des forums, tout simplement pas de barre, pour éviter les confusions entre deux barres aux looks similaire mais aux comportements totalement différents.

Oui mais alors les auteurs vont râler parce que les articles sont moins
pratiques à taper que les forums...

Si la version pour les forums fonctionne, il y a peut-être moyen d'inventer un truc légÚrement différent et plus complet pour les articles: passage avec un bouton de la version "texte brut" actuelle à une version en éditeur Wysiwyg (bicoz c'est du HTML tout simple).

Actuellement, c'est déjà plus ou moins le principe: quand tu cliques "Prévisualiser", la version HTML du texte enrichi est passé dans la case (INPUT) cachée (type=hidden) et derriÚre rien n'est modifié.

Il faut donc un traducteur en javascript entre les raccourcis SPIP et les traductions HTML. Globalement, ça doit être faisable. Quid des cas pas faisables? (à part essayer de pousser le truc le plus loin possible pour voir de visu, je ne vois pas trop)

Ça devient donc assez chaud à gérer, car dans l'idéal, il faudrait
- une version contenteditable pour les utilisateur de IE>=5
- une version midas (j'connais pas, c'est quoi ?) pour les utilisateur
  mozilla >=1.3 et compatibles
- une version autre pour les navigateurs "intermédiaires" (voir plus
  bas)
- une vesion textarea pour les navigateurs qui veulent rien comprendre
  (j'déconne, je sais bien, lynx, accessibilité, tout ça ..)
- une liste assez exhaustive de navigateurs, avec les compatibilités qui
  vont bien pour balancer ce qu'il y a de mieux selon l'utilisateur.

  Pour le cas intermédiaire, je pensais en fait a une application de
type applet qui rafraichirait un hidden dans la page appelante.
  C'est plutôt lourd à faire pour du vrai html, mais pour un cas
"limité" aux raccourcis spip, ça doit être jouable ?

  Perso, j'ai pas du tout des compétences applets pour faire ça, par
contre, j'ai déjà potassé une variante : les tclets, c'est à dire des
petites applis tcl/tk utilisant le plugin tcl dispo pour pas mal de
navigateurs.
  Ça m'a l'air plus léger et beaucoup plus simple à coder.

  Nan ? faut qu'j'retourne en vacances ?

  À+, Pif

ARNO* wrote:

Sinon, pour les articles en particulier, je butais totalement (avec la
barre précédente) sur le problème du scrolling vertical des textes
longs sous Mozilla. J'ai écumé les docs, mais je n'ai rien trouvé sur
un contrôle du scroll vertical dans les champs. J'ai ajouté une modif
qui permet de conserver la sélection sous Mozilla (ce qu'on avait
sélectionné avant le bouton est encore sélectionné après), ce qui
permet réafficher le scroll au bon endroit en faisant ensuite
"flèche-droite"; mais c'est tout de même tiré par les cheveux, et ça
pose un problème d'ergonomie extrêmement pénible.

Une question toute bête de programmeur VB : y a-t'il en JavaScript un
equivalent de "sendkey".
Ce que ça fait : envoie à l'interface graphique une équivalent frappe au
clavier.
Si ça existe, ça résoud le pb de Mozilla : envoie automatique au navigateur
du fleche droite et voilà !

Jacques PYRAT - www.mission-isolement.gouv.fr

il est quand meme possible de n'autoriser que certain tags et de
nettoyer le code de facon automatique ce qui limite fortement les pb de
ce type

Dans la même veine, il faudra vérifier la taille des images uploadées par
les visiteurs.

FS

Comme je faisais joujou avec les javascript sous Mozilla, je suis tombé sur
les "Rich Text". J'ai pas vu que c'était très utilisé sur le Web, m'enfin
j'ai joué avec, et c'est plutôt impressionnant.

Oui, mais quel intérêt pour spip ?

Ca pourrait être utilisé uniquement pour les forums (bicoz ça génère du
HTML, propre le HTML, mais du HTML quand même).

Donc plus de styles CSS, bof...

Si vous pensez que ça vaut le coup, y'a moyen de perfectionner (genre
filtrer carrément le résultat: remplacer les gras, italic... par les tags

Je hais le wysiwyg. C'est un palliatif très mauvais à l'absence de
volonté d'apprendre les 2/3 raccourcis très pratiques de spip.

Si vous voulez implanter ce genre de chose, il faut plutot regarder du
côté de l'interface de TeXmacs, qui elle, est intelligente. ie. c'est
n'est pas de la mise en forme, mais du balisage de fond.
Ca permet donc au webmestre de continuer à faire son boulot
correctement, sans avoir à se soucier des saloperies implantées par les
utilisateurs.

En effet cette barre est formidable mais ne fonctionne carrément pas avec Opera (je n'avais pas la barre, je n'ai compris de quoi il s'agissait qu'après avoir exumé mon IE 6).

Certe, l'utilisateur lambda utilise I.E., mais il reste encore et toujours des rebelles (bon ok, j'ai cessé d'utilisé Lynx.. :D) qui utiliseront des navigateurs alternatifs, comme Opera par exemple.

Alors oui au développements qui facilite la vie des utilisateurs, mais gardons à l'esprit qu'il n'y a pas que Internet Explorer et Mozilla.

Ceci étant dit, je la trouve très cool, cette barre WYSIWYG.

Si la version pour les forums fonctionne, il y a peut-être moyen d'inventer
un truc légèrement différent et plus complet pour les articles: passage
avec un bouton de la version "texte brut" actuelle à une version en éditeur
Wysiwyg (bicoz c'est du HTML tout simple).

C'est une hérésie. Relisez ideux ou trois fois le document
http://www.gutenberg.eu.org/pub/GUTenberg/publicationsPDF/27-taylor.pdf
ou en version google-html :
http://216.239.51.104/custom?q=cache:7LU_Irq7hz4J:www.gutenberg.eu.org/pub/GUTenberg/publicationsPDF/28-29-munier.pdf+que+nous+a+apporté+le+wysiwyg&hl=en&ie=UTF-8

Sinon, pour les articles en particulier, je butais totalement (avec la
que j'arrivais à un cul de sac qui condamnait la version Mozilla pour les
articles (dont les textes sont longs). Donc pas glop.

Lorsqu'il faut mettre trop de patches sur une solution bancale pour
l'adapter à un besoin, c'est peut-être que le besoin es mal défini et
que le travail est fait dans le mauvais ordre ?

ARNO* wrote:

Salut,

Comme je faisais joujou avec les javascript sous Mozilla, je suis
tombé sur les "Rich Text". J'ai pas vu que c'était très utilisé sur
le Web, m'enfin j'ai joué avec, et c'est plutôt impressionnant.

Je viens de trouver l'éditeur HTML en ligne le plus impressionant que j'ai
jamais vu !
http://iakt.rdsnet.ro/demo/ktmlDemo/ Regardez, ça vaut la peine !
Ca marche sous IE, Mozilla 1.4, il y a un "inspecteur de propriétés"...
==> Arno : ils n'ont pas de pb de scrolling !

C'est interakt qui fait ça (connus pour leurs extension de DW MX pour le
php)

Malheureusement, il est payant :frowning:
Mais une licence existe pour l'intégrer à un CMS : 1499 $

Malheureusement, il est payant :frowning:
Mais une licence existe pour l'intégrer à un CMS : 1499 $
----------
This license grants the rights to use KTML3 as the content editing component
for any dynamic websites. You can also integrate the control in your CMS if
you want. The control will be usable in an unlimited number of forms of the
website administration section or frontend, and will be accesible by an
unlimited number of users.
---------
Devant la qualité du machin, je me demandais si nous ne pourrions pas nous
cotiser tous pour payer la licence plutôt que de passer un temps énorme à
coder un équivalent...

Hmm.

Ce doit être une blague.

Disons que c'est une blague.

Antoine wrote:

Malheureusement, il est payant :frowning:
Mais une licence existe pour l'intégrer à un CMS : 1499 $
Devant la qualité du machin, je me demandais si nous ne pourrions
pas nous cotiser tous pour payer la licence plutôt que de passer un
temps énorme à coder un équivalent...

Hmm.

Ce doit être une blague.

Disons que c'est une blague.

On va le dire :wink: