MISE EN FORME DE TEXTE [ SAISIE WYSIWYG ]

Commentaire de bultez le 09/07/2005 09:48:52

salut couco747,
effectivement j'espère des retours
pour les autres navigateurs... et
surtout comment faire avec eux
tout ce qu'on peut faire avec IE.

Commentaire de bultez le 09/07/2005 15:23:51

salut RazielRaever

>>Seul point noir pour choisir la couleur
et je peux comprendre ce point de vue,
c'est la "moins mauvaise" solution
que j'ai trouvé pour être compatible.

avec Internet Explorer j'utilise un
Active'X ( CommonDialog ) et c'est
nickel chrome.

pour "tous navigateurs" , je pensais :
_ autoriser la saisie de valeurs => mais
dans ce cas le texte perd la zone de
sélection ( peut-on éviter cela ? ) et
saisir 3 valeurs ce n'est pas très
"propre" non plus.
_ cliquer sur une couleur dans un tableau =>
soit trop lourd ( 255x255x255 )
soit on n'a pas accès à toutes les couleurs.
_ un mélange de ces 2 solutions
un mini tableau de couleurs + affinage
manuel, je ne trouve pas ça satisfaisant.

donc si vous avez des idées : elles
sont les bienvenues.

Commentaire de bultez le 10/07/2005 13:04:43

je viens de rectifier ce choix de couleurs :
par déplacements d'un curseur sur une échelle.
merci de vos commentaires.

Commentaire de coucou747 le 11/07/2005 00:23:48 administrateur CS

RichTextBox ne fonctionne pas non plus sous Konqueror...

Commentaire de bultez le 11/07/2005 06:48:44

