复制代码代码如下:
<Span style = "font-size:14px;"> <!doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<title>富文本编辑器</title>
</head>
<body>
<FieldSet>
<legend>编辑区</legend>
<div>
<form>
字体颜色:
<onchange = "setFontColor(this)">を選択します
<オプション値= "black"> black </option>
<オプション値= "red"> red </option>
<オプション値= "green"> green </option>
<オプション値= "blue"> blue </option>
</select>
字体样式:
<onchange = "setFontStyle(this)">を選択します
<オプション値= "bold"> bold </option>
<オプション値= "italic"> italic </option>
<オプション値= "underline"> underline </option>
<オプション値= "striketthrough"> striketthrough </option>
</select>
字体名称:
<onchange = "setFontFamily(this)">を選択します
<オプション値= "serif"> serif </option>
<オプション値= "sans-serif"> sans-serif </option>
<オプション値= "Monospace"> Monospace </option>
<オプション値= "comic sans ms"> comic sans </option>
</select>
</form>
</div>
<br/>
<div id = "editabletext" contentedable = "true"> </div>
</fieldset>
<script type = "text/javascript">
関数setFontColor(OBJ)
{
document.execcommand( "Forecolor"、false、obj.value);
}
関数SetFontStyle(OBJ)
{
document.execcommand(obj.value、false、null);
}
関数setFontFamily(OBJ)
{
document.execcommand( "fontname"、false、obj.value);
}
</script>
</body>
</html> </span>
在线演示:http://jsfiddle.net/web_code/npnv3/embedded/result/