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

**psychoBob** · 25/05/2006, 01h35

Bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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 ?

**psychoBob** · 25/05/2006, 01h43

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

**Kerod** · 25/05/2006, 06h15

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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">&nbsp;<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é

**psychoBob** · 25/05/2006, 10h10

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Kerod** · 25/05/2006, 13h51

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**psychoBob** · 25/05/2006, 16h06

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.

**Kerod** · 25/05/2006, 16h34

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

**psychoBob** · 25/05/2006, 16h42

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à ?

**Kerod** · 25/05/2006, 17h02

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

Moi j'utilise souvent

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="javascript:fonction()">lien</a>

**psychoBob** · 25/05/2006, 17h04

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

 <a href="onClick="BBcode('b','editeur','contenu');"class="out";"><b>Gras</b></a>

**psychoBob** · 25/05/2006, 17h19

bon j'ai juste mis # dans le href, ça fonctionne plus ou moins mais ça fait saut dans IE.

**Kerod** · 25/05/2006, 17h21

donc moi je dis ca :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 <a href="javascript:BBcode('b','editeur','contenu')" class="out"><b>Gras</b></a>

**psychoBob** · 25/05/2006, 17h41

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

Bon allez, merci Kerod, je viens de mettre des images gif...

**Kerod** · 25/05/2006, 17h45

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

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

**psychoBob** · 25/05/2006, 17h59

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

**Kerod** · 25/05/2006, 18h15

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

et j'obtiens dans le textarea :

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

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

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

**psychoBob** · 25/05/2006, 18h36

Laisses tomber Kerod, laisses tomber...C'est métaphysique ce truc là.

**Kerod** · 25/05/2006, 18h41

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

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

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

JavaScript

Discussions similaires

Partager

Partager