Document.execCommand()

Obsolete
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

Quando um documento HTML está em designMode, seu objeto document  expõe um metodo execCommand para editar a região editável corrente, algo como elementos form inputs ou contentEditable.

A maioria dos comandos afetam apaenas uma área selecionada [seleção] (negrito, itálico, etc.), enquantos outros adicionam novos elementos (adicionar um link por exemplo), ou afetam uma linha toda (identação). Quando usando contentEditable, o metódo execCommand() afeta o elemento editável ativo.

Síntaxe

document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

Valor de Retorno

Um Boolean que tem valor false se o comando não é válido ou está desabilitado.

Nota: Retorna true se for parte da interação do usuário. Não tente utilizar o retorno para verificar o suporte do browser antes de chamar o comando.

Parâmetros

aCommandName
Uma DOMString especificando o nome do comando a ser executado. Veja Comandos para um lista dos possíveis comandos.
aShowDefaultUI
Um Boolean indicando se a interface padrão do usuário deve ser mostrada. Isso não é implementado no Mozilla.
aValueArgument
Para comandos que requerem um argumento de entrada. É uma DOMString provendo a informação. Por exemplo, insertImage requer uma URL da imagem a ser inserida. Use null se nenhum argumento é necessário.

Comandos

backColor
Muda a cor de fundo do documento. No modo styleWithCss, ele afeta a cor de fundo do bloco que contém. Isso requer um valor de <color> passado como argumento. Observe que o Internet Explorer usa isso para definir a cor do plano de fundo do texto.
bold
Ativa / desativa negrito na seleção ou no ponto de inserção. O Internet Explorer usa a tag <strong> no lugar de <b>.
ClearAuthenticationCache
Limpa todas as credenciais de autenticação do cache.
contentReadOnly
Torna o documento de conteúdo somente leitura ou editável. Isso requer um valor booleano true / false como argumento. (Não é suportado pelo Internet Explorer.)
copy
Copia a seleção atual para a área de transferência. As condições para ativar esse comportamento variam de um navegador para outro e evoluíram com o tempo. Verifique a Tabela de Compatibilidade entre Browsers para determinar se você pode usar no seu caso.
createLink
Cria um hiperlink a partir da seleção, mas apenas se houver uma seleção. Requer uma string URI como argumento para o href do link.  O URI deve conter pelo menos um único caractere, que pode ser um espaço em branco. (O Internet Explorer criará um link com um valor nulo.)
cut
Remove a seleção atual e a copia para a área de transferência. Quando esse comportamento é ativado, varia entre os navegadores e suas condições evoluíram com o tempo. Verifique a Tabela de Compatibilidade entre Browsers para mais detalhes.
decreaseFontSize
Adiciona a tag <small> ao redor da seleção ou no ponto de inserção. (Não é suportado pelo Internet Explorer.)
defaultParagraphSeparator
Altera o separador de parágrafos usado quando novos parágrafos são criados em regiões de texto editáveis. Veja Diferenças na geração de marcação para mais detalhes.
delete
Exclui o conteúdo da seleção atual.
enableAbsolutePositionEditor
Habilita ou desabilita a garra que permite mover elementos absolutamente posicionados. Está desabilitado por padrão no Firefox 63 Beta / Dev Edition (bug 1449564)
enableInlineTableEditing
Ativa ou desativa os controles de inserção e exclusão de linhas / colunas da tabela. Está desabilitado por padrão no Firefox 63 Beta / Dev Edition (bug 1449564).
enableObjectResizing
Ativa ou desativa as alças de redimensionamento em imagens, tabelas e elementos absolutamente posicionados e outros objetos redimensionáveis. Está desabilitado por padrão no Firefox 63 Beta / Dev Edition (bug 1449564).
fontName
Altera o nome da fonte para a seleção ou no ponto de inserção. Isso requer uma string com o nome da fonte (como "Arial") como argumento.
fontSize
Altera o tamanho da fonte para a seleção ou no ponto de inserção. Isso requer um número inteiro de 1-7 como argumento.
foreColor
Altera a cor da fonte para a seleção ou no ponto de inserção. Isso requer uma string de cor (hexadecimal) como argumento.
formatBlock
Adiciona um elemento de nível de bloco HTML ao redor da linha que contém a seleção atual, substituindo o elemento de bloco que contém a linha, se houver (no Firefox,  <blockquote> é a exceção - envolverá qualquer elemento de bloco que contenha). Requer uma sequência de nome de tag como argumento de valor. Praticamente todos os elementos em nível de bloco podem ser usados. (Internet Explorer e Edge suportam apenas tags de cabeçalho  H1H6, ADDRESS, e PRE, que devem estar entre colchetes angulares, como "<H1>".)
forwardDelete
Exclui o caractere depois da posição do cursor, idêntico a pressionar a tecla Delete em um teclado do Windows.
heading
Adiciona um elemento de cabeçalho ao redor de uma linha de seleção ou ponto de inserção. Requer uma string com o nome da tag como argumento (ex. "H1", "H6"). (Não suportado pelo Internet Explorer e Safari.)
hiliteColor
Altera a cor do plano de fundo para a seleção ou no ponto de inserção. Requer uma sequência de valores de cores como argumento. useCSS tem de ser true para essa função. (Não é suportado pelo Internet Explorer.)
increaseFontSize
Adiciona uma tag <big> ao redor da seleção ou no ponto de inserção. (Não é suportado pelo Internet Explorer.)
indent
Recua a linha que contém o ponto de seleção ou inserção. No Firefox, se a seleção abranger várias linhas em diferentes níveis de recuo, apenas as linhas menos recuadas na seleção serão recuadas.
insertBrOnReturn
Controla se a tecla Enter insere um elemento <br>, ou divide o elemento do bloco atual em dois. (Não é suportado pelo Internet Explorer.)
insertHorizontalRule
Insere um elemento <hr> no ponto de inserção ou substitui a seleção por ele.
insertHTML
Insere uma string HTML no ponto de inserção (exclui a seleção). Requer uma string HTML válida como argumento. (Não é suportado pelo Internet Explorer.)
insertImage
Insere uma imagem no ponto de inserção (exclui a seleção). Requer uma string de URL para o src da imagem como argumento. Os requisitos para essa string são os mesmos que createLink.
insertOrderedList
Cria uma lista ordenada e numerada para a seleção ou no ponto de inserção.
insertUnorderedList
Cria uma lista não ordenada para a seleção ou no ponto de inserção.
insertParagraph
Insere um parágrafo ao redor da seleção ou da linha atual. (O Internet Explorer insere um parágrafo no ponto de inserção e exclui a seleção.)
insertText
Insere o texto fornecido no ponto de inserção (exclui a seleção).
italic
Ativa / desativa o itálico para a seleção ou no ponto de inserção. (O Internet Explorer usa o elemento <em> no lugar de <i>.)
justifyCenter
Centraliza o ponto de seleção ou inserção.
justifyFull
Justifica o ponto de seleção ou inserção.
justifyLeft
Justifica o ponto de seleção ou inserção à esquerda.
justifyRight
Justifica à direita a seleção ou o ponto de inserção.
outdent
Supera a linha que contém o ponto de seleção ou inserção.
paste
Cola o conteúdo da área de transferência no ponto de inserção (substitui a seleção atual). Desativado para conteúdo da web. Veja [1].
redo
Refaz o comando desfazer anterior.
removeFormat
Remove toda a formatação da seleção atual.
selectAll
Seleciona todo o conteúdo da região editável.
strikeThrough
Ativa / desativa o strikethrough(linha riscada) para a seleção ou no ponto de inserção.
subscript
Ativa / desativa o subscrito para a seleção ou no ponto de inserção.
superscript
Ativa / desativa o superscript para a seleção ou no ponto de inserção.
underline
Ativa / desativa o underline para a seleção ou no ponto de inserção.
undo
Desfaz o último comando executado.
unlink
Remove o elemento âncora de um hiperlink selecionado.
useCSS
Alterna o uso de tags HTML ou CSS para a marcação gerada. Requer um booleano true / false como argumento.

