Detailed explanation and example display of the execCommand command in JavaScript

 

Reprinted from: http://www.abcd9.com/?post=182

 

The execCommand method in JavaScript executes a command on the current document, the current selection, or a given range. The following format is commonly used when processing html data: document.execCommand(sCommand[, interactive mode, dynamic parameters]), where sCommand is the command parameter, if the interactive mode parameter is true, a dialog box will be displayed, if it is false, the dialog box will not be displayed, dynamic Parameters are generally available values ​​or property values ​​(true in the example below).

Usage example: document.execCommand("2D-Position","false","true"); 

指令参数及意义:

2D-Position allows absolutely positioned objects to be moved by dragging.

AbsolutePosition sets the element's position property to "absolute" (absolute).

BackColor Sets or gets the background color of the current selection.

BlockDirLTR is not currently supported.

BlockDirRTL is not currently supported.

Bold Toggles the bold display of the current selection.

BrowseMode is not currently supported.

Copy Copies the current selection to the clipboard.

CreateBookmark Creates a bookmark anchor or gets the name of the bookmark anchor for the current selection or insertion point.

CreateLink inserts a hyperlink on the current selection, or displays a dialog box that allows the user to specify the URL of the hyperlink to be inserted for the current selection.

Cut Copies the current selection to the clipboard and deletes it.

Delete Deletes the current selection.

DirLTR is not currently supported.

DirRTL is not currently supported.

EditMode is not currently supported.

FontName Sets or gets the font of the current selection.

FontSize Sets or gets the font size of the current selection.

ForeColor Sets or gets the foreground (text) color of the current selection.

FormatBlock Sets the current block formatting label.

Indent Increases the indent of the selected text.

InlineDirLTR is not currently supported.

InlineDirRTL is not currently supported.

InsertButton overlays the current selection with a button control.

InsertFieldset Covers the current selection with a box.

InsertHorizontalRule Covers the current selection with a horizontal line.

InsertIFrame overlays the current selection with an iframe.

InsertImage overlays the current selection with an image.

InsertInputButton overlays the current selection with a button control.

InsertInputCheckbox overlays the current selection with a checkbox control.

InsertInputFileUpload Overwrites the current selection with a file upload control.

InsertInputHidden Inserts a hidden control over the current selection.

InsertInputImage overlays the current selection with an image control.

InsertInputPassword Overwrites the current selection with a password control.

InsertInputRadio overlays the current selection with a radio button control.

InsertInputReset Overwrites the current selection with the reset control.

InsertInputSubmit Overwrites the current selection with a submit control.

InsertInputText overlays the current selection with a text control.

InsertMarquee Overwrites the current selection with an empty subtitle.

InsertOrderedList Toggles whether the current selection is a numbered list or a regular formatted block.

InsertParagraph Overwrites the current selection with a newline.

InsertSelectDropdown Covers the current selection with a dropdown control.

InsertSelectListbox Covers the current selection with a listbox control.

InsertTextArea Overwrites the current selection with a multi-line text input control.

InsertUnorderedList Toggles whether the current selection is a bulleted list or a regular formatted block.

Italic Toggles whether the current selection is italicized or not.

JustifyCenter places the current selection in the formatting block it is in.

JustifyFull is not currently supported.

JustifyLeft Left-justifies the formatting block where the current selection is located.

JustifyNone is not currently supported.

JustifyRight Right-justifies the formatting block where the current selection is located.

LiveResize forces the MSHTML editor to continuously update the element's appearance while zooming or moving, rather than just after the move or zoom is complete.

MultipleSelection allows more than one site selectable element to be selected at a time when the user holds down the Shift or Ctrl key.

Open is not currently supported.

Outdent Reduces the indent of the formatting block in which the selection is located.

OverWrite toggles the insertion and overwriting of the text state.

Paste Overwrites the current selection with the clipboard contents.

PlayImage is not currently supported.

Print Opens a print dialog so that the user can print the current page.

Redo is not currently supported.

Refresh refreshes the current document.

RemoveFormat Removes formatting tags from the current selection.

RemoveParaFormat is not currently supported.

SaveAs saves the current web page to a file.

SelectAll selects the entire document.

SizeToControl is not currently supported.

SizeToControlHeight is not currently supported.

SizeToControlWidth is not currently supported.

Stop is not currently supported.

StopImage is not currently supported.

StrikeThrough is not currently supported.

Subscript is not currently supported.

Superscript is not currently supported.

UnBookmark Removes all bookmarks from the current selection.

Underline Toggles whether the underline of the current selection is displayed or not.

Undo is not currently supported.

Unlink Removes all hyperlinks from the current selection.

Unselect clears the selected state of the current selection.

