I have never known what the online editor is like on many websites. Later I found a method for document objects in the document.
Document.exe ccommand (command, false, value );
To know the specific principle. I. First, let's look at an example:
<Div contenteditable = "true" style = "border: dashed blue 2px"> Hello world! </Div>
Save it as an HTML webpage. Open it and check that a cursor is displayed in the Div. This Div becomes editable.
Similarly, span and font can all have the contenteditable = "true" attribute.
Try again below:
<Div contenteditable = "true" style = "border: dashed blue 2px"> Hello world!
</Div>
We can stretch the image.
II. Specific implementation:
1、two pages, blank.html editor.html
2、blank.html is used as an embedded frame of editor.html and as an editing box.
<HTML>
<Body topmargin = "10" leftmargin = "10" bgcolor = "# f6f6f6">
<Div id = "RTC" contenteditable = true> </div>
</Body>
</Html>
3366editor.html is mainly used to process different commands.
<! Doctype HTML public "-// W3C // dtd html 4.0 transitional // en">
<HTML>
<Head>
<Title> new document </title>
<Meta name = "generator" content = "editplus">
<Meta name = "author" content = "">
<Meta name = "keywords" content = "">
<Meta name = "Description" content = "">
<Script language = "JavaScript">
<! --
VaR contenthtml;
Function execommand (command, value)
{
Document.exe ccommand (command, false, value );
}
// Bold
Function black ()
{
VaR OBJ = frames ['ifrtc']. RTC;
OBJ. Focus ();
Execommand ('bold ','');
}
// Italic
Function italic ()
{
VaR OBJ = frames ['ifrtc']. RTC;
OBJ. Focus ();
Execommand ('italic ','');
}
// Underline
Function underline ()
{
VaR OBJ = frames ['ifrtc']. RTC;
OBJ. Focus ();
Execommand ('underline ','');
}
// Indent to the center
Function indent ()
{
VaR OBJ = frames ['ifrtc']. RTC;
OBJ. Focus ();
Execommand ('indent ','');
}
// Indent outward
Function outdent ()
{
VaR OBJ = frames ['ifrtc']. RTC;
OBJ. Focus ();
Execommand ('outdent ','');
}
// Unordered list
Function unorderlist ()
{
VaR OBJ = frames ['ifrtc']. RTC;
OBJ. Focus ();
Execommand ('insertunorderedlist ','');
}
// Ordered list
Function orderlist ()
{
VaR OBJ = frames ['ifrtc']. RTC;
OBJ. Focus ();
Execommand ('insertorderedlist ','');
}
// Insert an image
Function image ()
{
VaR OBJ = frames ['ifrtc']. RTC;
OBJ. Focus ();
ImagePath = Window. Prompt ('Enter the image path :','');
Execommand ('insertimage', ImagePath );
}
// Preview the effect
Function Preview ()
{
VaR htmlcontent = frames ['ifrtc']. RTC. innerhtml;
VaR open = Window. Open ('');
Open.doc ument. Write (htmlcontent );
}
// View the HTML source code in the editing box
Function source ()
{
VaR htmlcontent = frames ['ifrtc']. RTC. innerhtml;
If (document. All. iframediv. style. Display = 'block ')
{
Document. All. iframediv. style. Display = 'none ';
Document.all.html text. value = htmlcontent;
Document. All. textdiv. style. Display = 'block ';
Document.all.html text. Focus ();
Document. All. Source. value = 'html ';
}
Else
{
Document. All. iframediv. style. Display = 'block ';
Document. All. textdiv. style. Display = 'none ';
Frames ['ifrtc']. RTC. innerhtml = document.all.html text. value;
Frames ['ifrtc']. RTC. Focus ();
Document. All. Source. value = 'source ';
}
}
// Increase the height of the editing box
Function add ()
{
Document. All. ifrtc. Height = Document. All. ifrtc. Height * 1 + 50;
}
// -->
</SCRIPT>
</Head>
<Body>
<Table width = "400" border = "0">
<Tr>
<TD> <input type = "button" value = "B" name = "black" onclick = "Black ()"/> </TD>
<TD> <input type = "button" value = "I" name = "italic" onclick = "italic ()"/> </TD>
<TD> <input type = "button" value = "U" name = "underline" onclick = "underline ()"/> </TD>
<TD> <input type = "button" value = "Ul" name = "unorderlist" onclick = "unorderlist ()"/> </TD>
<TD> <input type = "button" value = "ol" name = "orderlist" onclick = "orderlist ()"/> </TD>
<TD> <input type = "button" value = "Left" name = "outdent" onclick = "outdent ()"/> </TD>
<TD> <input type = "button" value = "right" name = "indent" onclick = "indent ()"/> </TD>
<TD> <input type = "button" value = "figure" name = "image" onclick = "image ()"/> </TD>
</Tr>
</Table>
<Div id = "iframediv" style = "display: Block">
<IFRAME id = "ifrtc" width = "400" Height = "200" border = "1" src = "blank.html"> </iframe>
</Div>
<Div id = "textdiv" style = "display: none">
<Textarea id = "htmltext" Cols = "50" rows = "10"> </textarea>
</Div>
<Br>
<Input type = "button" value = "+" name = "add" onclick = "add ()"/> & nbsp;
<Input type = "button" value = "preview" name = "preview" onclick = "Preview ()"/> & nbsp;
<Input type = "button" value = "source code" name = "Source" onclick = "Source ()"/>
</Body>
</Html>
Iii. Postscript:
Here we only write a simple editor. What is important is:
Contenteditable = "true"
And
Document.exe ccommand (command, false, value); for some methods of document, you can view the documents of Ms. Some commands of Execcommand can also be found in the document, which are listed below:
Execcommand (command, false, value); the command in can be the following:
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. |
Createbookmark |
Retrieves the name of a bookmark anchor or creates a bookmark 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. |
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. |
Saveas |
Saves the current web page to a file. |
Unbookmark |
Removes any bookmark 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. |