Using the document.execCommand function in Javascript to style, modify and insert content within a content editable container

The document.execCommand() function is a useful HTML editing function that allows us to manipulate the contents of a content editable element. With execCommand you can accomplish several tasks such as styling the currently selected text, inserting text and HTML at the selected point, inserting images at the selected point and much more.

The document.execCommand function takes

3 arguments

:

-The

name

of the specific command you wish to run with execCommand

-Whether or not to show the

default UI

-An

additional value

required by the command you are running

The document.execCommand function does have

compatibility issues

, a lot of the commands will not work on certain browsers (mainly

internet explorer

), so with some commands it is important to check the compatibility first, the function will return false if the command is not compatible with the current browser.

One of the uses document.execCommand can be useful for is creating a text-editing application within a website, allowing the user to modify and style text as well as insert images, links and other content.

Using execCommand for text styling (bold, italic, font-size etc.)

There are a few commands used with document.execCommand that will style the currently selected text in a content editable container to be bold, italic etc. These are as follows:

• bold : makes the currently selected text bold
• italic : makes the currently selected text italic
• underline : makes the currently selected text underlined
• strikeThrough : adds a line through the middle of the currently selected text
• foreColor : changes the font color of the currently selected text to the given value
• hiliteColor : changes the currently selected text's backgroundcolor to the given value, not compatible with internet explorer (usebackColor for internet explorer instead)
• backColor : changes the background color of the containing element to the given value in browsers except internet explorer. Internetexplorer uses this to change the text background color to the givenvalue
• increaseFontSize : surrounds the currently selected text with a <big> element, thereby increasing the font size
• decreaseFontSize : surrounds the currently selected text with a <small> element, thereby decreasing the font size
• fontSize : changes the font size for the currently selected text to the given value (from 1 to 7)
• heading : surrounds the currently selected text with a heading element depending on the given argument ("H3" for an <h3> element)
• subscript : changes the currently selected text to subscript
• superscript : changes the currently selected text to superscript
• fontName : changes the font of the currently selected text to the given value

Examples of these commands in use:

// make selection bold         
document.execCommand( "bold", false, "" );         
         
// make selection italic         
document.execCommand( "italic", false, "" );         
         
// make selection underlined         
document.execCommand( "underline", false, "" );         
         
// strike through selection         
document.execCommand( "strikeThrough", false, "" );         
         
// change selection's color to red         
document.execCommand( "foreColor", false, "red" );         
         
// change text background color to blue         
if( !document.execCommand( "hiliteColor", false, "blue" ) ){         
    document.execCommand( "backColor", false, "blue" )         
    // executes backColor command if hiliteColor returns false, indicating browser is internet explorer         
}         
         
// increase selection font size         
document.execCommand( "increaseFontSize", false, "" );         
         
// decrease selection font size         
document.execCommand( "decreaseFontSize", false, "" );         
         
// set selection's font size to 4         
document.execCommand( "fontSize", false, "4" );         
         
// surround selection's with <h3> tags         
document.execCommand( "heading", false, "H3" );         
         
// change selection to subscript         
document.execCommand( "subscript", false, "" );         
         
// change selection to superscript         
document.execCommand( "superscript", false, "" );         
         
// change selection's font to Arial         
document.execCommand( "fontName", false, "Arial" );

These commands only affect text content and will ignore other content such as images.

To undo these commands, simply run them again for the selected text, this will remove the surrounding tags.

Using execCommand for insertions (insert text, HTML, images etc.)

With document.execCommand there are several commands that can be used to insert various components such as HTML, text and images into a content editable container.

• insertText : Inserts a given text value at the current selection point
• insertHTML : Inserts given HTML at the current selection point (not supported by internet explorer)
• insertParagraph : Surrounds the current selection with paragraph tags (deletes selection with internet explorer)
• insertImage : inserts and image at the current selection using a given SRC value
• insertHorizontalRule : inserts a horizontal rule at the current selection
• insertBrOnReturn : toggles whether pressing enter will add a<br> tag or split the current block style container (not supported by internet explorer)
• insertOrderedList : inserts an ordered list elements at the selection point
• insertUnorderedList : inserts an unordered list elements at the selection point