Example code:  
/*
*The function executes the copy instruction
*/
function fn_doufucopy(){
edit.select();
document.execCommand('Copy');
}
/*
*The function executes the paste instruction
*/
function fn_doufupaste() { 
tt .focus();
document.execCommand('paste');

/*
*This function is used to create a hyperlink
*/
function fn_creatlink()
{
  document.execCommand('CreateLink',true,'true');  // A dialog box for entering URL will pop up
  //document.execCommand('CreateLink',false,'http://www.abcd9.com/');
}
/*
*This function is used to set the selected block as the specified background color
*/
function fn_change_backcolor()
{
  document.execCommand('BackColor',true,'#FFbbDD');  //true or false can be used
}
/*
*This function is used to set the selected block to the specified foreground color and change the font size of the selected block ,Change the font, the font becomes bold and italic
*/
function fn_change_forecolor()
{
document.execCommand('ForeColor',false,'#BBDDCC');  // Specify the foreground color. Both true or false can be
document.execCommand('FontSize',false,7);   //Specify the background color. Either true or false can be
document.execCommand('FontName',false,'standard italic');   // The font must be a font supported by the system. Both true or false can be
document.execCommand('Bold');  // Bold
document.execCommand('Italic'); 




function fn_change_selection()
{
document.execCommand('Underline');  //Underline the selected text
document.execCommand('StrikeThrough');  //Draw a thick line on the selected text
document.execCommand('SuperScript');  // Thin the selected part of the text
document.execCommand('Underline');   // Cancel the underline of the selected block
}
/*
*This function is used to arrange the selected block into different formats
*/
function fn_format ()
{
document.execCommand('InsertOrderedList');  //Ordered order
document.execCommand('InsertUnorderedList');  //Solid unordered arrangement
document.execCommand('Indent');  //Hollow unordered arrangement
}
/*
*This function is used to cut or delete the selected block
*/
function fn_CutOrDel()
{
//document.execCommand('Delete');  //Delete the selected block
document.execCommand('Cut');  //Cut the selected block
}
/*
*This function is used to reset the selected block for a corresponding object
*/
function fn_InsObj()
{
/*
  ************************************ ******
  * The following commands all reset an object for the selected block;
  * If there is no special description, the second parameter true or false is the same;
  * The third parameter represents the id of the object;
  * It can be controlled by its specified id in javascript
  ************************************ *****
*/
/*Reset to a button (InsertButton is the same as InsertInputButtong,
except that the former is a button and the latter is an input)*/
/*document.execCommand('InsertButton',false,"aa");  //true or false is invalid
document.all.aa.value="ABCD database";*/
/*document.execCommand('InsertFieldSet',true,"aa"); //Reset to a fieldset
document.all.aa.innerText=www.abcd9.com;*/
//document.execCommand('InsertHorizontalRule', true,"aa"); //Insert a horizontal line
//document.execCommand('InsertIFrame',true,"aa"); //Insert an iframe
//document.execCommand('InsertImage',false,"aa") ; //Insert an InsertImage, when set to true, a picture is required, when false, no picture is required
//document.execCommand('InsertInputCheckbox',true,"aa"); //Insert a checkbox
//document.execCommand('InsertInputFileUpload' ,false,"aa"); //Insert a file type object
/*document.execCommand('InsertInputHidden',false,"aa"); //Insert a hidden
alert(document.all.aa.id);* //*document.execCommand('InsertInputImage
',false,"aa"); //insert an InputImage
document.all.aa.src="abcd9.gif";*/
//document.execCommand('InsertInputPassword',true,"aa"); //Insert a Password
//document.execCommand('InsertInputRadio',false,"aa"); //Insert a Radio
//document.execCommand( 'InsertInputReset',true,"aa"); //Insert a Reset
//document.execCommand('InsertInputSubmit',false,"aa"); //Insert a Submit
//document.execCommand('InsertInputText',false, "aa"); //Insert an input text
//document.execCommand('InsertTextArea',true,"aa"); //Insert a textarea
//document.execCommand('InsertSelectListbox',false,"aa"); //Insert a select list box
//document.execCommand('InsertSelectDropdown',true,"aa"); //Insert a single select
//document.execCommand('InsertParagraph');//Insert a line break
/*document.execCommand('InsertMarquee',true,"aa"); //Insert a marquee
document.all.aa.innerText="bbbbb";*/
//document.execCommand('Unselect'); //Shadow part for unselecting
//document.execCommand('SelectAll'); //On the selected page All elements of
}

/*
*This function is used to save the page as a file
*/
function fn_save()
{
document.execCommand('SaveAs','www.abcd9.com.txt');  //The second parameter is The name of the file to save
//document.execCommand('print');  //print the entire page
}

Guess you like

Origin http://10.200.1.11:23101/article/api/json?id=326920298&siteId=291194637