Jump to content

execCommand and styles

otester

By otester
in Javascript Help

 Share

Recommended Posts

otester Member

otester

Posted
  • Author
Posted

What have you tried so far, and why does it need to use exec()?

 

Here:

 

<html> 
<head> 
<title></title> 
<script language="JavaScript">

function Init() 

{ 
iView.document.designMode = 'On'; 
}

function bold() 
{ 
iView.document.execCommand('bold', false, null); 
}

function italic() 
{ 
iView.document.execCommand('italic', false, null); 
}

function underline() 
{ 
iView.document.execCommand('underline', false, null); 
}

function font(fontname)
{
iView.document.execCommand(style.font-family:+fontname;, true, null);
}
</script>

<body onLoad="Init()">

<input type="button" onClick="bold()" value="B">
<input type="button" onClick="italic()" value="I">
<input type="button" onClick="underline()" value="U">

<select name="fontChanger" onChange="font(document.quest.fontChanger.value)">
  <option value="Arial">Arial</option>
  <option value="Tahoma">Tahoma</option>
</select>

<br />

<iframe id="iView" style="margin-top: 20px; width: 200px; height:70px"></iframe> 

<br><br>

</body> 

</html>

Link to comment
Share on other sites
otester Member

otester

Posted
  • Author
Posted

I think it's just .execCommand('fontName', false, null) ..?

 

I tried this but I don't think it's right:

 

<html> 
<head> 
<title></title> 
<script language="JavaScript">

function Init() 

{ 
iView.document.designMode = 'On'; 
}

function bold() 
{ 
iView.document.execCommand('bold', false, null); 
}

function italic() 
{ 
iView.document.execCommand('italic', false, null); 
}

function underline() 
{ 
iView.document.execCommand('underline', false, null); 
}

function font()
{
iView.document.execCommand('fontname', false, null);
}
</script>

<body onLoad="Init()">

<input type="button" onClick="bold()" value="B">
<input type="button" onClick="italic()" value="I">
<input type="button" onClick="underline()" value="U">

<input type="button" onClick="font()" value="Change Font">

<!--<select name="fontname" onChange="font(document.quest.fontChanger.value)">
  <option value="Arial">Arial</option>
  <option value="Tahoma">Tahoma</option>
</select>-->

<br />

<iframe id="iView" style="margin-top: 20px; width: 200px; height:70px"></iframe> 

<br><br>

</body> 

</html>

 

Is there a way your meant to tell it which font?

Link to comment
Share on other sites
otester Member

otester

Posted
  • Author
Posted

I think you need to uncomment the drop down and pass an actual font name..?

 

This is what I currently have as a test, alert doesn't show :(

 

<html> 
<head> 
<title></title> 
<script language="JavaScript">

function Init() 

{ 
iView.document.designMode = 'On'; 
}

function bold() 
{ 
iView.document.execCommand('bold', false, null); 
}

function italic() 
{ 
iView.document.execCommand('italic', false, null); 
}

function underline() 
{ 
iView.document.execCommand('underline', false, null); 
}

function font(fontname)
{
if(fontname == Arial)
{
	//iView.document.execCommand('fontname', false, fontname);
	alert("Arial!");
}
if(fontname == Tahoma)
{
	//iView.document.execCommand('fontname', false, fontname);
	alert("Arial!");
}
}
</script>

<body onLoad="Init()">

<FORM ACTION="#" NAME="font2">
<input type="button" onClick="bold()" value="B">
<input type="button" onClick="italic()" value="I">
<input type="button" onClick="underline()" value="U">

<select name="fontChanger" onChange="font(document.font2.fontChanger.value)">
  <option value="Arial">Arial</option>
  <option value="Tahoma">Tahoma</option>
</select>
</FORM>
<br />

<iframe id="iView" style="margin-top: 20px; width: 200px; height:70px"></iframe> 

<br><br>

</body> 

</html>

Link to comment
Share on other sites
otester Member

otester

Posted
  • Author
Posted

I managed to get it pass on variables using the alert function to test, but how do you tell what font to use (this example doesn't work unfortunately)?

 

<html> 
<head> 
<title></title> 
<script language="JavaScript">

var x;

function Init() 

{ 
iView.document.designMode = 'On'; 
}

function bold() 
{ 
iView.document.execCommand('bold', false, null); 
}

function italic() 
{ 
iView.document.execCommand('italic', false, null); 
}

function underline() 
{ 
iView.document.execCommand('underline', false, null); 
}

function font(x)
{
if(x == 1) 
{
	iView.document.execCommand('fontname', false, Arial);
                //alert("Test");
}
}
</script>

<body onLoad="Init()">

<FORM ACTION="#" NAME="font2">
<input type="button" onClick="bold()" value="B">
<input type="button" onClick="italic()" value="I">
<input type="button" onClick="underline()" value="U">

<select name="fontChanger" onChange="font(1)">
  <option value="Arial">Arial</option>
  <option value="Tahoma">Tahoma</option>
</select>
</FORM>
<br />

<iframe id="iView" style="margin-top: 20px; width: 200px; height:70px"></iframe> 

<br><br>

</body> 

</html>

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.