Crear un editor de páginas HTML

 
Esto se puede hacer con la función ExecCommand. En el artículo Ejecutar comandos del navegador con execCommand ya comentamos algunas de sus funciones, por lo que ahora comentaremos las restantes, las correspondientes a la "edición".

Como comentamos en el otro artículo el gran inconveniente de este método, es que sólo se puede ejecutar con Microsoft Internet Explorer, aunque como comentamos también en el artículo anterior, gracias a este método, unido (ya que estamos sólo con internet explorer ...) al ActiveX DialogHelper, pueden hacer un editor muy aparente con algunas opciones no disponibles ni en los editores comerciales y con un esfuerzo no demasiado grande.

Recordamos la sintaxis de este método:

objeto.execCommand(sComando [, bInterfaz_de_usuario] [, Añadido]);


Donde:
sComando (string) Es el comando que dirá la acción a hacer (imprimir, salvar, etc.).
bInterfaz_de_usuario (boolean) Si muestra o no el interfaz de usuario en caso de haberlo. Por defecto su valor es false.
Añadido Dependiendo del comando puede recoger un valor u otros (o ninguno).


Mostramos los posibles valores para sComando no comentados anteriormente, entre paréntesis la versión de I.E. necesaria para que el comando se ejecute:

document.execCommand("AbsolutePosition", false, true-false);
(5.5 y posteriores) Asigna al elemento seleccionado el estilo de posición como absoluto (tercer parámetro como true). Esto permite que el elemento se sitúe de forma absoluta con respecto al resto de elementos. Por defecto se suele situar de forma relativa con respecto al resto de elementos (tercer parámetro como false). Por ejemplo si sitúas una imagen en código después de un texto, por pantalla se presentará al lado del texto, sin embargo si le das una posición absoluta, se presentará arriba a la izquierda si no le has dado ningún valor a sus estilos "left" y "top" en cuyo caso se situaría en las posiciones pasadas por estos estilos. El segundo parámetro debe ser siempre false.

document.execCommand("2D-Position", false, true-false);
(5.5 y posteriores) Permite mover los elementos por cualquier parte del documento en caso de que su posición sea "absoluta". El segundo parámetro debe ser siempre false mientras que el tercero puede recibir true, para que los elementos se puedan mover y false para que no.

document.execCommand("LiveResize", false, true-false);
(5.5 y posteriores) Hace que los elementos aparezcan continuamente, por ejemplo si el tercer parámetro viene como true cuando cambiemos el tamaño de un elemento, este aparecerá continuamente con los diferentes tamaños según vayamos arrastrando con el ratón, sin embargo si lo establecemos como false, sólo se verá con el nuevo tamaño cuando soltemos el botón del ratón.

document.execCommand("MultipleSelection", false, true-false);
(5.5 y posteriores) Permite seleccionar mas de un elemento a la vez si el tercer parámetro viene como true, en caso de que venga como false sólo permitirá seleccionar un elemento a la vez. El segundo parámetro no se aplica. Para poder seleccionar más de un elemento, se debe pinchar sobre ellos manteniendo pulsada la tecla control (ctrl.) o mayúsculas.

document.execCommand("BrowseMode");
(¿?) Establece el documento como cuando se cargo. Por lo que si estuviéramos editándolo, eliminaría todos los cambios y dejaría el original.

document.execCommand("EditMode");
(¿?) Establece el documento como editable, para que se puedan insertar textos, mover elementos, borrar campos, etc. Debido a que este comando no está todavía oficialmente soportado, recomendamos usar la propiedad designMode, aunque es también exclusivo de Microsoft Internet Explorer, por lo que tampoco es muy recomendable. Su sintaxis es la siguiente:

document.designMode="On";


Esta propiedad puede recibir tres valores:
OnLa página puede ser editada
OffLa página no puede ser editada
Inheritheredará la propiedad editable del elemento padre


document.execCommand("BackColor", false, color);
(4.0 y posteriores) Establece el color de fondo del texto seleccionado al color que le pasemos por el tercer parámetro (en hexadecimal), el segundo parámetro debe ser siempre false (no aplicable).