NOTA: Este argumento é logicamente reverso (ou seja, use false para usar CSS, true para usar HTML) e não é suportado pelo Internet Explorer. Isso foi preterido em favor do styleWithCSS.
styleWithCSS
Substitui o comando useCSS. true modifica / gera atributos de style na marcação, false gera elementos de apresentação(html).

Exemplo

Um exemplo de como usar a funcionalidade no CodePen.

Especificações

Especificação Estado Comentário
execCommand

Compatibilidade entre Browsers

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
execCommand
DeprecatedNon-standard
Chrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 9Safari Full support 1.3WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
ClearAuthenticationCache command
DeprecatedNon-standard
Chrome No support NoEdge No support 12 — 79Firefox No support NoIE Full support 6Opera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
copy command
DeprecatedNon-standard
Chrome Full support 42Edge Full support 12Firefox Full support 41IE Full support 9Opera Full support 29Safari Full support 10WebView Android Full support 42Chrome Android Full support 42Firefox Android Full support 41Opera Android Full support 29Safari iOS Full support 10Samsung Internet Android Full support 4.0
cut command
DeprecatedNon-standard
Chrome Full support 42Edge Full support 12Firefox Full support 41IE Full support 9Opera Full support 29Safari Full support 10WebView Android Full support 42Chrome Android Full support 42Firefox Android Full support 41Opera Android Full support 29Safari iOS Full support 10Samsung Internet Android Full support 4.0
defaultParagraphSeparator command
DeprecatedNon-standard
Chrome No support NoEdge No support ≤18 — 79Firefox Full support 55IE No support NoOpera Full support YesSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 55Opera Android Full support YesSafari iOS No support NoSamsung Internet Android No support No
insertBrOnReturn command
DeprecatedNon-standard
Chrome No support NoEdge No support NoFirefox Full support YesIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support YesOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.

Veja também