Tutorials » Building a WYSIWYG HTML Editor Using Only JavaScript and HTML
execCommand examplesNow that we're a little bit more familiar
with the execCommand method, let's look at a list of some
of the commands that we can perform with it (the complete
list is available here):
- ForeColor: Get or set the foreground
color of the selected region.
- BackColor: Get or set the background
color of the selected region.
- Bold: Toggles between the selected
region being bolded.
- Italic: Toggles between the selected
region being italicised.
- Underline: Toggles between the
selected region being underlined.
- Copy: Copies the selected region
to the clipboard.
- Cut: Removes the selected region
from the document.
- Paste: Adds data from clipboard
to region (if applicable).
- InsertHorizontalRule: Adds a horizontal
rule to the region.
- InsertImage: Displays an IE defined
modal dialog that contains full image selection features,
alt tag modification, border setting, etc.
- InsertMarquee: Converts the selected
text into a marque.
- InsertSelectDropDown: Adds a drop
down list to the region.
- Print: Displays the windows print
dialog so that the region can be printed.
- Refresh: Refreshes the region.
- CreateLink: Displays an IE defined
modal dialog that lets you add a hyperlink using either
selected text or new text.
- InsertUnorderedList: Toggles between
the selected text being an unordered list and normal text.
As you can see, we can do some pretty powerful things with the execCommand method. Let's build an advanced HTML content editor that allows us to toggle between HTML mode and WYSIWYG mode, format text, add images, links, lists and more.