à Arto_8000
>>quand on insert un select et que l'on va voir
>>la source le select est en premier plan et cache
>>une partie de la source (testé sur IE).
"bug" connu. on n'arrive pas à mettre un
objet au dessus d'un select ( un div par ex )
j'ai lu que ça venait du fait que les select
n'étaient pas gérés comme les autres objets.
>>il y a un rectangle noir qui cache la partie
>>de l'éditeur (testé sur Netscape 7.1).
c'est du à quoi ? comment faire pour éviter ?
[ mais Netscape n'est-il pas mort ? ]
>>open source qui s'appelle RichTextBox Editor
peut-être puis-je y trouver comment faire
pour les autres navigateurs ? on trouve
ça où ? recherche avec google ?    @+

Commentaire de coucou747 le 11/07/2005 13:33:48 administrateur CS

Dans un sens Konqueror fait 1 % des visites sur mon site web, ce site web parle de la programmation, donc, c'est assez normal de croiser des linuxois qui aiment bien Konqueror. Cependant, quand on a Konqueror, on a souvent aussi Mozilla, Firefox et d'autres navigateurs gecko....
Konqueror est le navigateur par défaut de l'environement KDE sous linux, KDE est l'environement graphique par défaut sous beaucoups de distributions de linux. Il est vraiment bon, je n'ai croisé des problèmes qu'avec les wysiwygs... Konqueror a pour particularitée de gérer à la fois les normes classiques et une grande quantité de normes MS...
Konqueror a été créé par l'entreprise trolltek, ils font aussi KDE et QT, c'est une entreprise qui vit de l'open-source et qui dévelope en donnant ses produits aux linuxois et en faisant payer les windowsiens... Ce n'est pas un projet open source comme les autres dans le sens ou on ne peut pas intègrer le projet facilement, mais dans un sens, c'en est un à part entière, et on ne doit pas l'oublier...
Perso, j'essai de déveloper pour le maximum de monde quand je le peux, alors si on peut le faire, autant le faire, quand c'est pas possible, je comprends, mais on ne doit pas oublier un groupe sous prétexte qu'il est réduit alors qu'on pourrait l'intègrer facilement (pe). Faut aller voir sur linux-fr.org le sujet sera peut-être plus dévelopé...
L'éditeur de texte RichTextBox Editor a un défaut majeur : il est lent, et un défaut mineur : il n'est pas fait pour être lu (cf leurs retours à la ligne foireux et l'absence de commentaires...)

Commentaire de lordskyser1 le 11/07/2005 23:00:59

dernières questions sans rapport avec la source dslé : existe-il-des versions windows de konqueror, galéon et safari? Si oui, où les télécharger? Si ma feuille de style externe marche avec mozilla, firefox, netscape et MSIE, elles fonctionnera sous cs navigateurs "exotiques"? Voilà, dslé pour le dérangement mais je n'ai pas encore trouvé de réponse

Commentaire de coucou747 le 12/07/2005 07:07:29 administrateur CS

ces navigateurs ont pour moteur html :
-gecko pour Mozilla, firefox, galeon, epiphany
-khtml pour Konqueror
pour safari et opera, je n'en sais rien...

les moteurs seront prochainement accèssibles partout, je crois qu'ils sont déja accèssible sous windows, mais comme win ne m'interesse pas vraiment, je n'ai pas vérifié...

Commentaire de coucou747 le 13/07/2005 20:43:54 administrateur CS

je te remercie vraiment, j'ai créé à mon tour mon propre wysiwyg, (je ne t'ai copié qu'une petite partie de la fonction init, alors on peut dire que je l'ai fait moi même, mais grace à toi, restons modeste...)
j'ai un petit problème, et une amélioration possible pour ton script : dans les wysiwygs classiques (les diférents offices,) quand on est sur une région sélecionnée, le bouton sélectionné est souligné, j'aimerais faire la même chose, tout ce que j'ai réussi à faire, c'est ça :
function toolbar_color(){
//alert(texte.queryCommandEnabled("JustifyFull"));
if (texte.queryCommandState("JustifyFull")==true)
document.getElementById("justifie").style.backgroundColor="#F00";
else
document.getElementById("justifie").style.backgroundColor="none";
if (texte.queryCommandState("Italic")==true)
document.getElementById("italique").style.backgroundColor="#F00";
else
document.getElementById("italique").style.backgroundColor="none";
setTimeout("toolbar_color();", 1000);
}

bon, c'est sur que c'est pas super super, la fonction s'appelle toutes les secondes, et c'est pas super cool, mais un onkeypress sur l'iframe ne fonctionne pas...
Cette fonction donne les commandes qui ont étés utilisées, mais pas les commandes qui ont étés utilisées sur la sélection...
Si quelqu'un pouvait m'aider, ça améliorerais nos deux wysiwyg...

Commentaire de coucou747 le 14/07/2005 16:10:11 administrateur CS

le setTimeout n'est qu'un détail, ce que je veux, c'est afficher le fait qu'on soit sur une zone soulignée, en gras ... ou non...

Commentaire de lacousine le 14/08/2005 22:43:43

je te remercie d'avoir affiché ton code ici, car j'essayais justement d'intégrer les balises à mon formulaire qui me permet d'écrire dans ma base de données. Il manquait de la mise en page. Je vais vérifier comment je pourrais intégrer certaine de tes fonctions à mon code.

Commentaire de Netsuko le 20/10/2005 11:31:10

Slt tout le monde, j'ai un petit souci avec le code : J'essaye de récupérer la valeur de la textarea dans une deuxième page php par methode POST. Dans "Action" j'ai bien mis ma page php.
Rien ne s'affiche sauf quand j'enlève "display:none;" de la balise style de la textarea.
Mais du coup la mise en forme ne s'affiche plus en direct ...
Quelqu'un peut m'aider svp ?

P.S : Merci pour ce code c'est nikel !

Commentaire de bultez le 20/10/2005 11:50:18

>>Rien ne s'affiche sauf quand >>j'enlève "display:none;"
ben oui, display:none c'est pour ne rien afficher
>>la mise en forme ne s'affiche plus en direct
ben oui, les balises ne sont pas interprétées
dans un textearea mais affichées comme du texte.

Commentaire de coucou747 le 08/11/2005 17:54:50 administrateur CS

On ne peut pas le rendre compatible Konqueror à l'heure qu'il est... Faut en parler à TrollTeck

Commentaire de coucou747 le 09/11/2005 14:55:51 administrateur CS

lol, j'ai passé du temps à faire quelquechose de fonctionnel sous tout les navigateurs, et finalement, j'ai fais un truc genre :
si t'as ie ou gecko, t'as un wysiwyg, si t'as KHTML, t'as un éditeur de BBCODE avec aperçu automatique...

Ma fonction est plutôt sympas, et l'aime bien le résultat, mais voila, je n'ai pas réussi à faire de wysiwyg sous konqueror, et on ne peut pas utiliser l'iframe pour ça... (en tout cas, je n'ai vu aucun exemple qui fonctionnait...)

Commentaire de coucou747 le 17/03/2006 18:02:30 administrateur CS

pour modifier des pages html, tu dois avoir un truc coté serveur pour les enregistrer...

Commentaire de coucou747 le 20/03/2006 19:04:36 administrateur CS

j'ai aussi réussi à le faire

Commentaire de bany74 le 28/03/2006 20:16:05

ChrisPM Merci pour tes scripts que je vais étudier de ce pas...
j'ai regardé ton forum il est magnifique.

tous ces posts sont trés instructifs merci à tous!

bon courage

Commentaire de mendossa le 18/12/2006 15:12:21

Bonjour à tous,

