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

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

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, 02h43

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, 07h15

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, 11h10

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, 14h51

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, 17h06

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, 17h34

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

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager