富文字編輯器開發，文字編輯器開發
<body onLoad="def()"><div style="width:500px; text-align:left; margin-bottom:10px "><input type="button" id="bold" style="height:21px; width:21px; font-weight:bold;" value="B" /><input type="button" id="italic" style="height:21px; width:21px; font-style:italic;" value="I" /><input type="button" id="underline" style="height:21px; width:21px; text-decoration:underline;" value="U" /> | <input type="button" style="height:21px; width:21px;"value="L" title="align left" /><input type="button" style="height:21px; width:21px;"value="C" title="center" /><input type="button" style="height:21px; width:21px;"value="R" title="align right" /> | <select id="fonts"><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 id="size"><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 id="color"><option value="black">-</option><option style="color:red;" value="red">-</option><option style="color:blue;" value="blue">-</option><option style="color:green;" value="green">-</option><option style="color:pink;" value="pink">-</option></select> | <input type="button" style="height:21px; width:21px;"value="1" title="Numbered List" /><input type="button" style="height:21px; width:21px;"value="●" title="Bullets List" /><input type="button" style="height:21px; width:21px;"value="←" title="Outdent" /><input type="button" style="height:21px; width:21px;"value="→" title="Indent" /></div>接下來添加iframe：
<iframe id="textEditor" style="width:500px; height:170px;"></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" id="bold" style="height:21px; width:21px; font-weight:bold;" value="B" onClick="fontEdit('bold')" /><input type="button" id="italic" style="height:21px; width:21px; font-style:italic;" value="I" onClick="fontEdit('italic')" /><input type="button" id="underline" style="height:21px; width:21px; text-decoration:underline;" value="U" onClick="fontEdit('underline')" /> | <input type="button" style="height:21px; width:21px;"value="L" onClick="fontEdit('justifyleft')" title="align left" /><input type="button" style="height:21px; width:21px;"value="C" onClick="fontEdit('justifycenter')" title="center" /><input type="button" style="height:21px; width:21px;"value="R" onClick="fontEdit('justifyright')" title="align right" /> |
<select id="fonts" 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 id="size" 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 id="color" onChange="fontEdit('ForeColor',this[this.selectedIndex].value)"> <option value="black">-</option> <option style="color:red;" value="red">-</option> <option style="color:blue;" value="blue">-</option> <option style="color:green;" value="green">-</option> <option style="color:pink;" value="pink">-</option></select> |
<html><head></head><body onLoad="def()"><center><div style="width:500px; text-align:left; margin-bottom:10px "><input type="button" id="bold" style="height:21px; width:21px; font-weight:bold;" value="B" onClick="fontEdit('bold')" /><input type="button" id="italic" style="height:21px; width:21px; font-style:italic;" value="I" onClick="fontEdit('italic')" /><input type="button" id="underline" style="height:21px; width:21px; text-decoration:underline;" value="U" onClick="fontEdit('underline')" /> | <input type="button" style="height:21px; width:21px;"value="L" onClick="fontEdit('justifyleft')" title="align left" /><input type="button" style="height:21px; width:21px;"value="C" onClick="fontEdit('justifycenter')" title="center" /><input type="button" style="height:21px; width:21px;"value="R" onClick="fontEdit('justifyright')" title="align right" /> | <select id="fonts" 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 id="size" 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 id="color" onChange="fontEdit('ForeColor',this[this.selectedIndex].value)"> <option value="black">-</option> <option style="color:red;" value="red">-</option> <option style="color:blue;" value="blue">-</option> <option style="color:green;" value="green">-</option> <option style="color:pink;" value="pink">-</option></select> | <input type="button" style="height:21px; width:21px;"value="1" onClick="fontEdit('insertorderedlist')" title="Numbered List" /><input type="button" style="height:21px; width:21px;"value="●" onClick="fontEdit('insertunorderedlist')" title="Bullets List" /><input type="button" style="height:21px; width:21px;"value="←" onClick="fontEdit('outdent')" title="Outdent" /><input type="button" style="height:21px; width:21px;"value="→" onClick="fontEdit('indent')" title="Indent" /></div><iframe id="textEditor" style="width:500px; height:170px;"></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>
在按鈕裡面設定一個js指令碼，當點擊按鈕，觸發js指令碼來重新整理頁面的顯示格式。
富文字編輯器是什？
這是對應於記事本之類的純文字編輯器而言，就是文本中帶有控制符的文字編輯器，如可以帶文字的字型、字型大小、顏色等控制符，而純文字編輯器編輯的檔案是不帶這些控制符的。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