document.execCommand("ForeColor", false, color);
(4.0 y posteriores) Establece el color del texto seleccionado al color que le pasemos por el tercer parámetro (en hexadecimal), el segundo parámetro debe ser siempre false (no aplicable).

document.execCommand("Bold");
(4.0 y posteriores) Establece la fuente seleccionada como negrita, en caso de estar ya como negrita la establece a normal.

document.execCommand("Italic");
(4.0 y posteriores) Establece la fuente seleccionada como cursiva, en caso de estar ya como cursiva la establece a normal.

document.execCommand("Underline");
(4.0 y posteriores) Establece la fuente seleccionada como subrayada, en caso de estar ya como subrayada la establece a normal.

document.execCommand("StrikeThrough");
(¿4.0 y posteriores?) Establece la fuente seleccionada como tachada, en caso de estar ya como tachada la establece a normal.

document.execCommand("Subscript");
(¿4.0 y posteriores?) Establece la fuente seleccionada como subíndice, en caso de estar ya como subíndice la establece a normal.

document.execCommand("Superscript");
(¿4.0 y posteriores?) Establece la fuente seleccionada como superíndice, en caso de estar ya como superíndicela establece a normal.

document.execCommand("RemoveFormat");
(4.0 y posteriores) Elimina el formato dado al texto seleccionado (negrita, colores, cursiva, ...).

document.execCommand("CreateBookmark", false, "nombre_ancla");
(4.0 y posteriores) Establece el texto seleccionado como un ancla. El segundo parámetro debe ser siempre false, el tercer parámetro es el nombre que recibirá el ancla, para luego poder ir a ella.

document.execCommand("CreateLink", false-true, "http://tuweb.com/tupagin.htm");
(4.0 y posteriores) Establece el texto seleccionado como un hipervínculo. El segundo parámetro puede ser false o true, en caso de ser true mostrará una ventana donde solicitará la dirección del hipervínculo. Se puede establecer a false y pasar la dirección directamente en el tercer parámetro, en caso de ser true ignorará el tercer parámetro.

document.execCommand("UnBookmark");
(4.0 y posteriores) Elimina todos los links, (etiquetas "A": hipervínculos y anclas) de la selección.

document.execCommand("FontName", false, "nombre_fuente");
(4.0 y posteriores) Establece la fuente para el texto seleccionado. El segundo parámetro debe ser siempre false, el tercero debe de ser el nombre de la fuente a establecer.

document.execCommand("FontSize", false, tamanio_fuente);
(4.0 y posteriores) Establece el tamaño de la fuente para el texto seleccionado. El segundo parámetro debe ser siempre false, el tercero es el tamaño de la fuente, su valor debe estar comprendido entre 1 y 7.

document.execCommand("FormatBlock", false, "nombre_bloque");
(4.0 y posteriores) Establece el formato de bloque para el documento. El segundo parámetro debe ser siempre false, el tercero debe ser un nombre de un formato de bloque.

document.execCommand("JustifyLeft");
(4.0 y posteriores) Establece la alineación de la selección a la izquierda.

document.execCommand("JustifyRight");
(4.0 y posteriores) Establece la alineación de la selección a la derecha.

document.execCommand("JustifyCenter");
(4.0 y posteriores) Centra el texto seleccionado.

document.execCommand("JustifyFull");
(¿?) Justifica el texto seleccionado a izquierda y derecha.

document.execCommand("JustifyNone");
(¿?) Quita la alineación del texto dada.

document.execCommand("indent");
(4.0 y posteriores) Tabula el texto seleccionado hasta el punto de tabulación siguiente.

document.execCommand("outdent");
(4.0 y posteriores) Tabula el texto seleccionado hasta el punto de tabulación anterior.

document.execCommand("Delete");
(4.0 y posteriores) Elimina la selección actual.

document.execCommand("Cut");
(4.0 y posteriores) Copia la selección actual al portapapeles y a continuación la elimina.

document.execCommand("Copy");
(4.0 y posteriores) Copia la selección actual al portapapeles.

