Using Design Mode and execCommand to Fiddle with Web Pages

John Au-Yeung - Jan 23 '21 - - Dev Community

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)
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

bold

Toggle selected text’s boldness on and off.

For example, we can use it as follows:

document.execCommand('bold')
Enter fullscreen mode Exit fullscreen mode

ClearAuthenticationCache

Clears authentication credentials from the cache.

For instance, we can run:

document.execCommand("ClearAuthenticationCache","false");
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

copy

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

For example, we can write:

document.execCommand('copy')
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

to change the separator to br .

delete

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

document.execCommand('delete')
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

insertHorizontalRule

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

We can run:

document.execCommand('insertHorizontalRule')
Enter fullscreen mode Exit fullscreen mode

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>')
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

insertOrderedList

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

We can use it as follows:

document.execCommand('insertOrderedList');
Enter fullscreen mode Exit fullscreen mode

insertUnorderedList

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

We can use it as follows:

document.execCommand('insertUnorderedList');
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

insertText

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

We can use it as follows:

document.execCommand('insertText');
Enter fullscreen mode Exit fullscreen mode

italic

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

document.execCommand('italic');
Enter fullscreen mode Exit fullscreen mode

justifyCenter

Centers the selection or insertion point.

We can use it as follows:

document.execCommand('justifyCenter');
Enter fullscreen mode Exit fullscreen mode

justifyFull

Justifies the selection or insertion point.

We can use it as follows:

document.execCommand('justifyFull');
Enter fullscreen mode Exit fullscreen mode

justifyLeft

Left justifies the selection or insertion point.

We can use it as follows:

document.execCommand('justifyLeft');
Enter fullscreen mode Exit fullscreen mode

justifyRight

Right justifies the selection or the insertion point.

We can use it as follows:

document.execCommand('justifyRight');
Enter fullscreen mode Exit fullscreen mode

outdent

Outdents the line containing the selection or insertion point.

We can use it as follows:

document.execCommand('outdent');
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

redo

Redo a previously undone command.

We can use it as follows:

document.execCommand('redo');
Enter fullscreen mode Exit fullscreen mode

removeFormat

Removes all formatting from the current selection.

We can use it as follows:

document.execCommand('removeFormat');
Enter fullscreen mode Exit fullscreen mode

selectAll

Selects all the content of the editable region.

We can use it as follows:

document.execCommand('selectAll');
Enter fullscreen mode Exit fullscreen mode

strikeThrough

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

We can use it as follows:

document.execCommand('strikeThrough');
Enter fullscreen mode Exit fullscreen mode

subscript

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

We can use it as follows:

document.execCommand('subscript');
Enter fullscreen mode Exit fullscreen mode

superscript

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

We can use it as follows:

document.execCommand('superscript');
Enter fullscreen mode Exit fullscreen mode

underline

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

We can use it as follows:

document.execCommand('underline');
Enter fullscreen mode Exit fullscreen mode

undo

Undo to the last run command.

We can use it as follows:

document.execCommand('undo');
Enter fullscreen mode Exit fullscreen mode

unlink

Removes the a element from a selected hyperlink.

We can use it as follows:

document.execCommand('unlink');
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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.

Image
EXPERT STOLEN CRYPTO RECOVERY SERVICES ONLINE ⁚ HIRE DIGITAL HACK RECOVERY COMPANY
Image
How Accurate Are Tax Calculators For Pakistan?

tax, calculator, pakistan, income
Image
EchoAPI vs. Postman: Why EchoAPI is the Superior Choice for API Management

echoapi, postman, uidesign, webdev
Image
Why 90% of 'Software Engineers' Are Actually Just Code Monkeys

programming, discuss, softwareengineering
Image
Exploring T20Exchanges: Your Ultimate Destination for T20 Cricket Betting
Image
Building a Web Search Engine in Go with Elasticsearch

programming, tutorial, go, elasticsearch
Image
Top 10 SED Use Cases Every Linux User Should Know

bash, sed, cli, devops
Image
web-site judi slots online dengan macam kelebihan
Image
Unleashing the Power of ATVS: Your Ultimate Guide to the Best New Disposable Vapes!
Image
HACK SAVVY TECH // BITCOIN RECOVERY EXPERT ONLINE

technology, bitcoin, crypto
Image
Alpine.js Tips & Tricks for and from and entry level Laravel Developers 🚀

javascript, webdev, beginners, laravel
Image
ANOBOTY
Image
Why You'll Want To Find Out More About Accident Lawyer Near Me
Image
J'ai essayé de passer à Vue.js depuis React.js

vue, react, javascript, typescript
Image
Why Is There All This Fuss About Pedestrian Accident Lawyer?
Image
How to Use Git to Manage Daily Tasks and Schedule Effectively

git, tutorial, productivity, opensource
Image
5 Private Mental Health Care Projects That Work For Any Budget
Image
20 Things You Should Know About Bifold Door Repair
Image
Why Assessment In Mental Health Is Fast Becoming The Hot Trend For 2023
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .