Using Design Mode and execCommand to Fiddle with Web Pages
Tags: javascript, webdev, programming, beginners
Published: 2021-01-23 01:57:37

**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.