document.execCommand("Paste");
(4.0 y posteriores) Escribe el contenido del portapapeles donde esté situado el cursor.

document.execCommand("InsertButton", false, "id_elemento");
(4.0 y posteriores) Sobrescribe un botón en el texto seleccionado. El segundo parámetro debe ser siempre false (no se aplica), el tercer parámetro es optativo y pasa el identificador (id) del elemento.

document.execCommand("InsertFieldset", false, "id_elemento");
(4.0 y posteriores) Sobrescribe una caja de formulario (fieldset) en el texto seleccionado. El segundo parámetro debe ser siempre false (no se aplica), el tercer parámetro es optativo y pasa el identificador (id) del elemento.

document.execCommand("InsertHorizontalRule", false, "id_elemento");
(4.0 y posteriores) Sobrescribe una línea horizontal en el texto seleccionado. El segundo parámetro debe ser siempre false (no se aplica), el tercer parámetro es optativo y pasa el identificador (id) del elemento.

document.execCommand("InsertIFrame", false, "id_elemento");
(4.0 y posteriores) Sobrescribe un marco (iframe) en el texto seleccionado. El segundo parámetro debe ser siempre false (no se aplica), el tercer parámetro es optativo y pasa el identificador (id) del elemento.

document.execCommand("InsertImage", false-true, "url_imagen");
(5.0 y posteriores) Sobrescribe una imagen en el texto seleccionado. El segundo parámetro puede recibir true o false, Si recibe false recogerá la url de la imagen del tercer valor, si recibe true mostrará una ventana mediante la cual poder pasar los principales valores de esta etiqueta como la url de la imagen, el texto alternativo, etc., en este caso el tercer valor se ignorará.

document.execCommand("InsertInputButton", false, "id_elemento");
(4.0 y posteriores) Sobrescribe un botón input en el texto seleccionado. El segundo parámetro debe ser siempre false (no se aplica), el tercer parámetro es optativo y pasa el identificador (id) del elemento.

document.execCommand("InsertInputCheckbox", false, "id_elemento");
(4.0 y posteriores) Sobrescribe un botón de selección en el texto seleccionado. El segundo parámetro debe ser siempre false (no se aplica), el tercer parámetro es optativo y pasa el identificador (id) del elemento.

document.execCommand("InsertInputFileUpload", false, "id_elemento");
(4.0 y posteriores) Sobrescribe un botón de selección de archivo en el texto seleccionado. El segundo parámetro debe ser siempre false (no se aplica), el tercer parámetro es optativo y pasa el identificador (id) del elemento.

document.execCommand("InsertInputHidden", false, "id_elemento");
(4.0 y posteriores) Sobrescribe un campo oculto en el texto seleccionado. El segundo parámetro debe ser siempre false (no se aplica), el tercer parámetro es optativo y pasa el identificador (id) del elemento.

document.execCommand("InsertInputImage", false, "id_elemento");
(4.0 y posteriores) Sobrescribe una imagen de tipo input (se usa como el submit) en el texto seleccionado. El segundo parámetro debe ser siempre false (no se aplica), el tercer parámetro es optativo y pasa el identificador (id) del elemento.

document.execCommand("InsertInputPassword", false, "id_elemento");
(4.0 y posteriores) Sobrescribe un campo de introducción de contraseña en el texto seleccionado. El segundo parámetro debe ser siempre false (no se aplica), el tercer parámetro es optativo y pasa el identificador (id) del elemento.

document.execCommand("InsertInputRadio", false, "id_elemento");
(4.0 y posteriores) Sobrescribe un botón de radio en el texto seleccionado. El segundo parámetro debe ser siempre false (no se aplica), el tercer parámetro es optativo y pasa el identificador (id) del elemento.

document.execCommand("InsertInputReset", false, "id_elemento");
(4.0 y posteriores) Sobrescribe un botón de reseteo del formulario (reset) en el texto seleccionado. El segundo parámetro debe ser siempre false (no se aplica), el tercer parámetro es optativo y pasa el identificador (id) del elemento.

