在WEB页面上如何实现文本编辑功能？

Question

<div unselectable="on" align=center style="height:250; width:425;
 background-color:powderblue; border:outset powderblue">
  <br>
  <div id=foo contenteditable align=left 
   style="height:200; width:370;background-color:white; font-face:Arial; padding:3; 
   border:inset powderblue; scrollbar-base-color:powderblue; overflow=auto;">
  </div>
  <br>
 
  <button unselectable="On" onclick='document.execCommand("Bold");foo.focus();'
   style="background-color:powderblue; border-color:powderblue" title="粗体">
   <B>B</B></button>
  <button unselectable="On" onclick='document.execCommand("Italic");foo.focus();'    
   style="background-color:powderblue; border-color:powderblue" title="斜体">
   <B><I>I</I></B></button>
  <button unselectable="On" onclick='document.execCommand("Underline");foo.focus();'
   style="background-color:powderblue; border-color:powderblue;" title="下划线">
   <B><U>U</U></B></button>
<button unselectable="On" onclick='document.execCommand("StrikeThrough");foo.focus();'
   style="background-color:powderblue; border-color:powderblue; text-decoration=line-through"
   title="删除线">
   <B>S</B></button>
  &nbsp;&nbsp;
 
  <button unselectable="On" onclick='document.execCommand("SuperScript");foo.focus();'
   style="background-color:powderblue; border-color:powderblue" title="上标">
   <B>^</B></button>
  <button unselectable="On" onclick='document.execCommand("SubScript");foo.focus();'
   style="background-color:powderblue; border-color:powderblue" title="下标">
   <B>_</B></button>
  &nbsp;&nbsp;
 
  <button unselectable="On" onclick='document.execCommand("InsertOrderedList");foo.focus();'
   style="background-color:powderblue; border-color:powderblue" title="已排序列表">
   <B>OL</B></button>
  <button unselectable="On" onclick='document.execCommand("InsertUnorderedList");foo.focus();'
   style="background-color:powderblue; border-color:powderblue" title="未排序列表">
   <B>UL</B></button>
  <button unselectable="On" onclick='document.execCommand("Outdent");foo.focus();'
   style="background-color:powderblue; border-color:powderblue" title="突出">
   <B>&lt;&lt;</B></button>
  <button unselectable="On" onclick='document.execCommand("Indent");foo.focus();'
   style="background-color:powderblue; border-color:powderblue" title="缩进">
   <B>&gt;&gt;</B></button>
  &nbsp;&nbsp;
 
  <button unselectable="On" onclick='document.execCommand("JustifyLeft");foo.focus();'
   style="background-color:powderblue; border-color:powderblue" title="左对齐">
   <B>|&lt;</B></button>
  <button unselectable="On" onclick='document.execCommand("JustifyRight");foo.focus();'
   style="background-color:powderblue; border-color:powderblue" title="右对齐">
   <B>&gt;|</B></button>
  <button unselectable="On" onclick='document.execCommand("JustifyCenter");foo.focus();'
   style="background-color:powderblue; border-color:powderblue" title="居中">
   <B>&gt;|&lt;</B></button>
  &nbsp;&nbsp;
  <br>
 
  <button unselectable="On" onclick='document.execCommand("Cut");foo.focus();'
   style="background-color:powderblue; border-color:powderblue"><B>剪切</B></button>
  <button unselectable="On" onclick='document.execCommand("Copy");foo.focus();'
   style="background-color:powderblue; border-color:powderblue"><B>复制</B></button>
  <button unselectable="On" onclick='document.execCommand("Paste")'
   style="background-color:powderblue; border-color:powderblue"><B>粘贴</B></button>
  &nbsp;&nbsp;
  <button unselectable="On" onclick='document.execCommand("Overwrite");foo.focus();'
   style="background-color:powderblue; border-color:powderblue"><B>覆盖</B></button>
</div>

Answer 1

