JavaScript => execCommand y contenteditable

Sintaxis

bool support = document.execCommand (commandName, showDefaultUI, valueArgument)

Parámetros

commandId	valor
Commands Comandos de formateo en línea
color de fondo	Cadena de valor de color
negrita
crear vínculo	Cadena de URL
nombre de la fuente	Nombre de la familia de la fuente
tamaño de fuente	"1", "2", "3", "4", "5", "6", "7"
color primario	Cadena de valor de color
huelga a través de
sobrescrito
desconectar
Commands comandos de formateo de bloques
borrar
formatBlock	"dirección", "dd", "div", "dt", "h1", "h2", "h3", "h4", "h5", "h6", "p", "pre"
adelanteDeleteo
insertHorizontalRule
Insertar HTML	Cadena HTML
insertar imagen	Cadena de URL
insertLineBreak
insertOrderedList
insertParagraph
Insertar texto	Cadena de texto
insertUnorderedList
justificar centro
justificar completo
justificar a la izquierda
justificar derecho
vencido
Commands Comandos del portapapeles
dupdo	Cadena seleccionada actualmente
cortar	Cadena seleccionada actualmente
pegar
Commands Comandos misceláneos
defaultParagraphSeparator
rehacer
seleccionar todo
styleWithCSS
deshacer
useCSS

Formateo

Los usuarios pueden agregar formato a los elementos o documentos contenteditable mediante las funciones de su navegador, como los atajos de teclado comunes para el formato ( Ctrl-B para negrita , Ctrl-I para cursiva , etc.) o arrastrando y soltando imágenes, enlaces o marcas desde la portapapeles.

Además, los desarrolladores pueden usar JavaScript para aplicar el formato a la selección actual (texto resaltado).

document.execCommand('bold', false, null); // toggles bold formatting
document.execCommand('italic', false, null); // toggles italic formatting
document.execCommand('underline', false, null); // toggles underline

Escuchando los cambios de contenteditable

Los eventos que funcionan con la mayoría de los elementos de formulario (por ejemplo, change , keydown , keyup , keypress ) no funcionan con contenteditable .

En su lugar, se puede escuchar a los cambios de contenteditable contenidos con la input evento. Suponiendo contenteditableHtmlElement es un objeto JS DOM que se puede contenteditable :

contenteditableHtmlElement.addEventListener("input", function() {
    console.log("contenteditable element changed");
});

Empezando

El atributo HTML contenteditable proporciona una forma sencilla de convertir un elemento HTML en un área editable por el usuario

<div contenteditable>You can <b>edit</b> me!</div>

Edición de texto enriquecido nativo

Uso de JavaScript y execCommand ^W3C que, además, puede pasar más funciones de edición para el centrado actualmente contenteditable elemento (específicamente en la posición de cursor o selección).

El método de la función execCommand acepta 3 argumentos.

document.execCommand(commandId, showUI, value)

commandId String. de la lista de comandos disponibles ** id ** s
^{(ver: Parámetros → commandId )}
showUI Boolean (no implementado. Use false )
value Cadena Si un comando espera un valor de Cadena relacionado con el comando, de lo contrario "" . ^{(ver: Parámetros → valor )}

Ejemplo utilizando el comando "bold" y "formatBlock" (donde se espera un valor ):

document.execCommand("bold", false, "");          // Make selected text bold
document.execCommand("formatBlock", false, "H2"); // Make selected text Block-level <h2>

Ejemplo de inicio rápido:

<button data-edit="bold"><b>B</b></button>
<button data-edit="italic"><i>I</i></button>
<button data-edit="formatBlock:p">P</button>
<button data-edit="formatBlock:H1">H1</button>
<button data-edit="insertUnorderedList">UL</button>
<button data-edit="justifyLeft">&#8676;</button>
<button data-edit="justifyRight">&#8677;</button>
<button data-edit="removeFormat">&times;</button>

<div contenteditable><p>Edit me!</p></div>

<script>
[].forEach.call(document.querySelectorAll("[data-edit]"), function(btn) {
  btn.addEventListener("click", edit, false);
});

function edit(event) {
  event.preventDefault();
  var cmd_val = this.dataset.edit.split(":");
  document.execCommand(cmd_val[0], false, cmd_val[1]);
}
<script>

demo jsFiddle
Ejemplo de editor de texto enriquecido básico (navegadores modernos)

Pensamientos finales
Incluso estando presente durante mucho tiempo (IE6), las implementaciones y los comportamientos de execCommand varían de un navegador a otro, por lo que "construir un editor WYSIWYG con todas las funciones y compatible con todos los navegadores" es una tarea difícil para cualquier desarrollador de JavaScript con experiencia.
Incluso si aún no está completamente estandarizado, puede esperar resultados bastante decentes en los navegadores más nuevos, como Chrome, Firefox, Edge . Si necesita una mejor compatibilidad con otros navegadores y más funciones como la edición de tablas HTML, etc., una regla de oro es buscar un editor de texto enriquecido ya existente y sólido.

Copiar al portapapeles desde el área de texto usando execCommand ("copiar")

Ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <textarea id="content"></textarea>
    <input type="button" id="copyID" value="Copy" />
    <script type="text/javascript">
        var button = document.getElementById("copyID"),
            input = document.getElementById("content");

        button.addEventListener("click", function(event) {
            event.preventDefault();
            input.select();
            document.execCommand("copy");
        });
    </script>
</body>
</html>

document.execCommand("copy") copia la selección actual al portapapeles

Modified text is an extract of the original Stack Overflow Documentation

Licenciado bajo CC BY-SA 3.0

No afiliado a Stack Overflow

JavaScript
execCommand y contenteditable

Buscar..