HTML and CSS Reference
In-Depth Information
Applying formatting to the editable text
The
HTML5 API
provides the
execCommand()
function for manipulating
text in the
contenteditable
region. The function has three parameters—
one required, one ignored, and one optional.
an optional string value used
as a parameter for the command
a string indicating the
operation to perform
execCommand(commandName, showDefaultUI, commandArgument)
a Boolean parameter
that will be ignored
Let's extend the previous example by allowing the user to apply
formatting to the text they're editing. You'll add buttons to the page that
execute commands on the API when clicked.
The commands for applying bold, italic, and underlined text are all
fairly straightforward. Each requires the command name; all the other
parameters can be left in their default state.
Here's the command for bold:
execCommand(
'bold',false,''
);
If you add this code to the
onclick
attribute of a button, the formatting
will be applied to the currently selected text when the button is clicked.
Here are the equivalent commands for italic and underlined text:
execCommand(
'italic',false,''
);
execCommand(
'underline',false,''
);
The following screenshots show the process of applying these three dif-
ferent commands to selected text on the example page.
