|
|||||||||
|
|||||||||
|
|||||||||
| |
|||
 |
|
|
|
|
|||||||||
|
|||||||||
|
|||||||||
| |
|||
|
|
|
|
| ||||||||||||||||||||||||||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Display Modes |
Dev Articles Community Forums Sponsor:
|
|
|
|
#1
March 29th, 2004, 06:40 AM
|
|||
|
|||
|
WYSIWYG editor: font in IFRAME
hello
I've got a big (for me) problem. I write WYSIWYG editor using IFRAME. Default font in this object (id="content") is times. I want to use e.g. verdana. I can't use body and head tags because the edited text is a part of other html site. I've got init function in body onload event: function initEditor() { content.document.designMode = 'On'; content.document.createStyleSheet('css.css'); } in css.css file i've got: body{font-family:verdana; font-size:11px} And the first line of initEditor works, it goes to edit mode, but the second doesn't (font is still times). But suprising i that when I assign this function to button onclick, it changes the font into verdana. So how to change the font immediately after loading the page, not after button click. I've tried a lot of things and also Alazan's method: http://forums.devarticles.com/archive/t-1737 but in this case i got errors somewhere in: content.document.body.style.fontFamily = "Courier" content.document.body.style.fontSize = "10pt" content.document.body.bgColor = ""; content.document.body.text = '#000000'; iText = content.document.body.innerText; content.document.body.innerHTML = iText; Please help me to solve it... By the way, the thread editor in this forum has default font verdana...And that's what I want to do... ----- best regards -=:kFaZi:=-
|
|
#2
March 29th, 2004, 07:14 AM
|
|||
|
|||
|
Quick and easy way to set the default font in the iframe is to put a command in the onload call: ie
<iframe src="source.htm">" id="content" name="content" onload="content.focus(); content.document.execCommand('fontname','','Verdan a');"> </iframe>
|
|
#3
March 29th, 2004, 02:51 PM
|
|||
|
|||
|
pelfed, it doesn't work...
i tried this way: <iframe src="bookmarks.html" id="content" name="content" onload="content.document.execCommand('FontName',false,'Ver dana'); alert('sometext')"> and here nothing happens (even alert doesn't show) but when I changed the event into onfocus i got alert window but the font didn't changed... i've got no idea how to do it...
|
|
#4
March 29th, 2004, 06:44 PM
|
|||
|
|||
|
Hi
The content.focus(); part of the onload event is important. Also you must make sure that designmode=on. This is probably within your script somewhere - Do you have a URL so that I can look at?
|
|
#5
March 30th, 2004, 03:34 AM
|
|||
|
|||
|
|
#6
March 30th, 2004, 05:49 AM
|
|||
|
|||
|
Try this - slight change to function initEditor() and removed iFrame onload
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> New Document </title> <SCRIPT language="JavaScript" src="cell_border_prop.js"></script> <SCRIPT language="JavaScript" src="popups.js"></script> <SCRIPT language="JavaScript"> var TabId=0; // id tabeli z tego skladane jest idtbody i idtable var TrId=0; // id wiersza tabeli var TdId=0; // id komorki tabeli var first=0; function aa() { content.document.createStyleSheet("css.css"); // content.document.execCommand('FontName', false,'Courier'); } //function document.onreadystatechange() { // content.document.designMode = "On"; //} function initEditor() { content.document.designMode = 'On'; content.focus(); content.document.execCommand('fontname','','Verdan a'); } function backup() { var hidden; hidden=document.getElementById('hid'); hidden.value=frames['content'].document.body.innerHTML; } </SCRIPT> </head> <body onLoad="initEditor()"> <form name="moj" method="post" action="demo1.php"> <iframe src="" height="400" border=1 frameborder=1 marginheight=0 marginwidth=0 scrolling=AUTO noresize width="600" id="content" name="content"><br> </iframe> <SCRIPT> </SCRIPT> <textarea rows="10" cols="40" id="hid" name="kod"></textarea> <input type="button" onclick="backup()" value="backup"> <input type="button" onclick="aa()" value="change font"> <input type="submit" value="submit"> </form> </body> </html>
|
|
#8
March 30th, 2004, 08:23 AM
|
|||
|
|||
|
I'm not sure what browser you are using - but it works for me in firebox(mozilla) and IE. It might be that the included .js scripts are causing an issue. Anyway I have uploaded the above into my own site to see if it works that way (in your chosen browser).
http://www.visualweb.co.uk/html/editor.htm
|
|
#9
March 30th, 2004, 10:53 AM
|
|||
|
|||
 thanks for doing it, now I know what's up. I've got IE but it's only 5th version (i've got winows 98, because I want my editor to run also under win98). As you said I've tested it under mozilla firebird and it works so my problem is in IE version... by the way I've found a solution: before loading the content of Iframe php script places the content between these tags: <html><body style="...">xxxxxxx</body></html>. So in my editor i get font verdana but after submitting form i recieve everything what was between body tags in iframe Maybe it's not very beautiful solution, but it works So thanks a lot for all replies and have a nice day, pelfed and sory for my "not quite good" english :P
|
|
#10
December 23rd, 2004, 06:31 PM
|
|||
|
|||
|
Kfazi, I know the answer to your problem. The heart of the matter is that the iframe initializes only after the main page has finished loading.
So calling the code to set the iframe properties in the "onload" event does nothing, because the iframe is not loaded at the time. To work around this problem you will need something like this: <script language="javascript"> function Init() { editableIframe.document.body.focus(); editableIframe.document.execCommand("FontSize", "", "9"); editableIframe.document.execCommand("FontName", "", "Tahoma"); } </script> <body onload="editableIframe.document.designMode='On';"> <iframe onreadystatechange="if (this.readyState=='complete') Init();" id="editableIframe" runat="server" name="editableIframe" style="width:400px; height:400 px"></iframe> </body>
|
|
| Viewing: Dev Articles Community Forums > Programming > JavaScript Development > WYSIWYG editor: font in IFRAME |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
|
 |
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
