By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,092 Members | 1,650 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,092 IT Pros & Developers. It's quick & easy.

set textarea value to iframe?

P: 26
i am planning on kind of editor by replacing the textarea with iframe so that i could edit the content with rich html.

I am facing weird problem and i cannot set the value of iframe innerHTML with the value of textarea while loading. The idea is hide the textarea after moving the value to iframe rich text editor.

what could be the problem. here is the code

Expand|Select|Wrap|Line Numbers
  1.  
  2. var myeditor; 
  3.  
  4. window.onload = function() 
  5. myeditor = document.getElementById('rte').contentWindow.document; 
  6. myeditor.designMode = "on";
  7.  
  8. }
  9.  
  10. function Start(obj,width,height) {
  11.  
  12.  
  13.     document.write("<img src=\"bold.gif\" name=\"btnBold\" onClick=\"doClick('bold')\">"); 
  14.     document.write("<img src=\"italic.gif\" name=\"btnItalic\" onClick=\"doClick('italic')\">");
  15.     document.write("<img src=\"underline.gif\" name=\"btnUnderline\" onClick=\"doClick('underline')\">");
  16.     document.write("<img src=\"link.gif\" name=\"btnLink\" onClick=\"doLink()\">");
  17.     document.write("<img src=\"unlink.gif\" name=\"btnUnlink\" onClick=\"doClick('unlink')\">");
  18.     document.write("<img src=\"picture.gif\" name=\"btnPicture\" onClick=\"doImage()\">");
  19.     document.write("<br>");
  20.  
  21.     document.write("<iframe id=\"rte\" width=\"" + width + "\" height=\"" + height + "\" style=\"border:1px solid grey\"></iframe>");
  22.  
  23.  LoadData(obj);
  24. }
  25.  
  26. function LoadData(obj)
  27. {
  28.  
  29. myeditor.body.innerHTML= document.getElementById(obj).value;
  30. document.getElementById(obj).style.visibility="hidden";
  31. }
  32. [/html]
  33.  
  34. [html]
  35. <form action="" method="post" >
  36.   <p>
  37.  
  38.  <textarea name="mybox" id="mybox" >This is a <b>bold</b> sample textarea</textarea>
  39.  <script>Start('mybox',600,400);
  40.   </script>
  41.   </p>
  42.   <p>
  43.     <input type="submit" name="Submit" value="Submit">
  44.   </p>
  45. </form>
  46.  
Jul 29 '08 #1
Share this Question
Share on Google+
2 Replies


rohypnol
P: 54
Hello,

Are you sure line #5 is OK? It says
Expand|Select|Wrap|Line Numbers
  1. myeditor = document.getElementById('rte').contentWindow.docum  ent;
There are a couple of spaces between docum and ent

And the other problem is that <script> tags are evaluated as they are read from the HTML file. Your first script sets a window.onload event but that doesn't trigger until after everything has been rendered. In your second paste, on line 5, you're calling the Start() function. This is executed before the window.onload event is triggered, because the JS parser works like this:

  1. define variable myeditor
  2. set the window.onload event
  3. define function Start
  4. define function LoadData
  5. call the Start function
  6. execute window.onload
What you need to so is to put the call to Start() in the window.onload event. Normally you'd have a fixed window.onload function that calls the functions in an array and you'd have another function that adds functions to that array, something like this (not sure if this exact piece of code will work, but you get the idea):
Expand|Select|Wrap|Line Numbers
  1. var load_events = [];
  2. window.onload = function () { for (var i = 0; i < load_events.length; ++i) load_events[ i ](); }
  3. function addLoadEvent(func) { load_events[load_events.length] = func; }
  4.  
  5.  
  6. // ... later ...
  7. function init_myeditor()
  8. {
  9. myeditor = document.getElementById('rte').contentWindow.document;
  10. myeditor.designMode = "on"
  11. }
  12. addLoadEvent(init_myeditor); // no () because we pass the function, not it's result
  13.  
  14.  
  15. // ... later ...
  16. addLoadEvent(function () { Start('mybox', 600, 300); });
This would cause the init_myeditor() function to trigger before the anonymous function that calls Start() and, best of all, it will allow you to add other onload events. All you need to do is make sure that you add them in the right order.

Regards,
Tom
Jul 30 '08 #2

P: 2
i have a problem creating rich text editor .how to call two different function in iframe?
Jul 12 '12 #3

Post your reply

Sign in to post your reply or Sign up for a free account.