939
富文本编辑器开发
<body onLoad="def()"> <div > <input type="button" value="B" /> <input type="button" value="I" /> <input type="button" value="U" /> | <input type="button" value="L" title="align left" /> <input type="button" value="C" title="center" /> <input type="button" value="R" title="align right" /> | <select > <option value="Arial">Arial</option> <option value="Comic Sans MS">Comic Sans MS</option> <option value="Courier New">Courier New</option> <option value="Monotype Corsiva">Monotype</option> <option value="Tahoma">Tahoma</option> <option value="Times">Times</option> </select> <select > <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <select > <option value="black">-</option> <option value="red">-</option> <option value="blue">-</option> <option value="green">-</option> <option value="pink">-</option> </select> | <input type="button" value="1" title="Numbered List" /> <input type="button" value="●" title="Bullets List" /> <input type="button" value="←" title="Outdent" /> <input type="button" value="→" title="Indent" /> </div>接下来添加iframe：
<iframe > </iframe>
<script type="text/javascript">
<!--
textEditor.document.designMode="on";
textEditor.document.open();
textEditor.document.write('<head><style type="text/css">body{ font-family:arial; font-size:13px;}</style></head>');
textEditor.document.close();
function fontEdit(x,y)
{
textEditor.document.execCommand(x,"",y);
textEditor.focus();
}
添加各种编辑用的按钮和下拉框：
<input type="button" value="B" onClick="fontEdit('bold')" />
<input type="button" value="I" onClick="fontEdit('italic')" />
<input type="button" value="U" onClick="fontEdit('underline')" /> |
<input type="button" value="L" onClick="fontEdit('justifyleft')" title="align left" />
<input type="button" value="C" onClick="fontEdit('justifycenter')" title="center" />
<input type="button" value="R" onClick="fontEdit('justifyright')" title="align right" /> |
<select onChange="fontEdit('fontname',this[this.selectedIndex].value)">
<option value="Arial">Arial</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Courier New">Courier New</option>
<option value="Monotype Corsiva">Monotype</option>
<option value="Tahoma">Tahoma</option>
<option value="Times">Times</option>
</select>
<select onChange="fontEdit('fontsize',this[this.selectedIndex].value)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select onChange="fontEdit('ForeColor',this[this.selectedIndex].value)">
<option value="black">-</option>
<option value="red">-</option>
<option value="blue">-</option>
<option value="green">-</option>
<option value="pink">-</option>
</select> |
下面是整个完整的代码：
<html>
<head>
</head>
<body onLoad="def()"><center>
<div >
<input type="button" value="B" onClick="fontEdit('bold')" />
<input type="button" value="I" onClick="fontEdit('italic')" />
<input type="button" value="U" onClick="fontEdit('underline')" /> |
<input type="button" value="L" onClick="fontEdit('justifyleft')" title="align left" />
<input type="button" value="C" onClick="fontEdit('justifycenter')" title="center" />
<input type="button" value="R" onClick="fontEdit('justifyright')" title="align right" /> |
<select onChange="fontEdit('fontname',this[this.selectedIndex].value)">
<option value="Arial">Arial</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Courier New">Courier New</option>
<option value="Monotype Corsiva">Monotype</option>
<option value="Tahoma">Tahoma</option>
<option value="Times">Times</option>
</select>
<select onChange="fontEdit('fontsize',this[this.selectedIndex].value)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select onChange="fontEdit('ForeColor',this[this.selectedIndex].value)">
<option value="black">-</option>
<option value="red">-</option>
<option value="blue">-</option>
<option value="green">-</option>
<option value="pink">-</option>
</select> |
<input type="button" value="1" onClick="fontEdit('insertorderedlist')" title="Numbered List" />
<input type="button" value="●" onClick="fontEdit('insertunorderedlist')" title="Bullets List" />
<input type="button" value="←" onClick="fontEdit('outdent')" title="Outdent" />
<input type="button" value="→" onClick="fontEdit('indent')" title="Indent" />
</div>
<iframe >
</iframe>
</center>
<script type="text/javascript">
<!--
textEditor.document.designMode="on";
textEditor.document.open();
textEditor.document.write('<head><style type="text/css">body{ font-family:arial; font-size:13px; }</style> </head>');
textEditor.document.close();
function def()
{
document.getElementById("fonts").selectedIndex=0;
document.getElementById("size").selectedIndex=1;
document.getElementById("color").selectedIndex=0;
}
function fontEdit(x,y)
{
textEditor.document.execCommand(x,"",y);
textEditor.focus();
}
-->
</script>
</body>
</html>
最后更新：2017-04-03 05:40:19