Home > Developer > JavaScript
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.
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
