Problème WYSIWYG avec Opera et fonction Contenteditable.

zlitus Messages postés 43 Date d'inscription dimanche 13 juin 2004 Statut Membre Dernière intervention 8 janvier 2007 - 21 août 2006 à 16:08
zlitus Messages postés 43 Date d'inscription dimanche 13 juin 2004 Statut Membre Dernière intervention 8 janvier 2007 - 21 août 2006 à 19:30
Bonjour.

j'ai un petit problème, je dévloppe un widget pour Opera 9.x dans le but de faire un éditeur WYSIWIG.

Il y a peu, j'ai découvert la fonction ContentEditable qui permet d'en avoir un "tout fait" compatible Opera (il supporte cette fonction depuis sa version 9.0 beta). J'avais donc déssidé de me basé sur cette fonction pour dévloppé mon widgets.

Étant donné que la fonction ContentEditable interprète directement le HTML dans un "champ de texte", il est très facile de rajouté des fonctions comme mettre de la couleur ou autre avec un petit code Javascript.

Dans tout éditeur WYSIWYG qui se respècte, on sélectionne du texte et on choisit une couleur a lui donner. Il colore donc le texte que l'on as selectionné.

J'ai donc cherché comment faire pour faire cela, mon attention s'est donc portée sur un script qui perméttait de savoir le texte que l'on avais selectionné. Il sufisais donc d'éffacé la selection et de rajouté des balises
comme ceci
autour de la selection pour mettre de la couleur.

J'ai donc réalisé quelques tests avec ces fonctions assez utile, ça m'avais l'air assez concluant.

Mais au moment de l'intégré a mon éditeur WYSIWYG, un problème est survenue; La fonction ne marche pas si la fonction contenteditable est présente dans la page.

Je ne trouve donc absolument pas comment faire, voici le code que j'avais tapé pour faire mon éditeur WYSIWYG. Si vous connaissez une autre fonction perméttant de connaître le contenu de la selection, merci de me la communiquée.



[javascript:Selection(); Rouge]
Balise de début de rougeBalise de fin de rouge
texte



Merci d'avance pour vos réponses.

12 réponses

zlitus Messages postés 43 Date d'inscription dimanche 13 juin 2004 Statut Membre Dernière intervention 8 janvier 2007
21 août 2006 à 16:17
Arf, le forum as interprété mon code HTML, voici le code non interprété :

<script>
function Selection ()
{
copy = document.selection.createRange().text;
if(copy == "" )
{
document.getElementById('WYSIWYG').innerHTML="
Rouge
";
}
else
{
document.getElementById('WYSIWYG').innerHTML="
"+copy+"
";
}
}
</script>

Rouge


Balise de début de rouge
Balise de fin de rouge



texte
0
zlitus Messages postés 43 Date d'inscription dimanche 13 juin 2004 Statut Membre Dernière intervention 8 janvier 2007
21 août 2006 à 16:19
Il semble qu'il y ai un légé blem de compatibilitée entre le forum et Opera, néamoins, voici le code non interprété avec sauts de lignes...

<script>

function Selection ()

{

copy = document.selection.createRange().text;

if(copy == "" )

{

document.getElementById('WYSIWYG').innerHTML="
Rouge
";

}

else

{

document.getElementById('WYSIWYG').innerHTML="
"+copy+"
";

}

}

</script>


Rouge


Balise de début de rouge
Balise de fin de rouge



