<!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=iso-8859-1" />
<title></title>
<style style="text/css">
input{
border:1px solid #000;
background:#CCCCCC;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
margin-bottom:3px;
}
#cm {
display:none;
}
</style>
<script type="text/javascript">
var editor;
function $(id){
return document.getElementById(id);
}
function formato(f){
editor.execCommand(f, false, null);
}
function rev(t) {
return t.split("<").join("<").split(">").join(">"). split("\"").join(""");
}
function insertarEnlace(){
var u;
if(!(u=prompt('ingresar url','http://')))return;
editor.execCommand("CreateLink",false,u);
}
function insertarImagen(){
var u;
if(!(u=prompt('ingresar url','http://')))return;
editor.execCommand("InsertImage",false,u);
}
function color(c){
editor.execCommand("forecolor",false,c);
}
function colorFondo(c){
var h=window.ActiveXObject?'backcolor':'hilitecolor';
editor.execCommand(h,false,c);
}
function inHTML(){
var u,u2;
if(!(u=prompt('ingresar html')))return;
try{
editor.execCommand("insertHtml",false,u);
}catch(e){
try{
u2=editor.selection.createRange();
u2.pasteHTML(u);
}catch(E){
alert('nop');
}
}
}
function emoticones(sm){
var url = 'smiles/'+sm+'.gif';
var navegador = navigator.appName;
if (navegador == "Microsoft Internet Explorer") {
if (url != null) {
editor.focus();
alert('tiene foco')
editor.execCommand("InsertImage", false, url);
};
editor.focus();
} else {
editor.execCommand("InsertImage",false,url);
}
}
function htmlOEditor(e){
e=e || window.event;
ob=e.target || e.srcElement
$('editor_frame').style.display=(ob.value=='html') ?'none':'block';
$('ht').style.display=(ob.value!='html')?'none':'b lock';
$('ht').innerHTML=rev(editor.body.innerHTML);
ob.value=(ob.value=='html')?'editor':'html';
}
function Validar(c,min,max){
var alertas = ['Alarga tu mensaje al menos hasta los ' + min + ' caracteres', 'Acorta tu mensaje al menos hasta los ' + max + ' caracteres'];
caracteres = editor.body.innerHTML.replace(/(<[^>]+>)/g, '');
error = (caracteres.length < min) ? alertas[0] : (caracteres.length > max) ? alertas[1] : '';
if (error) {
alert(error);
return false;
} else {
c.cm.innerHTML=rev(editor.body.innerHTML);
return true;
}
}
window.onload=function(){
editor=$('editor_frame').contentDocument || $('editor_frame').contentWindow.document;
editor.designMode='on';
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="insertar.php" onsubmit="return Validar(this,10,200);">
<input type="button" name="Submit" value="N" onclick="formato('bold')" />
<input type="button" name="Submit2" value="C" onclick="formato('italic')" />
<input type="button" name="Submit3" value="S" onclick="formato('underline')" />
<input type="button" name="Submit4" value="remover formato" onclick="formato('RemoveFormat')" />
<input type="button" name="Submit5" value="link" onclick="insertarEnlace()" />
<input type="button" name="Submit9" value="quitar link" onclick="formato('Unlink')" />
<input type="button" name="Submit6" value="imagen" onclick="insertarImagen()" />
<input type="button" name="Submit7" value="texto rojo" onclick="color('#FF0000')" />
<input type="button" name="Submit8" value="fondo rojo" onclick="colorFondo('#FF0000')" />
<input type="button" name="Submit10" value="deshacer" onclick="formato('undo')" />
<input type="button" name="Submit11" value="rehacer" onclick="formato('redo')" />
<input type="button" name="Submit12" value="insertar html" onclick="inHTML()" />
<input name="ver" type="button" id="ver" onclick="htmlOEditor(event)" value="html" />
<br />
<img src="smiles/adios.gif" onclick="emoticones('adios')" />
<img src="smiles/afirmar.gif" onclick="emoticones('afirmar')" />
<img src="smiles/borracho.gif" onclick="emoticones('borracho')" />
<img src="smiles/chillando.gif" onclick="emoticones('chillando')" />
<img src="smiles/cool.gif" onclick="emoticones('cool')" />
<br />
<div id="ht" style="width:100%; height:300px; overflow:auto; border:1px solid #000; display:none"></div>
<iframe name="editor_frame" id="editor_frame" width="100%" height="300" style=" border:1px solid #000;"></iframe>
<textarea id="cm" name="cuerpo"></textarea>
<input type="submit" value="Enviar" />
</form>
</body>
</html>