document.execCommand("InsertInputSubmit", false, "id_elemento");
(4.0 y posteriores) Sobrescribe un botón de envío del formulario (submit) en el texto seleccionado. El segundo parámetro debe ser siempre false (no se aplica), el tercer parámetro es optativo y pasa el identificador (id) del elemento.

document.execCommand("InsertInputText", false, "id_elemento");
(4.0 y posteriores) Sobrescribe un campo de texto en la selección. El segundo parámetro debe ser siempre false (no se aplica), el tercer parámetro es optativo y pasa el identificador (id) del elemento.

document.execCommand("InsertMarquee", false, "id_elemento");
(4.0 y posteriores) Sobrescribe una marquesina (etiqueta de texto en movimiento) en el texto seleccionado. El segundo parámetro debe ser siempre false (no se aplica), el tercer parámetro es optativo y pasa el identificador (id) del elemento.

document.execCommand("InsertParagraph", false, "id_elemento");
(4.0 y posteriores) Sobrescribe un párrafo en el texto seleccionado. El segundo parámetro debe ser siempre false (no se aplica), el tercer parámetro es optativo y pasa el identificador (id) del elemento.

document.execCommand("InsertSelectDropdown", false, "id_elemento");
(4.0 y posteriores) Sobrescribe un botón de selección en el texto seleccionado. El segundo parámetro debe ser siempre false (no se aplica), el tercer parámetro es optativo y pasa el identificador (id) del elemento.

document.execCommand("InsertSelectListbox", false, "id_elemento");
(4.0 y posteriores) Sobrescribe una lista de selección (select múltiple) en el texto seleccionado. El segundo parámetro debe ser siempre false (no se aplica), el tercer parámetro es optativo y pasa el identificador (id) del elemento.

document.execCommand("InsertTextArea", false, "id_elemento");
(4.0 y posteriores) Sobrescribe un área de texto en la selección. El segundo parámetro debe ser siempre false (no se aplica), el tercer parámetro es optativo y pasa el identificador (id) del elemento.

document.execCommand("InsertOrderedList");
(4.0 y posteriores) Convierte el texto seleccionado en una lista ordenada, o si ya lo es le quita este formato.

document.execCommand("InsertUnorderedList");
(4.0 y posteriores) Convierte el texto seleccionado en una lista sin ordenar, o si ya lo es le quita este formato.

document.execCommand("OverWrite", false, true-false);
(4.0 y posteriores) Cambia la opción del cursor, de forma que "añada" texto en caso de que el tercer parámetro sea false, o sobrescriba en el texto por donde pase sustituyendo los nuevos caracteres por los antiguos en caso de que el tercer parámetro sea true. Exactamente igual que la tecla "insert". El segundo parámetro debe ser siempre false (no se aplica).

document.execCommand("SelectAll");
(4.0 y posteriores) selecciona todo el documento.

document.execCommand("Unselect");
(4.0 y posteriores) Elimina la selección del documento.




El Editor que mostramos en el ejemplo se basa principalmente en el execCommand. El cuerpo del HTML se divide en dos partes, la primera, donde están los botones, listas, etc. para realizar las acciones, y la segunda con un marco que será el que reciba los cambios.

También se ha utilizado el objeto DialogHelper, para inicializar las fuentes y los formatos de la máquina del usuario (en la función "comienzo", que es llamada cuando se carga la máquina).

Para abrir un nuevo documento, no se ha usado document.execCommand("Open"), debido a que esto habría abierto el nuevo archivo en toda la ventana, mientras que se debería de abrir sólo en el iframe, por lo que hemos usado un location.href


