Internet Explorer et designMode: bug?

Internet Explorer et designMode: bug? - HTML/CSS - Programmation

Marsh Posté le 22-07-2007 à 17:54:39    

Je suis en train de tester la fonctionalité designMode, qui permet de rendre le contenu d'un document éditable, designMode étant -- contrairement à contentEditable -- disponible dans tous les principaux navigateurs (apparement) (et de toute façon c'est juste pour une démo, donc Lynx ne m'importe que peu).

 

Histoire de tester, j'ai donc créé une simple iframe (contenant le document à éditer) et j'ai ajouté un joli bouton pour switcher entre éditable et non éditable:

Code :
  1. <div>
  2.     <iframe src="/testframe" id="editor-window" 
  3.         name="editorWindow"
  4.         style="height: 250px;width: 500px;"></iframe>
  5. </div>
  6. <form action="#" method="get">
  7.     <div>
  8.         <button onclick="toggleEdit(); return false;" id="toggle">
  9.             Not editable
  10.         </button>
  11.     </div>
  12. </form>


Et un bout de JS pour switcher entre editable et non editable:

Code :
  1. function doEdit(id, makeEditable) {
  2.     var frame = document.getElementById(id);
  3.     if(!frame.contentWindow || !frame.contentWindow.document
  4.          || !frame.contentWindow.document.designMode) {
  5.         return;
  6.     }
  7.     frame.contentWindow.document.designMode = 
  8.         makeEditable?"On":"Off";
  9. }
  10.  
  11. var editable = false;
  12. function toggleEdit() {
  13.     editable = !editable;
  14.     doEdit("editor-window", editable);
  15.     document.getElementById('toggle').innerHTML =
  16.         editable?"Editable":"Not editable";
  17. }


Sous Firefox et Opera aucun problème (iframe read-only, je toggle ça passe read-write, je re-toggle ça repasse read-only, win) par contre j'ai comme un souci sous MSIE tout va bien pour passer de read-only à read-write, mais quand je fais le passage inverse il supprime toutes les modifs effectuées dans l'iframe ce sagoin [:pingouino]

 

Donc je voulais savoir si j'avais genre raté un truc, où si il faut vraiment se taper le transfert des données entre les modes éditable et non éditable à la main sous MSIE [:androids974]


Message édité par masklinn le 22-07-2007 à 17:57:33

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 22-07-2007 à 17:54:39   

Reply

Marsh Posté le 22-07-2007 à 21:48:07    

Ca ne fonctionne effectivement pas sous IE 6.0 ( http://msdn.microsoft.com/archive/ [...] efault.asp )
Par contre tu peux passer par contentEditable :

 
Code :
  1. <html>
  2. <head>
  3. </head>
  4. <body>
  5. <script type="text/javascript">
  6.     function doEdit(id, makeEditable) {
  7.         var frame = document.getElementById(id);
  8.         frame.contentEditable =  makeEditable?"true":"false";
  9.     }
  10.    
  11.     var editable = false;
  12.     function toggleEdit() {
  13.         editable = !editable;
  14.         doEdit("editor-window", editable);
  15.         document.getElementById('toggle').innerHTML =
  16.             editable?"Editable":"Not editable";
  17.     }
  18. </script>
  20.     <div>
  21.         <div id="editor-window" contenteditable="false"
  22.             name="editorWindow"
  23.             style="height: 250px;width: 500px;"></div>
  24.     </div>
  25.     <form action="#" method="get">
  26.         <div>
  27.             <button onclick="toggleEdit(); return false;" id="toggle">
  28.                 Not editable
  29.             </button>
  30.         </div>
  31.     </form>
  32. </body>
  33. </html>

Message cité 1 fois
Message édité par Shinuza le 22-07-2007 à 21:48:19

---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
Reply

Marsh Posté le 22-07-2007 à 22:59:48    

Et c'est comme ça que font la plupart des RTE nan ?

Reply

Marsh Posté le 22-07-2007 à 23:37:40    

Shinuza a écrit :

Ca ne fonctionne effectivement pas sous IE 6.0 ( http://msdn.microsoft.com/archive/ [...] efault.asp )
Par contre tu peux passer par contentEditable :
 

Code :
  1. <html>
  2. <head>
  3. </head>
  4. <body>
  5. <script type="text/javascript">
  6.     function doEdit(id, makeEditable) {
  7.         var frame = document.getElementById(id);
  8.         frame.contentEditable =  makeEditable?"true":"false";
  9.     }
  10.    
  11.     var editable = false;
  12.     function toggleEdit() {
  13.         editable = !editable;
  14.         doEdit("editor-window", editable);
  15.         document.getElementById('toggle').innerHTML =
  16.             editable?"Editable":"Not editable";
  17.     }
  18. </script>
  20.     <div>
  21.         <div id="editor-window" contenteditable="false"
  22.             name="editorWindow"
  23.             style="height: 250px;width: 500px;"></div>
  24.     </div>
  25.     <form action="#" method="get">
  26.         <div>
  27.             <button onclick="toggleEdit(); return false;" id="toggle">
  28.                 Not editable
  29.             </button>
  30.         </div>
  31.     </form>
  32. </body>
  33. </html>



sauf que contentEditable ne fonctionne pas sous FF, et je sais pas si il fonctionne sous opera. Dans tous les cas ça force à avoir 2 codepath séparés, ce qui est franchement naze :o


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 23-07-2007 à 11:25:33    

Wé, mais c'est IE qu'é naze à la base, le code est pas franchement différent en plus :o


---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed