En la mayoría de los casos tenemos problemas con algunos editores, o simplemente se busca tener un control real de los procesos de edición de forma mas personalizada para los usuarios, pues bien espero este apartado sea bastante útil
Primero debe entenderse que para crear el editor se debe cambiar el modo del documento HTML a modo de diseño, es decir dejarlo en designMode, para lograrlo el objeto de documento deberá exponerse a través del método execCommand este método permite ejecutar el comando de manipulación de regiones editables, aplicable a imputs u otros contenidos y objetos editables.
Hay que tener en cuenta que son muchos los aspectos que permiten ser editados como tipos de letra, color, subrayado entre otros, al igual que agregar link, identaciones de línea, eventos que se ejecutan activamente gracias al uso de «Document.execCommand()» aplicable al contenido editable, que efectivamente permitirá activar funcionalidades de diseño instantáneamente.
La sintaxis a utilizar es la siguiente:
document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
Tenga en cuenta que esa instrucción devolverá un booleano, pero tenga en cuenta que solo retornará true cuando verifica por el navegador que debe soportar esta llamada a este comando que en caso contrarío retornará false, es decir que será verdadero cuando exista interacción; tenga en cuenta que no se puede retornar el valor para verificar si su buscador soporta la callamada a este comando.
Traigo un ejemplo que literalmente puedes encontrar en la web, en mi caso lo tomé literalmente de La Web del Programador:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<body>
<script>
var Editor;
function Format(action, estate = false, tamano = null) {
Editor.execCommand(action, false, tamano);
}
window.onload = function () {
Editor = document.getElementById('detalleNota').contentWindow.document;
Editor.designMode = "on";
}
function botones() {
}
function cambio() {
var boton = document.createElement('input');
boton.type = 'button';
boton.id = 'consultarFechas';
boton.value = 'Buscar';
boton.title = "Buscar entre fechas";
document.getElementById('cajaInf').appendChild(boton);
if (boton.addEventListener) {
boton.addEventListener('click', funcion, false);
} else {
boton.attachEvent('onclick', funcion);
}
}
</script>
<style>
.lista {
border-radius: 3px;
text-align: center;
height: 20px;
background-color: silver;
border-block-color: SILVER;
}
.boton {
border-radius: 1px;
width: 20px;
height: 20px;
padding: 0px;
margin: 0px;
text-align: center;
font-size: 10px;
background-image: url('nicEditorIcons.gif');
background-color: silver;
}
</style>
<div style="align-content:flex-start;width: 500px;">
<input type="button" onclick="Format('bold')" title="Negrita" style="background-position: -55px 0px;"
class="boton" />
<input type="button" onclick="Format('italic')" title="Italica" style="background-position: -130px 0px;"
class="boton" />
<input type="button" onclick="Format('Underline')" title="Subrayado" style="background-position: 143px 0px;"
class="boton" />
<input type="button" onclick="Format('justifycenter')" title="Centrar" style="background-position: -74px 0px;"
class="boton" />
<input type="button" onclick="Format('justifyleft')" title="Alinear a la izquierda"
style="background-position: -160px 0px;" class="boton" />
<input type="button" onclick="Format('justifyright')" title="Alinear a la derecha"
style="background-position: -235px 0px;" class="boton" />
<input type="button" onclick="Format('outdent')" title="Tabular a la izquierda"
style="background-position: -200px 0px;" class="boton" />
<input type="button" onclick="Format('insertOrderedList')" title="Ordenar lista"
style="background-position: -180px 0px;" class="boton" />
<input type="button" onclick="Format('insertUnorderedList')" title="Ordenar lista"
style="background-position: 160px 0px;" class="boton" />
<input type="button" onclick="Format('indent')" title="Tabular a la derecha"
style="background-position: -110px 0px;" class="boton" />
<input type="button" onclick="Format('removeFormat')" title="Remover Formato"
style="background-position: 70px 0px;" class="boton" />
<input type="button" onclick="Format('insertHorizontalRule')" title="Linea horizontal"
style="background-position: -90px 0px;" class="boton" />
<br>
<select name="color" id="color" onclick="Colour(this.value)" class="lista">
<option value="#0000ff">Azul</option>
<option value="#ff0000">Rojo</option>
<option value="#007900">Verde</option>
<option value="#ffe500">Amarillo</option>
<option value="silver">Plateado</option>
<option value="#333000">Gris</option>
<option value="black">Negro</option>
<option value="cyan">Cyan</option>
<option value="#330000">Marrón</option>
<option value="#ff7b00">Orange</option>
</select>
<select title="Tipografia" onclick="Format('fontName','',this.value)" class="lista">
<option value='Arial'>Arial</option>
<option value='Arial Black'>Arial Black</option>
<option value='Book Antiqua' selected>Book Antiqua</option>
<option value='Comic Sans MS'>Comic Sans MS</option>
<option value='Courier'>Courier</option>
<option value='Courier New'>Courier New</option>
<option value='cursive'>Cursive</option>
<option value='Gadget'>Gadget</option>
<option value='Garamond'>Garamond</option>
<option value='Geneva'>Geneva</option>
<option value='Georgia'>Georgia</option>
<option value='Helvetica'>Helvetica</option>
<option value='sans-serif'>Sans-serif</option>
<option value='Bookman'>Bookman</option>
<option value='Impact'>Impact</option>
<option value='Charcoal'>Charcoal</option>
<option value='Lucida Console'>Lucida Console</option>
<option value='Lucida Sans Unicode'>Lucida Sans Unicode</option>
<option value='Lucida Grande'>Lucida Grande</option>
<option value='Monaco'>Monaco</option>
<option value='Monospace Fonts'>Monospace Fonts</option>
<option value='monospace'>Monospace</option>
<option value='serif'>serif</option>
<option value='Tahoma'>Tahoma</option>
<option value='Times'>Times</option>
<option value='Times New Roman'>Times New Roman</option>
<option value='Trebuchet MS'>Trebuchet MS</option>
<option value='Palatino'>Palatino</option>
<option value='Palatino Linotype'>Palatino Linotype</option>
<option value='Verdana'>Verdana</option>
</select>
<select title="Tamaño de letra" onclick="Format('fontSize','',this.value)" class="lista">
<option value='7'>7</option>
<option value='6'>6</option>
<option value='5'>5</option>
<option value='4' selected>4</option>
<option value='3'>3</option>
<option value='2'>2</option>
<option value='1'>1</option>
</select>
<input type="button" onclick="Format('redo')" value="↺" title="Rehacer" class="lista" />
<input type="button" onclick="Format('undo')" value="↻" title="Deshacer" class="lista" />
<br />
</div>
<div id="detalleNota" style="width:500px; height:150px"></div><br />
</body>
</html>Parámetros:
aCommandName
Es un DOMString y especifica el nombre del comando a ejecutar, le recomiendo ver la lista de Comandos disponibles.
aShowDefaultUI
Es un Boolean indica que si debe mostrar la interfaz del usuario predeterminada (puede existir navegadores que no la tengan implementada como Mozilla)
aValueArgument
Para comandos en los que se requiere argumentos de entrada, que siendo un DOMString permitirá brindar esta información, como ejemplo se puede tener la inserción de una imagen como insertImage el cual requiere una URL donde se encuentra la imagen a insert. Tenga presente que indicará nullsi no tiene los argumentos requeridos.
Puede ver en detalle la lista de comandos disponibles en la referencia original que corresponden a:
Pagina de desarrolladores de Mozilla