Liens html pour un éditeur (ajouter une action javascript à un lien html)

Version imprimable

25/05/2006, 01h35
psychoBob

Liens html pour un éditeur (ajouter une action javascript à un lien html)
Bonjour,

Pour mon éditeur de texte, j'utilise des boutons de formulaire pour mettre le texte entre des balises.
Par exemple :
Code:

1 2 3 4 <input type="button" class="out" onClick="BBcode('b','editeur','contenu');" value="Gras">
Donc là on sélectionne le texte à mettre en gras, on clique sur le bouton et il est entouré des balises .

Bon mais ça n'est pas esthétique, alors je voudrais faire un simple lien html, mis en forme avec des CSS et une propriété pour la bordure, le background ainsi qu'un changement de fond au survol etc...

J'ai donc essayé ça :oops: :
Code:

1 2 3 4 <span class="editeur"><a href=""class="out" onClick="BBcode('b','editeur','contenu');"><b>Gras</b></a> </span>
Donc dans le span class j'escomptais placer mes liens pour les différentes actions, la class editeur étant définie dans la feuille de style.

Mais le résultat est nul: En cliquant sur le lien, le texte est mis entre balises, mais celles-ci disparaissent au bout de quelques secondes...:aie:

En plus le lien ne prend pas les propriétés de style qu'il devrait. Bref ma soluce est minable, je dois être fatigué il est tard.

Qu'est ce que vous auriez à me proposer ?
25/05/2006, 01h43
psychoBob

Bon donc hormi le style qui n'est pas tout à fait ça, je confirme qu'en sélectionnant un texte et en cliquant sur le lien, cela place bien le texte entre les balises, mais au bout d'une seconde tout disparait, texte et balises...
En plus ça me fait un lien vers la page d'accueil...

Alors je me suis amusé sans tous les css et etc...je te fais confiance sur les effets de style lol...et donc j'ai ce code et il disparait pas vu que j'ai pas plus d'info je fais comme j'avais envie lol donc voilà :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <html> <body> <script language="javascript"> function change() { document.getElementById('format').innerHTML = '<b>' + document.getElementById('Ztext').value + '</b>'; } </script> <input type="text" id="Ztext"> <a id="cbox" href="javascript:change()">a</a> <div id="format"></div> </body> </html>
pour le reste je veux bien apprendre avec toi surtout comment connaitre le texte sélectionné :D

Je pige pas bien ton bout de code Kerod. Perso mon éditeur fonctionne très bien, je veux juste changer le gros bouton intitulé Gras par un lien html nommé Gras. C'est là que ça foire. Tiens je te file tout le code, si t'en as besoin.

Dans les balises métas :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
 
function BBcode(balise,form,textarea)
{
    switch (navigator.appName)   
    { 
        case "Microsoft Internet Explorer": 
            var haha=document.selection.createRange().text;    
 
            switch(balise)
            {
 
                case 'a':
                    var URL=prompt("Adresse du lien:","");
                    var Titre=prompt("Titre du lien:","");
                    var insertion="["+balise+"=\""+URL+"\"]"+Titre+"[/"+balise+"]";
                break;
                case 'b':
                    var insertion="["+balise+"]"+haha+"[/"+balise+"]";
                break;
                case 'i':
                    var insertion="["+balise+"]"+haha+"[/"+balise+"]";
                break;
                case 'citer':
                    var insertion="["+balise+"]"+haha+"[/"+balise+"]";
                break;
 
                default:
                    var insertion=balise;
                break;
            }
 
            with(document.forms[form].elements[textarea]) 
            {
                focus();
            }
            var sel=document.selection.createRange();
            sel.text=insertion;        
        break;
        case  "Netscape": 
            with(document.forms[form].elements[textarea]) 
            {
                var AvantB = value.substring( 0, selectionStart );
                var B = value.substring( selectionStart, selectionEnd );
                var ApresB = value.substring( selectionEnd, selectionEnd +100000);
            } 
            switch(balise)
            {
 
                case 'a':
                    var URL=prompt("Adresse du lien:","");
                    var Titre=prompt("Titre du lien:","");
                    B="["+balise+"=\""+URL+"\"]"+Titre+"[/"+balise+"]";
                break;
                case 'citer':
                    B="["+balise+"]"+B+"[/"+balise+"]";
                break;
                case 'i':
                    B="["+balise+"]"+B+"[/"+balise+"]";
                break;
                case 'b':
                    B="["+balise+"]"+B+"[/"+balise+"]";
 
                break;
                default:
                    B=balise;
                break;
            }            
            with(document.forms[form].elements[textarea]) 
            {
                focus();
                value= AvantB +""+ B +""+ApresB;
            }
        break;
    }
}

Et dans le formulaire de page, au dessus du textarea :

Code:

1
2
3
4
5
 
  <input type="button" class="out" onClick="BBcode('b','editeur','contenu');" value="Gras">
                                            <input type="button" class="out"   onClick="BBcode('i','editeur','contenu');" value="Italique" >
                                            <input type="button" class="out"    onClick="BBcode('citer','editeur','contenu');" value="Citer un paragraphe">
                                            <input type="button" class="out"   onClick="BBcode('a','editeur','contenu');" value="Lien hypertexte">

Maintenant j'en veux pas des input button, je veux des liens simples html. Ou alors je peux faire des images, ça fonctionne j'ai essayé, mais alors je dois me manger un rollover sinon c'est fade et là ça me gave.