texte
0
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
21 août 2006 à 16:24
bonjour,

   on ne voit pas ton code.
   connaitre le contenu de la sélection, il y a plusieurs
      exemple compatible FF,IE ici même,
      mais opera ? montre nous ( puisqu'on ne voit pas ! )
      on te dira si c'est ok avec FF, IE, tant à Opera ?
  ( passe par un éditeur de texte pour mettre ton code )  

cordialement   Bul    

Site

    

M'écrire
0
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
21 août 2006 à 16:30
ah... on voit mieux...
ce que tu utilise est exclusif IE.
avec le Renard de Feu : un truc comme ça :
   element.value.substring(element.selectionStart,element.selectionEnd);
   ( ou pas loin )
à tester donc avec Opera.
cordialement   Bul    Site    M'écrire
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
zlitus Messages postés 43 Date d'inscription dimanche 13 juin 2004 Statut Membre Dernière intervention 8 janvier 2007
21 août 2006 à 16:31
Bonjour, bultez.

Le forum est très peu compatible avec Opera en mode "textbox evolué". C'est pourquoi il as interprété mon HTML & cie.

Ce code n'est pas prévu pour être compatible Firefox qui ne gère pas la fonction ContentEditable. Il est prévu pour être un éditeur WYSIWYG en widget pour Opera 9.x.

Revoici le code qui ne sera je l'espère pas interprété par le forum.
-----------------------------------------------------------------------------
<script>
function Selection ()
{
copy = document.selection.createRange().text;
if(copy == "" )
{
document.getElementById('WYSIWYG').innerHTML="
Rouge
";
}
else
{
document.getElementById('WYSIWYG').innerHTML="
"+copy+"
";
}
}
</script>

Rouge


Balise de début de rouge
Balise de fin de rouge



texte


-----------------------------------------------------------------------------

Il ne marche pas sous Opera 9.0, le script n'arrive pas a determiné quel texte nous avons selectionné quand la fonction Contenteditable est active, si elle n'est pas dans le code, il arrive très bien a savoir ce que l'on as selectionné.

Ces deux fonctions ne peuvents aparement pas êtres dans la même page, en connaissez vous une alternative pour faire ce que je veux faire?
0
zlitus Messages postés 43 Date d'inscription dimanche 13 juin 2004 Statut Membre Dernière intervention 8 janvier 2007
21 août 2006 à 16:32
desoler j'ai répondu pendant que vous répondiez, non non ce n'est pas exclusif IE, ContentEditable foncionne très bien sous Opera 9 ;)
0
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
21 août 2006 à 16:32
précision : à la place de createRange
pas regardé le reste.
cordialement   Bul    Site    M'écrire
0
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
21 août 2006 à 16:37
rien à faire...
je crains que l'on ne  se croise jusqu'au bout....
pour la compatibilité de parlais de createRange qui est exclusif IE (je crois)
cordialement   Bul    

Site

    

M'écrire
0
zlitus Messages postés 43 Date d'inscription dimanche 13 juin 2004 Statut Membre Dernière intervention 8 janvier 2007
21 août 2006 à 16:37
heu, le code pour connaître la selection fonctionne très bien sous opera en temps normlal, mais quand on met
texte
qui permet de faire une sorte d'éditeur WYSIWYG, la fonction ne marche plus...
0
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
21 août 2006 à 16:45
<humour>malalam va encore dire que je fais de
la pub pour une de mes sources, mais c'est pour
la bonne cause, alors : </humour>
j'ai mis

ici même

 une source qui ne fonctionnait
pas avec Opera, je viens de retester avec la
dernière version, et ça semble aller mieux,
si à=ça peut aussi aider...

cordialement   Bul    

Site

    

M'écrire
0
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
21 août 2006 à 16:50
j'avais prévenu que l'on se croiserait jusqu'au bout...
le seule solution que j'ai trouvée pour faire fonctionner
un wysiwyg avec IE,FF,Opera donc auhourd'hui c'est
de passer par u n Iframe en utlisant .designMode='On';
je n'y suis pas parvenu avec un div...
cordialement   Bul   



 Site    M'écrire
0
zlitus Messages postés 43 Date d'inscription dimanche 13 juin 2004 Statut Membre Dernière intervention 8 janvier 2007
21 août 2006 à 19:30
La version prècédente d'Opera ne gérait pas la mise en forme donc probablement AUCUN éditeur WYSIWYG ne marchait avec :/

Et je cherche pas a le faire compatible avec les 3, juste avec Opera pour faire un ptit widget a la Word, ;)

Va encore falloir que je cherche un moyen de faire marché ce truc la mwa :/
0
Rejoignez-nous