Debe crear un pequeño editor en una página XHTML que implemente los siguientes comandos:
Copiar
Cortar
Pegar
Negrita
Itálica
Subrayado
Insertar un enlace
Los siguientes comandos son opcionales:
Cambiar la fuente
Insertar una imagen
Pasar de modo visual a modo código y vice-versa
Cambiar el estilo de párrafo a título
Justificar al centro
Justificar a la derecha
Justificar a la izquierda
Insertar lista ordenada
Insertar lista no ordenada
Para ello deberá utilizar el comando Javascript, existente en Internet Explorer a partir de la versión 5.0, que se llama execCommand.
bSuccess = object.execCommand(sCommand [, bUserInterface] [, vValue])
bSuccess: El valor de retorno de un llamado a execCommand. Devuelve true si el comando ejecutó OK, y false si falló.
sCommand: Alguno de los comandos predefinidos que pueden ser utilizados para manipular un documento, tal como "bold" para hacer el texto seleccionado negrita.
bUserInterface: Un valor booleano que indica si el comando despliega una interfaz de usuario.
vValue: Un valor variante que puede ser utilizado en combianación con sCommand para pasar un valor requerido. Por ejemplo, si se pasara "FontName" como sCommand, false como bUserInterface, y "Verdana" como vValue, entonces el texto seleccionado se cambiaría a Verdana.
Por ejemplo para hacer que el texto escrito se vea en negrita:
<html>
<head>
<title>Utilizando execCommand para hacer negrita el texto</title>
<script language="JavaScript">
function Inicializar()
{
editor.document.designMode = 'On';
}
function Negrita()
{
editor.document.execCommand('bold', false, null);
}
</script>
</head>
<body onLoad="Inicializar()">
<iframe id="editor" name="editor" style="width:
200px; height:70px"></iframe>
<br /><br />
<input type="button" onClick="Negrita()" value="Negrita"
/>
</body>
</html>
Se puede encontrar una lista completa de los comandos que se pueden utilizar en Microsoft. De todos modos estos son algunos de los comandos:
ForeColor: Trae o pone el color de la letra de la región
seleccionada.
BackColor: Trae o pone el color de fondo de la región
seleccionada.
Bold: Cambia la región seleccionada a negrita o vice-versa.
Italic: Cambia la región seleccionada a itálica
o vice-versa.
Underline: Cambia la región seleccionada a subrayado
o vice-versa.
Copy: Copia la región seleccionada al portapapeles.
Cut: Corta la región seleccionada al portapapeles.
Paste: Agrega los datos del portapapeles a la región,
si es posible.
InsertHorizontalRule: Agrega una división horizontal.
InsertImage: Despliega un diálogo de IE modal que contiene
características de selección de imagen, modificación de
la propiedad alt, tamaño del borde, etc.
InsertMarquee: Convierte el texto seleccionado en marquee.
InsertSelectDropDown: Agrega una lista desplegable a la región
seleccionada.
Print: Despliega el diálogo de impresión para
que la región seleccionada pueda ser impresa.
Refresh: Refresca la región.
CreateLink: : Despliega un diálogo
de IE modal que permite agregar un enlace utilizando el texto seleccionado o
con texto nuevo.
InsertUnorderedList: Cambia el texto seleccionado de normal
a lista no ordenada y vice-versa.
Usted podrá usar su originalidad y crear botones para su editor. Haga que la interfaz sea lo más amigable posible. Puede a su gusto utilizar clases o no, etc.