Merci pour le code ca m'apprendra un peu lol
pour le CSS j'ai tenté et donc à toi de voir si ca te convient :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style type="text/css">
<!--
.lien{
    color: #000000;
    text-decoration: none;
    width: auto;
    border: 2px outset #000000;
    background-color: #FFFFFF;
    height: auto;
    padding-top: 2px;
    padding-right: 5px;
    padding-bottom: 2px;
    padding-left: 5px;
    font-weight: bold;
}
.lien:hover{
    width: 100px;
    border: 2px inset #000000;
    background-color: #CCCCCC;
    color: #FFFFFF;
}
-->
</style>
<a href="#" class="lien">B</a>

25/05/2006, 16h06
psychoBob

Mais non mais ça va pas ton truc Kerod. J'ai pas besoin de savoir comment appliquer un style à mon lien, j'ai besoin de faire en sorte que le lien permette d'afficher les balises comme le fait le input button... Pas nécessairement un lien d'ailleur, il suffit d'un mot Gras et en cliquant dessus ça déclenche l'action.
25/05/2006, 16h34
Kerod

Ben j'ai pas compris ce que tu veux faire....
D'ailleurs toujours pas et j'en suis désolé...
Surtout que je sais pas ce que ton input button fait surtout, c'est le ko total de mon coté...je suis perdu :cry:
25/05/2006, 16h42
psychoBob

Nom de Diou, je me suis exprimé comme un cheval alors !

Bon alors c'est simple.
J'ai un textarea avec un bouton gras, un bouton italique, un bouton citer.
Je surligne un texte dans le textarea pour le sélectionner.
Je clique sur le bouton gras.
Le texte sélectionné se trouve entouré des balises .
Jusque là c'est très exactement comme n'importe quel éditeur de forum phpBB par exemple.

Maintenant :
Mes boutons gras et italique, par exemple, sont des boutons de type formulaire, comme ici le bouton "envoyer la réponse". Sauf qu'il y a écrit gras dessus.
Bon et bien, je trouve que ce input=button n'est pas très esthétique sur un éditeur de texte.
Donc je voudrais le remplacer par un simple texte/ou lien, que je stylise par une feuille de style (mais je sais la faire la feuille de style).
Ce que je n'arrive pas à faire c'est à appeler les fonctions à partir d'un simple lien alors que c'est simple depuis une image ou un bouton de formulaire.

Je suis compréhensible là ?
25/05/2006, 17h02
Kerod

ton problème est donc l'appel d'une fonction depuis un lien <a> si j'ai bien compris :roll:

Moi j'utilise souvent

Code:

<a href="javascript:fonction()">lien</a>
25/05/2006, 17h04
psychoBob

voili voilou t'as bien compris !

Quelqu'un aurait-il donc un bout de code pour y arriver dans ce cas précis ?

Parce que j'ai déjà essayé ça, mais ça fonctionne pas, ça donne le bug que j'ai expliqué :

Code:

<a href="onClick="BBcode('b','editeur','contenu');"class="out";"><b>Gras</b></a>
25/05/2006, 17h19
psychoBob

bon j'ai juste mis # dans le href, ça fonctionne plus ou moins mais ça fait saut dans IE.
25/05/2006, 17h21
Kerod

donc moi je dis ca :

Code:

<a href="javascript:BBcode('b','editeur','contenu')" class="out"><b>Gras</b></a>
25/05/2006, 17h41
psychoBob

ouais bah c ce que j'avais essayé sauf que dans mon exemple deux posts au dessus, j'ai mis des ; qui n'y étaient pas dans mon test...:aie:

Bon allez, merci Kerod, je viens de mettre des images gif... :mouarf:
25/05/2006, 17h45
Kerod

:mouarf::mouarf::mouarf: La facilité mdr...je vais me coucher moi ca m'a tué :mouarf:

Mais tout de même étonnant que ca fonctionne pas avec le <a> si j'avais tout le code (la definition du form) j'aurai testé mais bon :roll:
25/05/2006, 17h59
psychoBob

Bah si tu veux tester, le form prend le name "editeur" et le textarea prend le name "contenu".

J'ai même jarté les images et je garde mes inputs buton, allez hop, c'est rustique et c'est du solide.

M'enfin si tu trouve l'astuce pour le <a> Kerod, dis toujours ça aura
au moins servi à apprendre un truc ;)

Ben j'ai essayé comme j'avais et bizarrement ca fonctionne nickel :
je mets ca :
Code:

1 2 3 4 5 6 7 <form name="editeur"> <textarea name="contenu"></textarea> <a href="javascript:BBcode('b','editeur','contenu');">Gras</a>  <a href="javascript:BBcode('i','editeur','contenu');">Italique</a>  <a href="javascript:BBcode('citer','editeur','contenu');">Citer un paragraphe</a>  <a href="javascript:BBcode('a','editeur','contenu');">Lien hypertexte</a> </form>
et j'obtiens dans le textarea :

Citation:

fds text[citer]tregdfg[/citer][a="http://www.google.fr"]google[/a]

C'est pas ca que l'on doit obtenir ??? :roll:

ben les balise b et i sont prisent en compte par le forum donc apparaissent pas :mouarf:

25/05/2006, 18h36
psychoBob

Laisses tomber Kerod, laisses tomber...C'est métaphysique ce truc là.
25/05/2006, 18h41
Kerod

Ouais ben c'est pas pret d'arriver moi tant que je comprends pas pourquoi ca fonctionne pas je dors pas lol...

Mais là ca fonctionne chez moi avec FF mais j'ai pas testé avec IE...:roll:

Edit : C'est officiel tu as un problème du coté de ton navigateur lol...C'est nickel IE et FF de mon coté :D