The following command identifiers are currently available:BackColor Sets or retrieves the background color of the current selection. 
Bold Toggles the current selection between bold and nonbold. 
ClearAutocompleteForForms Clears saved forms data. 
Copy Copies the current selection to the clipboard. 
CreateBook Retrieves the name of a book anchor or creates a book anchor for the current selection or insertion point. 
CreateLink Retrieves the URL of a hyperlink or creates a hyperlink on the current selection. 
Cut Copies the current selection to the clipboard and then deletes it. 
Delete Deletes the current selection. 
Find Finds and selects text in the current document. 
FontName Sets or retrieves the font for the current selection. 
FontSize Sets or retrieves the font size for the current selection. 
ForeColor Sets or retrieves the foreground (text) color of the current selection. 
FormatBlock Sets or retrieves the current block format tag. 
Indent Increases the indent of the selected text by one indentation increment. 
InsertButton Overwrites a button control on the current selection. 
InsertFieldset Overwrites a box on the current selection. 
InsertHorizontalRule Overwrites a horizontal line on the current selection. 
InsertIFrame Overwrites an inline frame on the current selection. 
InsertImage Overwrites an image on the current selection. 
InsertInputButton Overwrites a button control on the current selection. 
InsertInputCheckbox Overwrites a check box control on the current selection. 
InsertInputFileUpload Overwrites a file upload control on the current selection. 
InsertInputHidden Inserts a hidden control on the current selection. 
InsertInputImage Overwrites an image control on the current selection. 
InsertInputPassword Overwrites a password control on the current selection. 
InsertInputRadio Overwrites a radio control on the current selection. 
InsertInputReset Overwrites a reset control on the current selection. 
InsertInputSubmit Overwrites a submit control on the current selection. 
InsertInputText Overwrites a text control on the current selection. 
InsertMarquee Overwrites an empty marquee on the current selection. 
InsertOrderedList Toggles the current selection between an ordered list and a normal format block. 
InsertParagraph Overwrites a line break on the current selection. 
InsertSelectDropdown Overwrites a drop-down selection control on the current selection. 
InsertSelectListbox Overwrites a list box selection control on the current selection. 
InsertTextArea Overwrites a multiline text input control on the current selection. 
InsertUnorderedList Toggles the current selection between an ordered list and a normal format block. 
Italic Toggles the current selection between italic and nonitalic. 
JustifyCenter Centers the format block in which the current selection is located. 
JustifyLeft Left-justifies the format block in which the current selection is located. 
JustifyRight Right-justifies the format block in which the current selection is located. 
Outdent Decreases by one increment the indentation of the format block in which the current selection is located. 
OverWrite Toggles the text-entry mode between insert and overwrite. 
Paste Overwrites the contents of the clipboard on the current selection. 
Refresh Refreshes the current document. 
RemoveFormat Removes the formatting tags from the current selection. 
SelectAll Selects the entire document. 
UnBook Removes any book from the current selection. 
Underline Toggles the current selection between underlined and not underlined. 
Unlink Removes any hyperlink from the current selection. 
Unselect Clears the current selection. 

Answer 2

To jnkc,
框架出来了，但文本框处于非编辑状态，是不是需要做什么设置？如何设置？谢谢！

Answer 3

<div ContentEditable=true>
可编辑的地方
</div>

Answer 4

<input type=text name=test value="">
上面这些按钮对test中输入的文本不起作用。
我想实现的功能是：在test中输入内容，然后可以对其中的文本进行设置。
大家帮帮忙啊！

Answer 5

IE版本 5.5 或者更高.IE5.0 只能支持对 Iframe 或者 整个页面的编辑

Answer 6

<div ContentEditable=true>
可编辑的地方
<input value="??">
</div>

Answer 7

现在我也面临这个问题，我是打算用richtextbox写个控件来实现这个功能。里面也可以贴图什么的，最后存成rtf格式。

Answer 8

http://www.csdn.net/cnshare/soft/5/5819.shtm