Examples of these commands in use:

// insert text         
document.execCommand( "insertText", false, "your text here" );    
         
// insert HTML         
document.execCommand( "insertHTML", false, "<div>test content</div>" );    
         
// insert paragraph         
document.execCommand( "insertParagraph", false, "" );    
         
// insert image         
document.execCommand( "insertImage", false, "images/test.png" );    
         
// insert <hr> tag         
document.execCommand( "insertHorizontalRule", false, "" );    
         
// change whether enter creates a <br> tag         
document.execCommand( "insertBrOnReturn", false, "" );    
         
// insert ordered list         
document.execCommand( "insertOrderedList", false, "" );    
         
// insert un-ordered list         
document.execCommand( "insertUnorderedList", false, "" );

Using execCommand to format selections (align, indent etc.)

With document.execCommand you can also format text; abilities such as aligning, indenting and removing formats are included.

• justifyLeft : justifies selected content to the left
• justifyRight : justifies selected content to the right
• justifyCenter : justifies selected content in the center
• justifyFull : increases white spaces in the content such that it fills the entire page
• indent : indents the selected content
• outdent : removes an indentation from the selected content
• removeFormat : removes all formatting from the selected content including text styling
• formatBlock : adds a block level element around the selectiondepending on the given argument (element must be given with tags, eg."<P>"

Examples of these commands in use:

// justify selection to the left         
document.execCommand( "justifyLeft", false, "" );         
         
// justify selection to the right         
document.execCommand( "justifyRight", false, "" );         
         
// justify selection in the center         
document.execCommand( "justifyCenter", false, "" );         
         
// justify selection to take up the page width         
document.execCommand( "justifyFull", false, "" );         
         
// indent selection         
document.execCommand( "indent", false, "" );         
         
//outdent selection         
document.execCommand( "outdent", false, "" );         
         
// remove formatting on selection         
document.execCommand( "removeFormat", false, "" );         
         
// surround selection with a block level element         
document.execCommand( "formatBlock", false, "<P>" );

Using execCommand for editing (copy, paste, undo etc.)

document.execCommand also offers several editing functions such as copy, paste, delete and undo.

• copy : copies the current selection into the clipboard
• cut : cuts the current selection into the clipboard
• paste : pastes the latest entry in the clipboard into the selected point
• delete : deletes the current selection
• forwardDelete : deletes the character ahead of the current selection (like the delete button on a keyboard)
• undo : undoes the previous action
• redo : redoes an undo
• selectAll : selects all content in a content editable container

Examples of these commands in use:

// copy selection         
document.execCommand( "copy", false, "" );         
         
// cut selection         
document.execCommand( "cut", false, "" );         
         
// paste to selection         
document.execCommand( "paste", false, "" );         
         
// delete selection         
document.execCommand( "delete", false, "" );         
         
// delete character ahead of selection         
document.execCommand( "forwardDelete", false, "" );         
         
// undo last activity         
document.execCommand( "undo", false, "" );         
         
// delete character ahead of selection         
document.execCommand( "redo", false, "" );

Other execCommand commands (link, style with CSS etc.)

• createLink : creates a link out of the selected content, must be provided with an href value as an argument
• unlink : removes a link from the selected content
• enableInlineTableEditing : toggles whether tables rows and columns can be added or deleted (not supported in internet explorer)
• enableObjectResizing : toggles whether or not objects such as images can be resized
• contentReadOnly : toggles whether the content editable container can be edited or not based on a given boolean argument
• styleWithCSS : depending on the given boolean, it decides whether to use HTML attributes to style and format content or CSS styles, thisis off by default

Examples of these commands in use:

// create link         
document.execCommand( "createLink", false, "http://instructobit.com" );    
         
// destroy link         
document.execCommand( "unlink", false, "" );    
         
// enable table row and column editing         
document.execCommand( "enableInlineTableEditing", false, "" );    
         
// enable object resizing         
document.execCommand( "enableObjectResizing", false, "" );    
         
// make a content editable container read only         
document.execCommand( "contentReadOnly", false, "true" );    
         
// style with CSS rather than HTML         
document.execCommand( "styleWithCSS", false, "true" );