J'utilise actuellement ce script qui fonctionne très bien sous Internet Explorer 6; mais je viens de me rendre compte qu'il ne fonctionnait pas sous IE7.
La zone est vérrouillé, quelqu'un aurait-il une solution ??

Commentaire de BIGROSA le 27/03/2007 13:32:03

Bonjour à tous.
Super travail.
Je suis nul en java script.
J'essaie d'envoyer à une page via son adresse le code html du texte tapé.

merci par avance.

Commentaire de Jarod1980 le 05/04/2007 20:30:58

Salut,

Pourrais tu m'expliquer comment marche le saveAs, j'arrive pas à voir dans ton code où ça se trouve.
Au sinon, très bonne source, bravo!

Commentaire de bultez le 06/04/2007 06:50:55

salut Jarod,

<input type="image"
src="SaveAs.gif"
title="Sauver"
onclick="btn1(this);" />

//————————————————————————————————————————————
function btn1(bou,p2,p3) //—— bouton ——
//————————————————————————————————————————————
{
p2 = p2 ? p2 : false; // valeurs par défaut
p3 = p3 ? p3 : null;
Champ.execCommand(bou.src.substring(bou.src.lastIndexOf("/")+1,
bou.src.lastIndexOf(".")),p2,p3);  
Fen.focus();
}

que ne comprends tu pas ?
@+

Commentaire de Sibtcha le 31/01/2008 20:53:54

bonjour,

Tout d'abord, merci pour la source, elle est très bien faite. Cependant le je comprends pas la fonction btn1(bou, p2, p3). Quelqu'un pourrait-il me l'expliquer. Merci d'avance

Salutations sibtcha

Commentaire de Sibtcha le 01/02/2008 11:10:37

alors en fait ce sont les  lignes p2 = p3 ? et la ligne du execCommand

dsl je ne suis pas super fort en Javascript mais je tente de m'amélioré.

Merci d'avance @+

Commentaire de bultez le 04/02/2008 07:23:33

>>dsl je ne suis pas super fort en Javascript
moi non plus, mais y'a pas d'quoi être désolé.
>>après avoir réfléchis un peu j'ai compris
ben voilà, bravo, c'est essentiel de savoir réflêchir.
( et l'essentiel, c'est le principal )

Commentaire de bultez le 21/05/2008 11:58:42

certes, certes...
"il suffit" de le faire dans la balise form...

<form action="page.php"
onsubmit="trtTxt();"
method="post"
name="frm">

function trtTxt()
{ var tmp=document.getElementById("txt");
if ( tmp.style.display=="none" )
{ tmp.value=Champ.body.innerHTML; }
}

pas testé... mais pas loin...

Commentaire de bultez le 21/05/2008 12:53:33

nickel si çà baigne...  merci du retour.    @+

Commentaire de bultez le 22/05/2008 10:40:31