En el HEAD:
<script language="javascript">
//Su explorador no soporta java o lo tiene deshabilitado; esta pagina necesita javascript para funcionar correctamente<!--
//Copyright © McAnam.com
    
    var iNumDoc = 1;
    var sNomDoc = "Documento" + iNumDoc + ".htm";
    var bCodigo = 0;
    
    window.onload=function(){comienzo()};
    
    function comienzo(){
        
        if (!document.execCommand){
            alert("Función no disponible");
            return false;
        }
        
        var iCont, sElemento, oOpcion;
        
        for (iCont = 0 ; iCont < document.all.length ; iCont++)
            document.all(iCont).unselectable = 'on';
        
        frmEditor.document.execCommand("EditMode");
        frmEditor.document.execCommand("LiveResize", false, true);
        frmEditor.document.execCommand("2D-Position", false, true);
        frmEditor.document.execCommand("MultipleSelection", false, true);
        
        // Inicializamos las fuentes del sistema
        
        // Tipos:
        for (iCont = 1 ; iCont <= document.getElementById("dialogHelper").fonts.count ; iCont++){
            
            sElemento = document.getElementById("dialogHelper").fonts.item(iCont);
            
            oOpcion = document.createElement("option");
            oOpcion.value = sElemento;
            oOpcion.text = sElemento;
            
            document.getElementById("sltTipoFuentes").add(oOpcion);
            
        }
        
        // Tamaños:
        for (iCont = 1 ; iCont < 8 ; iCont ++){
            
            oOpcion = document.createElement("option");
            oOpcion.value = iCont;
            oOpcion.text = iCont;
            
            document.getElementById("sltTamFuentes").add(oOpcion);
            
        }
        
        // Inicializamos los formatos del sistema
        
        // Tipos:
        for (iCont = 1 ; iCont <= document.getElementById("dialogHelper").blockFormats.count ; iCont++){
            
            sElemento = document.getElementById("dialogHelper").blockFormats.item(iCont);
            
            oOpcion = document.createElement("option");
            oOpcion.value = sElemento;
            oOpcion.text = sElemento;
            
            document.getElementById("sltFormatos").add(oOpcion);
            
        }
        
        frmEditor.focus();
        
    }
    
    function comando_documento(sComando, bInterfaz_de_usuario, Anadido){
        if (!document.execCommand){
            alert("Función no disponible");
            return false;
        }
        
        frmEditor.document.execCommand(sComando, bInterfaz_de_usuario, Anadido);
        
        frmEditor.focus();
        
    }
    
    function color(sComando){
        
        if (!document.execCommand){
            alert("Función no disponible");
            return false;
        }
        
        var iColor = document.getElementById("dialogHelper").ChooseColorDlg(0xFFFFFF);
        
        var sColor = iColor.toString(16);
        sColor = "#" + "000000".substring(0, 6 - sColor.length) + sColor;
        
        frmEditor.document.execCommand(sComando, false, sColor);
        
        frmEditor.focus();
         
    }
    
    function ancla(){
    
        if (!document.execCommand){
            alert("Función no disponible");
            return false;
        }
        
        var sNombre = prompt("Introduce el nombre del ancla", "");
        frmEditor.document.execCommand("CreateBookmark", false, sNombre);
        
        frmEditor.focus();
        
    }
    
    function insertar_elemento(sElemento){
        
        if (!document.execCommand){
            alert("Función no disponible");
            return false;
        }
        
        switch(sElemento){
        
            case "InsertImage":
                
                frmEditor.document.execCommand(sElemento, true);
                
             break;
            
            default:
                
                var sNombre = prompt("Introduce el id (identificador) del elemento", "");
                frmEditor.document.execCommand(sElemento, true, sNombre);
            
             break;
        
        }
        
        frmEditor.focus();
        
    }
    
    function cambio_archivo(){
    
        if (confirm("¿Desea guardar el documento actual?"))
            comando_documento("saveAs", true, sNomDoc);
        
        var archivo = objFichero.value
        
        frmEditor.location.href = archivo;
        
        sNomDoc = archivo.substring(archivo.lastIndexOf("\\") + 1);
        
    }
    
    function nuevo(){
    
        if (confirm("¿Desea guardar el documento actual?"))
            comando_documento("saveAs", true, sNomDoc);
        
        frmEditor.location.href = "about:blank";
        
        sNomDoc = "Documento" + (++iNumDoc) + ".htm";
        
    }
    
    function codigo(objBoton){
        if (bCodigo){
            bCodigo = 0;
            objBoton.innerText = "Ver código";
            
            frmEditor.document.body.innerHTML = frmEditor.document.body.innerText;
        
            var vContenedor = document.getElementById("cldBotones").children;
        
            for (var iCont = 0 ; iCont < vContenedor.length ; iCont++)
                            vContenedor.item(iCont).disabled = false;
        
            var vContenedor = document.getElementById("cldOpciones").children;
        
            for (var iCont = 0 ; iCont < vContenedor.length ; iCont++)
                    vContenedor.item(iCont).disabled = false;
        
        }else{
            bCodigo = 1;
            objBoton.innerText = "Ver diseño";
            
            frmEditor.document.body.innerText = frmEditor.document.body.innerHTML;
        
            var vContenedor = document.getElementById("cldBotones").children;
        
            for (var iCont = 0 ; iCont < vContenedor.length ; iCont++){
                    if ((vContenedor.item(iCont).type == "button") && (vContenedor.item(iCont).name != "codigo"))
                            vContenedor.item(iCont).disabled = true;
                    else
                            vContenedor.item(iCont).disabled = false;
            }
        
            var vContenedor = document.getElementById("cldOpciones").children;
        
            for (var iCont = 0 ; iCont < vContenedor.length ; iCont++)
                vContenedor.item(iCont).disabled = true;
        
        }
    }
