在可编辑的（contentEditable="true"）的DIV中动态设置文本属性
2009-03-19 13:53 Carol Xiong 阅读(2945) 评论(0) 编辑 收藏 举报<HTML>
<HEAD>
<TITLE> Demo for DIV editor </TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
function Exec(sCmd){
var cmd = "",bUserInterface = false,vValue = 0;
switch(sCmd){
case 'b':
cmd = "Bold";
break;
case 'i':
cmd = "Italic";
break;
case 's':
cmd = "FontSize";
vValue = getFontSize();
break;
case 'c':
cmd = "ForeColor";
vValue = getFontColor();
break;
//more
..
}
document.selection.createRange().execCommand(cmd,bUserInterface,vValue);
}
function execute(cmd){
document.selection.createRange().execCommand(cmd);
}
function getFontSize(){
return font_size.options[font_size.selectedIndex].value;
}
function getFontColor(){
//it's not a real color,just show how to use the command;
return "#" + fcolor.style.backgroundColor.toString(16);
}
function forecolor(){
CDC.ShowColor();
var c = CDC.Color;
var obj = fcolor;
obj.style.backgroundColor=c;
Exec('c');
}
//-->
</SCRIPT>
<BR>
<button onclick="Exec('b')"> 粗体 </button> <button onclick="Exec('i')"> 斜体 </button>
<select onchange="Exec('s')" id=font_size><option value=1>一号</option><option value=2>二号</option><option value=3>三号</option><option value=4>四号</option><option value=5>五号</option><option value=6>六号</option><option value=7>七号</option></select>
<button id="fcolor" style="width:40;background:black;cursor:hand;" onclick="forecolor();"></button>
<br /><br />
<div style="border:solid 1px blue;width:100%;height:300;" contentEditable="true" id="titi">
随着昨晚中国男篮的最后一枚金牌入账，声势浩大的中国代表团多哈之旅终于结束。在历经15天的激烈比拼后，中国代表团以165金、88银、63铜，共计316枚奖牌的总成绩，遥遥领先亚洲诸国。作为2008北京奥运会的前哨战，多哈亚运会不仅给中国体育健儿提供了宽广的平台，也为失利者找到反思的空间。毕竟，两年之后，北京奥运大戏拉开序幕；四年之后，广州亚运会接踵而至，留给他们的时间并不多
</div>
<!--<form target="_blank" action = "http://www.baidu.com/s" ><input type="hidden" id="wd" name="wd"><input type="submit" onclick="wd.value=titi.innerHTML"></form> -->
<OBJECT ID="CDC" CLASSID="CLSID:F9043C85-F6F2-101A-A3C9-08002B2F49FB"></OBJECT>
</BODY>
</HTML>
<HEAD>
<TITLE> Demo for DIV editor </TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
function Exec(sCmd){
var cmd = "",bUserInterface = false,vValue = 0;
switch(sCmd){
case 'b':
cmd = "Bold";
break;
case 'i':
cmd = "Italic";
break;
case 's':
cmd = "FontSize";
vValue = getFontSize();
break;
case 'c':
cmd = "ForeColor";
vValue = getFontColor();
break;
//more
.. }
document.selection.createRange().execCommand(cmd,bUserInterface,vValue);
}
function execute(cmd){
document.selection.createRange().execCommand(cmd);
}
function getFontSize(){
return font_size.options[font_size.selectedIndex].value;
}
function getFontColor(){
//it's not a real color,just show how to use the command;
return "#" + fcolor.style.backgroundColor.toString(16);
}
function forecolor(){
CDC.ShowColor();
var c = CDC.Color;
var obj = fcolor;
obj.style.backgroundColor=c;
Exec('c');
}
//-->
</SCRIPT>
<BR>
<button onclick="Exec('b')"> 粗体 </button> <button onclick="Exec('i')"> 斜体 </button>
<select onchange="Exec('s')" id=font_size><option value=1>一号</option><option value=2>二号</option><option value=3>三号</option><option value=4>四号</option><option value=5>五号</option><option value=6>六号</option><option value=7>七号</option></select>
<button id="fcolor" style="width:40;background:black;cursor:hand;" onclick="forecolor();"></button>
<br /><br />
<div style="border:solid 1px blue;width:100%;height:300;" contentEditable="true" id="titi">
随着昨晚中国男篮的最后一枚金牌入账，声势浩大的中国代表团多哈之旅终于结束。在历经15天的激烈比拼后，中国代表团以165金、88银、63铜，共计316枚奖牌的总成绩，遥遥领先亚洲诸国。作为2008北京奥运会的前哨战，多哈亚运会不仅给中国体育健儿提供了宽广的平台，也为失利者找到反思的空间。毕竟，两年之后，北京奥运大戏拉开序幕；四年之后，广州亚运会接踵而至，留给他们的时间并不多
</div>
<!--<form target="_blank" action = "http://www.baidu.com/s" ><input type="hidden" id="wd" name="wd"><input type="submit" onclick="wd.value=titi.innerHTML"></form> -->
<OBJECT ID="CDC" CLASSID="CLSID:F9043C85-F6F2-101A-A3C9-08002B2F49FB"></OBJECT>
</BODY>
</HTML>
