Hein? Si tu met l'attribut onfocus sur ton DIV ca marche?
Sur IE et sur Firefox???
Hein? Si tu met l'attribut onfocus sur ton DIV ca marche?
Sur IE et sur Firefox???
Sur firefox j'arrive pas a editer mes div...
Sur IE7 ca marche niquel.
D'ailleurs ca m'arrangerait de pouvoir editer mes div avec firefox au passage si qq'un a une solution...
Voici le code de mes div:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5 <DIV class=box id=boxHandle1 style="Z-INDEX: 1; FILTER: alpha(opacity=100); LEFT: 179px; POSITION: relative; TOP: 134px; opacity: undefined" onclick="changeZindex('boxHandle1')"> <DIV class=lefthandle id=lefthandle1></DIV> <DIV class=righthandle id=righthandle1 onclick="delDiv('boxHandle1')"></DIV> <DIV id=boxContent1 contentEditable=true onfocus="javascript:alert('salut');">ici votre image ou votre texte</DIV></DIV>
C'est bien ce qu'il me semblait on ta dit qu'il n'existait pas de onfocus sur les divs j'en ai marre de me repeté! Ca marche sur IE parce que il ne respecte pas les standards! Mais pour FF tu devra trouvé une solution comme on te le dit depuis le debut.....
Et en passant rajouté des attributs a tes DIV comme cotenteditable ce n'est pas non plus respecté les normes W3C....
Mouais, encore un truc qui ne fonctionne que sur IE ..
contentEditable ne marche que sur IE. Ca ne devrait même pas exister un machin pareil.
Je t'ai grillé Bisûnûrs
sinon il faut passer pas onkeydown et onkeyup pour rendre le div editable ...
Ma page Developpez - Mon Blog Developpez
Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
Votre post est résolu ? Alors n'oubliez pas le Tag
Venez sur le Chat de Développez !
Il n'existe pas d'équivalent de contentEditable pour FF?
Voici les attributs standards des DIV:
http://giminik.developpez.com/xhtml/div.html
à adapter pour Ffx ...
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14 <script type='text/javascript' language="JavaScript"> function akChk() { var touche = event.keyCode document.getElementById('page').innerHTML+=String.fromCharCode(event.keyCode) } </script> </head> <body onkeydown="akChk()"> <div id='page'></div> </body>
Ma page Developpez - Mon Blog Developpez
Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
Votre post est résolu ? Alors n'oubliez pas le Tag
Venez sur le Chat de Développez !
reste à brider les caractères saisissables ...
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14 <script language="JavaScript"> function akChk(e) { var touche = e.keyCode ||e.charCode document.getElementById('page').innerHTML+=String.fromCharCode(touche) } </script> </head> <body onkeydown="akChk(event)"> <div id='page'></div> </body>
Ma page Developpez - Mon Blog Developpez
Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
Votre post est résolu ? Alors n'oubliez pas le Tag
Venez sur le Chat de Développez !
Parce que si j'ai utilisé contentEditable, c'est pour pouvoir editer le contenu du div avec le code suivant:
Comment faire pour pouvoir effectuer ces actions dans un textarea, ce qui me permettrait de faire en sorte que ca marche dan firefox et ainsi de respecter les normes W3C!!
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138 <div id="ToolBar_1" class="ToolBar" style="display : block; padding-bottom : 2px;"> <img unselectable="on" src="doc/orange_spacer.gif" title="" /> <img src="doc/orange_cut.gif" onclick="doCommand('cut');" title="Couper (Ctrl X)" unselectable="on" class="ToolOut" onmouseover="this.className='ToolOver';" onmouseout="this.className='ToolOut';" /> <img src="doc/orange_copy.gif" onclick="doCommand('copy');" title="Copier (Ctrl C)" unselectable="on" class="ToolOut" onmouseover="this.className='ToolOver';" onmouseout="this.className='ToolOut';" /> <img src="doc/orange_paste.gif" onclick="doCommand('paste');" title="Coller (Ctrl V)" unselectable="on" class="ToolOut" onmouseover="this.className='ToolOver';" onmouseout="this.className='ToolOut';" /> <img unselectable="on" src="doc/orange_spacer.gif" title="" /> <img src="doc/orange_undo.gif" onclick="doCommand('undo');" title="Annuler (Ctrl Z)" unselectable="on" class="ToolOut" onmouseover="this.className='ToolOver';" onmouseout="this.className='ToolOut';" /> <img src="doc/orange_redo.gif" onclick="doCommand('redo');" title="Rétablir (Ctrl Y)" unselectable="on" class="ToolOut" onmouseover="this.className='ToolOver';" onmouseout="this.className='ToolOut';" /> <img unselectable="on" src="doc/orange_spacer.gif" title="" /> <img src="doc/orange_link.gif" onclick="doCommand('createLink');" title="Lien hypertexte" unselectable="on" class="ToolOut" onmouseover="this.className='ToolOver';" onmouseout="this.className='ToolOut';" /> <img src="doc/orange_nolink.gif" onclick="doCommand('Unlink');" title="Supprimer un lien hypertexte" unselectable="on" class="ToolOut" onmouseover="this.className='ToolOver';" onmouseout="this.className='ToolOut';" /> <img unselectable="on" src="doc/orange_spacer.gif" title="" /> <img src="doc/orange_image.gif" onclick="doCommand('insertImage');" title="Image" unselectable="on" class="ToolOut" onmouseover="this.className='ToolOver';" onmouseout="this.className='ToolOut';" /> <img src="doc/orange_hr.gif" onclick="doCommand('InsertHorizontalRule');" title="Ligne horizontale" unselectable="on" class="ToolOut" onmouseover="this.className='ToolOver';" onmouseout="this.className='ToolOut';" /> <img src="doc/orange_liste_puce.gif" onclick="doCommand('InsertUnorderedList');" title="Liste à puces" unselectable="on" class="ToolOut" onmouseover="this.className='ToolOver';" onmouseout="this.className='ToolOut';" /> <img src="doc/orange_liste_num.gif" onclick="doCommand('InsertOrderedList');" title="Liste à numéros" unselectable="on" class="ToolOut" onmouseover="this.className='ToolOver';" onmouseout="this.className='ToolOut';" /> <img src="doc/orange_indent.gif" onclick="doCommand('Indent');" title="Augmenter le retrait - Décaler à droite" unselectable="on" class="ToolOut" onmouseover="this.className='ToolOver';" onmouseout="this.className='ToolOut';" /> <img src="doc/orange_outdent.gif" onclick="doCommand('Outdent');" title="Diminuer le retrait - Décaler à gauche" unselectable="on" class="ToolOut" onmouseover="this.className='ToolOver';" onmouseout="this.className='ToolOut';" /> </div> // exécuter les commandes function doCommand (idCommand){ setFocus(); oSelection = document.selection.createRange(); // Cas où police texte if(idCommand == "FontName"){ if(arguments[1] != 1){ document.execCommand(idCommand,false, arguments[1]); setFocus(); document.FontForm.FontSelect.selectedIndex = 0; return; } } // Cas où taille texte else if(idCommand == "FontSize"){ if(arguments[1] != 0){ document.execCommand(idCommand,false, arguments[1]); setFocus(); document.FontForm.FontSizeSelect.selectedIndex = 0; return; } } // Cas "ForeColor" ou "FormatBlock" ou "FormatBlock" else if(idCommand == "ForeColor" || idCommand == "BackColor" || idCommand == "FormatBlock"){ document.execCommand(idCommand,false, arguments[1]); setFocus(); return; } // Cas où suppression d'une ancre else if (idCommand == 'UnBookmark'){ if (oSelection.text == ""){ // s'il n'y apas de texte sélectionné // on essaye de sélectionner le caractère suivant oSelection.moveEnd("character", +1); oSelection.collapse(); oSelection.expand("character"); if(oSelection.text != " "){ // si le caratère suivant n'est pas un "espace", on sélectionne le précedent oSelection.moveEnd("character", -2); oSelection.collapse(); oSelection.expand("character"); if(oSelection.text != " "){ // si ce n'est toujours pas un espace, on ne sélectionne rien oSelection.collapse(); } } } oSelection.select(); oSelection = document.selection.createRange(); } // Cas où insertion d'une ancre else if (idCommand == 'CreateBookmark'){ var ancre = prompt("Entrez le nom de l'ancre",""); if(ancre == ""){ alert("Vous devez donner un nom à votre ancre"); return; } else if(ancre){ if (oSelection.text == ""){ // s'il n'y apas de texte sélectionné // on essaye de sélectionner le caractère suivant oSelection.moveEnd("character", +1); oSelection.collapse(); oSelection.expand("character"); if(oSelection.text != " "){ // si le caratère suivant n'est pas un "espace", on sélectionne le précedent oSelection.moveEnd("character", -2); oSelection.collapse(); oSelection.expand("character"); if(oSelection.text != " "){ // si ce n'est toujours pas un espace, on sélectionne le mot oSelection.collapse(); oSelection.expand("word"); if(oSelection.text.lastIndexOf(" ") != -1){ // si le mot se termine par un espace => ne pas sélectionner l'espace oSelection.moveEnd("character", -1); } } } oSelection.select(); oSelection = document.selection.createRange(); } document.execCommand(idCommand, false, ancre); } return; } // Cas où insertion d'une image else if (idCommand == "insertImage"){ Calk = window.document.getElementById("Avertissement_0"); Calk.style.display = 'block' ; document.execCommand(idCommand, true); Calk.style.display = 'none' ; return; } // Exécute les autres commandes telles quelles document.execCommand(idCommand); }
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2 <div id="div1" onclick="swapType(this, document.getElementById('text1'))" style="width:200px;height:200px;font-family:arial;font-size:12px">Texte</div> <textarea onblur="swapType(this, document.getElementById('div1'))" id="text1" style="border:0;display:none;width:200px;height:200px;font-family:arial;font-size:12px;overflow:auto">Texte</textarea>
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11 function swapType(obj1, obj2){ obj1.style.display = 'none'; obj2.style.display = 'block'; if(obj1.value){ obj2.innerHTML = obj1.value; } else{ obj2.value = obj1.innerHTML; obj2.focus(); } }
contentEditable ne marche pas et ne marchera jamais dans firefox ...
Ma page Developpez - Mon Blog Developpez
Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
Votre post est résolu ? Alors n'oubliez pas le Tag
Venez sur le Chat de Développez !
Tu peux même gérer les sauts de ligne avec un replace ..
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7 if(obj1.value){ obj2.innerHTML = obj1.value.replace(/\n/g,'<br>'); } else{ obj2.value = obj1.innerHTML.replace(/<br>/g,'\n'); obj2.focus(); }
Parce que ma problematique, c'est avoir un div dragable ou on peut ajouter du texte et mettre en forme ce texte, et de meme avoir la possibilité d'ajouter une image dans un div lui aussi draggable avec la possibilité de l'agrandir.
La difficulté est d'avoir un div général avec une barre d'outils au dessus, et de pouvoir ajouter autant de div textee ou de div image dans ce div général tout en ayany la possibilité d'utiliser la barre d'outil pour mettre en forme le texte et pour ajouter des images...
En gros dans ma barre d'outil il y aurait un bouton "ajouter div texte" un autre "ajouter div image" et tous les boutons des editeurs de texte(changer la police, la taille du texte, la couleur du texte, ajouter un lien...)
En gros j'arrive a avoir des div draggables où je peux modifier le texte (en utilisant prototype.js et ces fonctions sympathiques), mais je n'arrive pas à mettre en forme le contenu des textarea des div draggables a partir des boutons de ma barre d'outil...
Est ce que mon probleme est clair?
Si quelqu'un a des pistes pour m'aiguiller sur une piste me permettant d'avoir une barre d'outil que je puisse utiliser sur des textarea ca serait génial..
Peut etre y a t'il moyen de faire ca avec prototype.js, ce qui serait génial...
Dans ce cas tu peux même essayer d'intégrer FCKEditor.
Vu que tu intègres Prototype, tu n'es plus à ça près.
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager