Create a WEB online editor-insert HTML tags-Experience Sharing

Source: Internet
Author: User
Create a WEB online editor-insert HTML tags before you think that the WEB online editor is nothing more than replacing the input content and quickly inserting HTML code, but when you do it, it is found that although the principle is that, but the implementation method is not as rigid as I thought. Since there are few things on the UI, it is only now known that the execCommand method in document can solve the problem of inserting HTML tags. This method can insert the required HTML tag at the position of the cursor, note that if you insert a label within a restricted range, you must first focus the range. For example:
A. focus ();
A.document.exe cCommand ('insertbutton ', '', 'btn ');
Here, object a is an iframe object. The first parameter in execcommand is the command of the control to be inserted. The first parameter is unknown, and the second parameter is the ID name. Here, a BUTTON control with ID = btn is inserted, if you want to add other attributes, you only need to write them later. For example
A.document.exe cCommand ('insertbutton', '', 'btn class = btnclass color = red ');

Detailed list of the first parameter
2D-Position allows you to move an absolute position object by dragging it.
AbsolutePosition: Set the position attribute of the element to "absolute" (absolute ).
Set BackColor or obtain the background color of the selected area.
BlockDirLTR is not currently supported.
BlockDirRTL is not currently supported.
Bold switches whether the selected area is in Bold or not.
BrowseMode is not currently supported.
Copy Copies the selected area to the clipboard.
CreateBookmark: Create a bookmarks anchor to obtain the name of the bookmarks anchor of the selected area or insert point.
CreateLink inserts a hyperlink in the selected area or displays a dialog box that allows you to specify the URL of the hyperlink to be inserted for the selected area.
Cut: copy the selected area to the clipboard and delete it.
Delete deletes the selected area.
DirLTR is not currently supported.
DirRTL is not currently supported.
EditMode is not supported currently.
FontName: set or obtain the font of the selected area.
FontSize: set or obtain the font size of the selected area.
Set or obtain the foreground (text) color of the selected area.
FormatBlock sets the formatting label of the current block.
Indent increases the indentation of selected text.
InlineDirLTR is not currently supported.
InlineDirRTL is not currently supported.
InsertButton overwrites the selected area with a button control.
InsertFieldset overwrites the selected area with a box.
InsertHorizontalRule overwrites the selected area with a horizontal line.
InsertIFrame overwrites the selected area with an embedded frame.
InsertImage overwrites the selected area with an image.
InsertInputButton overwrites the selected area with a button control.
InsertInputCheckbox overwrites the selected area with the check box control.
InsertInputFileUpload overwrites the selected area with the file upload control.
InsertInputHidden inserts a hidden control to overwrite the selected area.
InsertInputImage overwrites the selected area with an image control.
InsertInputPassword overwrites the selected zone with a password control.
InsertInputRadio overwrites the selected area with a single-choice button control.
InsertInputReset overwrites the selected area with the Reset Control.
InsertInputSubmit overwrites the selected area with the submit control.
InsertInputText overwrites the selected area with a text control.
InsertMarquee overwrites the selected area with empty subtitles.
InsertOrderedList: select the number list or regular formatting block for the selected area.
InsertParagraph overwrites the selected area with a line break.
InsertSelectDropdown overwrites the selected area with the drop-down box control.
InsertSelectListbox overwrites the selected area with the list box control.
InsertTextArea overwrites the selected area with the multi-line text input control.
InsertUnorderedList switches whether the selected area is a project symbol list or a regular formatting block.
Italic switch to whether the selected area is displayed in Italic or not.
JustifyCenter: place the selected area in the formatting block.
JustifyFull is not currently supported.
JustifyLeft: Align the formatting block of the selected area to the left.
JustifyNone is not currently supported.
JustifyRight: Right-aligned the formatting block of the selected area.
LiveResize forces the MSHTML editor to continually update the appearance of Elements During Scaling or movement, instead of updating the elements only after moving or scaling.
MultipleSelection allows you to select more than one optional site element at a time when you press Shift or Ctrl.
Open.
Outdent reduces the indentation of the formatting block where the selected area is located.
OverWrite switches the insert and OverWrite of the text status.
Paste overwrites the selected area with the clipboard content.
PlayImage is not currently supported.
Print opens the Print dialog box so that you can Print the current page.
Redo.
Refresh the current document.
RemoveFormat deletes the format tag from the selected area.
RemoveParaFormat is not supported currently.
SaveAs saves the current Web page as a file.
SelectAll: select the entire document.
Currently, SizeToControl is not supported.
Currently, SizeToControlHeight is not supported.
Currently, SizeToControlWidth is not supported.
Stop.
StopImage is not currently supported.
StrikeThrough is not currently supported.
Subscript is not currently supported.
Superscript is not currently supported.
UnBookmark deletes all bookmarks from the selected area.
Underline switches whether the Underline of the selected area is displayed.
Undo.
Unlink deletes all hyperlinks from the selected area.
Unselect clears the selected status of the selected area.

In addition, you can insert characters at the position of the current mouse point using the following methods:
Script
Function showselect (){
Var oText = document. selection. createRange ();
Object. text = 111;
}
Script

Zdfzadfasfdasdfadsf

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.