execCommand and styles

otester · September 6, 2010

How do you get the execCommand to change the style of text?

Currently have a drop down box and used Google but can't find anything on the subject

Any ideas?

Thanks,

otester

Adam · September 6, 2010

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

otester · September 6, 2010

Quote

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>

Adam · September 6, 2010

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

otester · September 6, 2010

Quote

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?

Adam · September 6, 2010

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

otester · September 6, 2010

Quote

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>

otester · September 6, 2010

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>

Sign In

execCommand and styles

Recommended Posts

otester

Link to comment

Share on other sites

Adam

Link to comment

Share on other sites

otester

Link to comment

Share on other sites

Adam

Link to comment

Share on other sites

otester

Link to comment

Share on other sites

Adam

Link to comment

Share on other sites

otester

Link to comment

Share on other sites

otester

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information