//-->
</script>

En el BODY:
<table width="100%" height="100%" border="0" cellspacing="5" cellpadding="0">
    <tr><td width="100%" name="cldBotones" id="cldBotones">
    
        <input type="button" Value="Nuevo documento" onclick="nuevo()">
        <input type="button" Value="Abrir documento" onclick="objFichero.click()">
        <input type="button" Value="Guardar documento" onclick="comando_documento('saveAs', true, sNomDoc)">
        <input type="button" Value="Ver código" onclick="codigo(this)" name="codigo" id="codigo">
        <input type="button" Value="Imprimir" onclick="comando_documento('Print')">
        <input type="button" Value="Actualizar" onclick="comando_documento('Refresh')">
        <input type="button" Value="Deshacer" onclick="comando_documento('Undo')">
        <input type="button" Value="Rehacer" onclick="comando_documento('Redo')">
        <input type="button" Value="Posicionar absolutamente" onclick="comando_documento('AbsolutePosition', false, true)">
        <input type="button" Value="Posicionar relativamente" onclick="comando_documento('AbsolutePosition', false, false)">
        <input type="button" Value="Establecer color de fondo" onclick="color('BackColor')">
        <input type="button" Value="Establecer color de la fuente" onclick="color('ForeColor')">
        <input type="button" Value="Escribir" onclick="comando_documento('OverWrite', false, false)">
        <input type="button" Value="Sobrescribir" onclick="comando_documento('OverWrite', false, true)">
        <input type="button" Value="Seleccionar todo" onclick="comando_documento('SelectAll')">
        <input type="button" Value="Deseleccionar" onclick="comando_documento('Unselect')">
        <input type="button" Value="Negrita" onclick="comando_documento('Bold')">
        <input type="button" Value="Cursiva" onclick="comando_documento('Italic')">
        <input type="button" Value="Subrayado" onclick="comando_documento('Underline')">
        <input type="button" Value="Tachado" onclick="comando_documento('StrikeThrough')">
        <input type="button" Value="Subíndice" onclick="comando_documento('Subscript')">
        <input type="button" Value="Superíndice" onclick="comando_documento('Superscript')">
        <input type="button" Value="Eliminar formato" onclick="comando_documento('RemoveFormat')">
        <input type="button" Value="Alinear a la izquierda" onclick="comando_documento('JustifyLeft')">
        <input type="button" Value="Alinear centrado" onclick="comando_documento('JustifyCenter')">
        <input type="button" Value="Alinear a la derecha" onclick="comando_documento('JustifyRight')">
        <input type="button" Value="Justificar" onclick="comando_documento('JustifyFull')">
        <input type="button" Value="Eliminar alineación" onclick="comando_documento('JustifyNone')">
        <input type="button" Value="Reducir sangría" onclick="comando_documento('Outdent')">
        <input type="button" Value="Aumentar sangría" onclick="comando_documento('Indent')">
        <input type="button" Value="Lista ordenada" onclick="comando_documento('InsertOrderedList')">
        <input type="button" Value="Lista sin ordenar" onclick="comando_documento('InsertUnorderedList')">
        <input type="button" Value="Cortar" onclick="comando_documento('Cut')">
        <input type="button" Value="Copiar" onclick="comando_documento('Copy')">
        <input type="button" Value="Pegar" onclick="comando_documento('Paste')">
        <input type="button" Value="Convertir en ancla" onclick="ancla()">
        <input type="button" Value="Convertir en hipervínculo" onclick="comando_documento('CreateLink', true)">
        <input type="button" Value="Eliminar anclas / hipervínculo" onclick="comando_documento('UnBookmark')">
        <input type="button" Value="Eliminar" onclick="comando_documento('Delete')">
        
    </td></tr>
    <tr><td width="100%" name="cldOpciones" id="cldOpciones">
    
        <select name="sltTipoFuentes" id="sltTipoFuentes" class="areatexto" onchange="comando_documento('FontName', false, this.value);this.value=0;">
            <option Value=0>Cambiar fuente:</option>
        </select>
        <select name="slt" id="sltTamFuentes" class="sltTamFuentes" onchange="comando_documento('FontSize', false, this.value);this.value=0;">
            <option Value=0>Tamaño fuente:</option>
        </select>
        <select name="sltFormatos" id="sltFormatos" class="areatexto" onchange="comando_documento('FormatBlock', false, this.value);this.value=0;">
            <option Value=0>Cambiar formato:</option>
        </select>
        <select name="sltObjetos" id="sltObjetos" class="areatexto" onchange="insertar_elemento(this.value);this.value=0;">
            <option Value=0>Insertar:</option>
            <option Value="InsertButton">Botón</option>
            <option Value="InsertFieldset">Caja de formulario</option>
            <option Value="InsertHorizontalRule">Línea horizontal</option>
            <option Value="InsertIFrame">Marco</option>
            <option Value="InsertImage">Imagen</option>
            <option Value="InsertInputButton">Botón input</option>
            <option Value="InsertInputCheckbox">botón de selección</option>
            <option Value="InsertInputFileUpload">Selección de archivo</option>
            <option Value="InsertInputHidden">Campo oculto</option>
            <option Value="InsertInputImage">Imagen input</option>
            <option Value="InsertInputPassword">Campo de Password</option>
            <option Value="InsertInputRadio">Botón de radio</option>
            <option Value="InsertInputReset">Botón reset</option>
            <option Value="InsertInputSubmit">Botón submit</option>
            <option Value="InsertInputText">Campo de texto</option>
            <option Value="InsertMarquee">Marquesina</option>
            <option Value="InsertParagraph">Párrafo</option>
            <option Value="InsertSelectDropdown">Selección</option>
            <option Value="InsertSelectListbox">Lista de selección</option>
            <option Value="InsertTextArea">Área de texto</option>
        </select>
    
        <object name="dialogHelper" id="dialogHelper" classid="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0" height="0"></object>
        <input type="file" name="objFichero" id="objFichero" value="about:blank" onchange="cambio_archivo()" style="display:none;width:0px;height:0px;">
    </td></tr>
    <tr><td width="100%" height="100%">
        <iframe height="100%" width="100%" name="frmEditor" id="frmEditor" src="about:blank"></iframe>
    </td></tr>
</table>

Links relacionados:
Ejecutar comandos del navegador con execCommand
Recoger datos del sistema (color, fuentes disponibles, etc.)
Editor de HTML
Imprimir página Web
Utilización de anclas


Para cualquier duda, consulta, sugerencia, opinión, colaboración, etc; no dude en ponerse en contacto con nosotros

Copyright © 2002-2017 [McAnam]. Reservados todos los derechos.
www.mcanam.com