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