Science Knowings: HTML Course For Social Media

HTML5 Editing API

From Timing to Editing

We've explored the HTML5 Timing and Performance API. Now, let's dive into the HTML5 Editing API, which empowers you to create rich text editors within your web applications.

HTML5 Editing API Overview

The HTML5 Editing API provides a set of methods to manipulate and format text content on web pages, giving developers control over the user's editing experience.

Browser Support

The Editing API is supported by all major browsers, including Chrome, Firefox, Safari, and Edge, ensuring wide compatibility for your web applications.

ExecCommand() Method

ExecCommand() is the core method for executing editing commands. It takes two parameters: the command name (e.g., 'bold') and an optional value (e.g., null for bolding).

QueryCommandEnabled() Method

QueryCommandEnabled() checks if a specific editing command is enabled or disabled for the current selection.

QueryCommandIndeterm() Method

QueryCommandIndeterm() checks if a specific editing command is in an indeterminate state for the current selection (e.g., partially bold text).

QueryCommandState() Method

QueryCommandState() checks if a specific editing command is active or inactive for the current selection (e.g., is bolding active).

QueryCommandValue() Method

QueryCommandValue() retrieves the current value of a specific editing command (e.g., the font size or color).

Supported Commands

The Editing API supports a wide range of commands, including formatting (bold, italic, underline), list creation, link insertion, and undo/redo.

Building a Basic Text Editor

<div contenteditable></div>

Create a content editable div to allow user input and editing.

Formatting Text

document.execCommand('bold', false, null);

Use ExecCommand() to format selected text as bold.

Creating Lists

document.execCommand('insertOrderedList', false, null);

Create an ordered list using ExecCommand().

Inserting Hyperlinks

document.execCommand('createLink', false, '');

Insert a hyperlink to the specified URL.


document.execCommand('undo', false, null);

Implement undo functionality using ExecCommand().

Next: HTML5 Contacts API

In our next session, we'll explore the HTML5 Contacts API, which enables you to access and manage contacts on the user's device. Stay tuned for more!