regarde dans le script.
le "transfert" textarea <==> iframe y est fait ( click sur l'image <> )
document.getElementById("txt").value=Champ.body.innerHTML   et/ou
Champ.body.innerHTML=document.getElementById("txt").value

Commentaire de PlayerMania le 14/09/2008 12:29:53

Bien sympa cette source, ça change des usines à gaz de tinymce ou autres...

Hélas je trouve qu'il reste tjrs un dernier bon souci sur tous ces wysiwyg, le copier/coller et glisser/déposer qui nous pond selon la source de copie une mise en forme plutôt exotique bien souvent.

Je pense qu'il faudrait réussir à ne pas mettre en forme du contenu collé ou déposé, pour pouvoir ensuite bien le remodeler via notre petite barre d'outil (et donc seulement avec nos outils possibles).

La solution serai qqch du genre onPaste sur l'élément,  qui détecte le collage, et au même moment on remouline  notre fameux "Saisie" pour lui enlever tout ce qu'on ne désire pas y trouver.

J'y travail, mais au final, la bonne emmerde, c'est que la balise iframe n'accepte pas onpaste="ma_fonction();"

Des idées ??

Commentaire de PlayerMania le 14/09/2008 16:32:07

Si tu voyais ce que des gonz arrive à incruster via ce contenteditable... des tableaux détraquer, des fontsize title de 28, un autre de 22, des couleurs/fonds super jakie, décalage margin de 30, un coup 60...

Au final, les pages html ne ressemblent plus a rien.

Bref, j'espère bien redonner un peu d'ordre dans tous ces bordels, il y a des pages ou je n'ai carément pas envie de donner la possibilité de mettre un tableau ou d'y placer une image ou je ne sais quoi. La barre d'outils a beau ne pas proposer l'option, celle ci est réalisable via copier/coller...

Et mal grès tout, il faut que je passe tout de même par un wysiwyg vu la complexité de certaine page à rentrer et la volonté des utilisateurs a analyser ce qu'ils font...

Au final, ça donne un wysiwyg adapté pour le site, avec des contraintes sur les fontsize de titres et paragraphes, couleurs possibles, interdiction de tableaux, etc...

Même du tout nouveau navigateur t'affichera un tableau la ou tu en avais pas envie ou autres.

Dommage que tu ne crois plus en ta caravane.
Je t'assure qu'elle mérite de lui refaire une sacré peinture, lol.
++

Commentaire de PlayerMania le 15/09/2008 22:54:13

As tu essayé ?
Mon iframe ne veux tjrs rien savoir...


function onPasteHandler(e) {
setTimeout(function() {
window.alert('coller');
}, 10);
}

...
case 'Microsoft Internet Explorer':
Fen=window.frames['Saisie'];
Champ=Fen.document;
Champ.body.attachEvent('onPaste', onPasteHandler);
Champ.designMode='On';
...



J'ai aussi essayé en modifiant le contenu de l'iframe :

...
case "Microsoft Internet Explorer":
Fen=window.frames['Saisie'];
Champ=Fen.document;
var html = '<html><head></head><body onpaste="parent.onPasteHandler();"></body></html>';
Champ.open();
Champ.write(html);
Champ.close();
Champ.designMode='On';
...

et tjrs aucune réaction, que faire ??

ça fonctionne bien sur la page englobante, avec un <body onpaste="onPasteHandler();"> (sauf dans l'iframe bien sure)
J'ai pas encore testé pour mozilla

Commentaire de bultez le 16/09/2008 09:28:52

ah ben... tiens ? simplement, dans la fonction initial()
Fen.window.onload=function() { alert('load'); }
ça baigne
Fen.window.onpaste=function() { alert('paste'); }
ça baigne pas...
et si on met src="page.htm" dans l'iframe, même punition !?!
faut donc creuser un peu plus loin...

Commentaire de bultez le 17/09/2008 16:14:50

à mon avis, tu devrais poser la question sur le forum...
y compris d'ailleurs pour le coup du "onpaste qui semble
ne pas fonctionner sur l'iframe", il y aura probablement
des réponses, au moins des pistes, sûrement des idées.
@+

Commentaire de aminewas le 31/12/2008 12:42:00

bonjour,

Tout d'abord, merci pour la source, elle est très bien faite.mais jé 1 problem j'arrive pas a recuperer les données de textarea avec le mise en forme qui jété ajouter
merci de me repondre

Commentaire de aminewas le 31/12/2008 13:11:17

rebonjour
a propos la recuperation de données de textearea j'arrive a recuperé dans une textearea mais avec des balise <htlm>

Commentaire de aminewas le 31/12/2008 13:25:56

re c moi encore
je un problem quand je envoie le donnée a une destinaitaire je le recupere le donnée mais avec des balise <html>

exp:je envoi "salut" en gras ,souligné et italique
je recu comme ca<STRONG><EM><U>salut</U></EM></STRONG>

Commentaire de aminewas le 31/12/2008 13:48:51

wé, je sé il faut des balise html mais il faut traiter avec les balises html et l'afficher dans textearea sont balise html
car quand j'ouvre la boite de reception je trouve le text avec des balise html

Commentaire de aminewas le 01/01/2009 22:56:49

svp je peux pas eviter <iframe> ???

Commentaire de camelion_ le 29/04/2009 21:16:54

Salut,
super source ,chapeau pour ton éditeur ,et pour tout tes commentaire
bon continuation

Commentaire de Bul3 le 31/05/2009 12:07:04

execCommand :
     http://msdn.microsoft.com/en-us/library/ms536419(VS.85).aspx

p2 = p2 ? p2 : false;
     p2 = ce qui est passé en paramètre, false sinon
p3 = p3 ? p3 : null;
     p3 = ce qui est passé en paramètre, null sinon


on clique sur un bouton,
son nom est = "http://site/répertoire/..../Paste.gif" par exemple
on en tire "paste"
( bou.src.substring(bou.src.lastIndexOf("/")+1,
  bou.src.lastIndexOf(".") )

et execCommand("Paste",flase,null) ça copie le presse-papier

voili, voilou.

Commentaire de Bul3 le 31/05/2009 15:34:18

oui. si tu donnes le bon src au bouton
( ça n'existe pas déjà dans mon script ?
  un ch'tiot oubli alors .... )

Commentaire de Bul3 le 31/05/2009 18:35:33

d'où te vient ce board ????
tu crois que execCommand("board",false,null) ça baigne ?
faut pas tenter de deviner ! ça ne marche jamais !
regarde la doc msdn ou autre. ça doit être indiqué.

Commentaire de poopoone le 08/10/2010 16:47:27

désolé pour le double message, rajouter un "ajouter une image" et tableau ça serai cool :)