Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

To make fiddling with the design of webpages easy, modern browsers have a design mode built-in. We can toggle it on with the document.designMode property set to 'on' .

Furthermore, we can send commands to change the page when it’s design mode with the document.execCommand method.

In this article, we’ll look at how to use the document.execCommand method to change web pages in design mode on the fly.

Usage

The document.execCommand method takes 3 arguments. The syntax is the following:

document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

The parameters are:

• aCommandName — a string specifying the name of the command to run.
• aShowDefaultUI — a boolean indicating whether the default user interface should be shown. This isn’t supported in Mozilla
• aValueArgument — a string that provides information for commands requires input. For example, a URL for an image is required for the insertImage command.

It returns false if a command is unsupported or disabled.

We can run the commands from the browser console or in our code. The changes will be cleared once we refresh.

Commands

The follows commands can be run with execCommand :

backColor

Changes the background color of the block that’s selected.

We can change the selected background to blue as follows:

document.execCommand('backColor', false, 'blue');

bold

Toggle selected text’s boldness on and off.

For example, we can use it as follows:

document.execCommand('bold')

ClearAuthenticationCache

Clears authentication credentials from the cache.

For instance, we can run:

document.execCommand("ClearAuthenticationCache","false");

to make sure that we have to authenticate again.

contentReadOnly

Marks content as read-only or editable. A boolean is required as the value argument. This isn’t supported by Internet Explorer.

We can use it like the following code:

document.execCommand('contentReadOnly', false, true)

copy

Copies the current selection to the clipboard. Support may vary between browsers.

For example, we can write:

document.execCommand('copy')

createLink

Create a link from the selection. A URI string is required in the value argument to set the link’s href attribute. The URI must at least have 1 character which may be whitespace. IE will also create a link with a null value.

We can use it as follows:

document.execCommand('createLink', true, 'http://www.google.com')

cut

Remove the selected text and copied it to the clipboard. Support may vary between browsers.

We can use it as follows:

document.execCommand('cut')

decreaseFontSize

Add a small tag around the select text. This command isn’t supported by IE.

For example, we can use it by writing:

document.execCommand('decreaseFontSize')

defaultParagraphSeparator

Change the paragraph separator used when new paragraphs are created in editable text regions.

We can use by writing:

document.execCommand('defaultParagraphSeparator', false, 'br')

to change the separator to br .

delete

Deletes the current selection. We can use it by writing:

document.execCommand('delete')

enableAbsolutePositionEditor

Toggle the grabber that allows absolutely positioned elements to be moved around. It’s disabled by default in Firefox 63 beta or dev editions.

We can use it by running:

document.execCommand('enableAbsolutePositionEditor', true, true)

fontName

Change the font name for the selection or at the insertion point.

For example, we can use it by writing:

document.execCommand('fontName', true, 'Arial')

foreColor

Change the font color for the selection or insertion point. A hexadecimal color value is required as the value argument.

For example, we can write:

document.execCommand('foreColor', true, '#4287f5')

formatBlock

Add an HTML block-level element around the line containing the current selection.

We can use it by writing:

document.execCommand('formatBlock', true, 'blockquote')

Where 'blockquote' can be replaced by other block-level elements.

forwardDelete

Deletes the character ahead of the cursor’s position. It’s the same as hitting the Delete key on a Windows keyboard.

For example, we can use it by running:

document.execCommand('forwardDelete')

heading

Add a heading element around the selection or insertion point line. Requires the tag name string as the value argument. This command isn’t supported by IE or Safari.

For example, we can use it as in the following code:

document.execCommand('heading', true, 'H1')

hiliteColor

Change the background color for the selection or at the insertion point. It requires a color value string as a value argument. It’s not supported by IE.

We can run:

document.execCommand('hilitecolor', true, 'red')

to change the highlight color to red.

increaseFontSize

Add a big tag around the selector or at the insertion point. It’s not supported by IE.

document.execCommand('increaseFontSize')

indent

Indent the line containing the selection or insertion point. The least indented line will be indented if there’re multiple lines at different levels of indentation.

We can run:

document.execCommand('indent')

to indent the text.

insertBrOnReturn

insertBrOnReturn adds a line break or <br> element. It’s not supported by IE.

We can run:

document.execCommand('insertBrOnReturn')

insertHorizontalRule

Insert an hr element at the insertion point or replace the selection with it.

We can run:

document.execCommand('insertHorizontalRule')

insertHTML

Insert an HTML string at the insertion point, which deletes the selection. It’s not supported by IE, and requires valid HTML string.

We can run it by typing in:

document.execCommand('insertHTML', false, '<b>foo</b>')

insertImage

Inserts an image at the insertion point. A URL for the string is required for the src attribute of the image.

For example, we can run:

document.execCommand('insertImage', false, 'https://images.unsplash.com/photo-1496096265110-f83ad7f96608?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80')

insertOrderedList

Inserts a numbered ordered list for the selection or at the insertion point.

We can use it as follows:

document.execCommand('insertOrderedList');

insertUnorderedList

Inserts a bulleted unordered list for the selection or at the insertion point.

We can use it as follows:

document.execCommand('insertUnorderedList');

insertParagraph

Add a paragraph around the selection or the current line. IE inserts a paragraph at the insertion point and deletes the selection.

We can use it as follows:

document.execCommand('insertParagraph');

insertText

Adds the given plain text at the insert point and deletes the selection.

We can use it as follows:

document.execCommand('insertText');

italic

Toggle italics on and off for the selection or at the insertion point. IE uses em instead of i .

document.execCommand('italic');

justifyCenter

Centers the selection or insertion point.

We can use it as follows:

document.execCommand('justifyCenter');

justifyFull

Justifies the selection or insertion point.

We can use it as follows:

document.execCommand('justifyFull');

justifyLeft

Left justifies the selection or insertion point.

We can use it as follows:

document.execCommand('justifyLeft');

justifyRight

Right justifies the selection or the insertion point.

We can use it as follows:

document.execCommand('justifyRight');

outdent

Outdents the line containing the selection or insertion point.

We can use it as follows:

document.execCommand('outdent');

paste

Paste the clipboard content at the insertion and replaces the current selection. It’s disabled for web content.

We can use it as follows:

document.execCommand('paste');

redo

Redo a previously undone command.

We can use it as follows:

document.execCommand('redo');

removeFormat

Removes all formatting from the current selection.

We can use it as follows:

document.execCommand('removeFormat');

selectAll

Selects all the content of the editable region.

We can use it as follows:

document.execCommand('selectAll');

strikeThrough

Toggle strikethrough on or off for the selection or insertion point.

We can use it as follows:

document.execCommand('strikeThrough');

subscript

Toggle subscript on or off for the selection or insertion point.

We can use it as follows:

document.execCommand('subscript');

superscript

Toggle superscript on or off for the selection or insertion point.

We can use it as follows:

document.execCommand('superscript');

underline

Toggle underline on or off for the selection or insertion point.

We can use it as follows:

document.execCommand('underline');

undo

Undo to the last run command.

We can use it as follows:

document.execCommand('undo');

unlink

Removes the a element from a selected hyperlink.

We can use it as follows:

document.execCommand('unlink');

styleWithCSS

Toggle on or off the use of HTML tags or CSS for the generated markup. true modifies/generates style attributes in markup, false generate presentational elements.

We can use it as follows:

document.execCommand('styleWithCSS', true, true);

The document.execCommand method is very useful for fiddling with web pages that have design mode on. We can make lots of changes to formatting by running various commands listed above.

It’s more convenient than inspecting the element and then changing it manually if we want to make lots of changes.