Sucede que hace poco tiempo los navegadores soportan la propiedad contenteditable (Firefox, por ejemplo, recién empezó a soportarla en su versión 3). Cuando dicha propiedad no era soportada sólo podían crearse editores de este tipo usando la propiedad designMode correspondiente al objeto document de un iframe.
Pero en el presente, es posible crear un editor usando capas (tags div) que son soportados en todos los navegadores modernos. Ejemplo:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script>
function formatText(cmd){
document.execCommand(cmd, null, null);
}
function insertarImagen(){
var u;
if(!(u=prompt('ingresar url','http://')))return;
document.getElementById('pp').focus();
document.execCommand("InsertImage",false,u);
}
</script>
</head>
<body>
<form action="" method="get">
<input name="input" type="button" onclick="formatText('bold')" value="NEGRITA" /><input name="input" type="button" onclick="formatText('italic')" value="CURSIVA" /><input name="input" type="button" onclick="formatText('underline')" value="SUBRAYADO" /><input name="input" type="button" onclick="insertarImagen()" value="INSERTAR IMAGEN" />
</form>
<div id="pp" contenteditable="true">Este es un texto editable</div>
</body>
</html>
