Como crear un editor de textos en html y javascript que guarde el texto en un txt en el servidor con php
Seria algo así como el propio editor de texto que aquí tienen para hacer la pregunta.
Solo que obviamente más sencillo, me gustaría que pudiera cambiar el texto en negrita, normal, itálica y subrayado y que además se puedan poner imágenes(como si fuera WORD).
No pido que me lo hagan, solo pido verdadera ayuda!, llevo intentando esto todo el mes y no termino de entender como se hace (es mi proyecto final!).
Lo de guardar el txt con PHP si lo se hacer, y también los debidos botones para cada cosa que van en HTML, el problema es lo que controla el documento, es decir el javascript, no entiendo bien como hacer para que edite el texto en tiempo real y mucho menos para que envíe todo a php.
Todo se guarda en un TXT, también la imagen, puesto que cuando el usuario carga una imagen en el documento debe verla como tal junto al texto, pero al guardar en realidad se guarda la url de la imagen.
2 respuestas
Una de las cosas más sobrevaloradas en javascript son los editores WYSIWYG. Es realmente bastante sencillo crearlos una vez que conocemos el mecanismo del método execCommand, introducido por Internet Explorer y adoptado (y hasta mejorado) por otros navegadores.
No te explicaré el funcionamiento (para eso hay ya páginas donde lo hacen de manera muy completa), sino que sólo te mostraré el código de un ejemplo sencillo sin CSS3 para que realmente veas que no hay magia ni mucha complejidad práctica detrás de estas cosas.
Al mismo tiempo, señalar que no me gustan demasiado estos editores porque son bastante vulnerables a la inyección de código malicioso y además permiten que los usuarios peguen textos o tablas desde editores como word o excel con todas las consecuencias nefastas que eso puede acarrear (en partes dinámicas de diseños cuidadosamente elaborados he encontrado tablas excel con tipografía Comic rosada a tamaño gigante, por ejemplo, gracias al mal uso de esta herramienta).
Bueno, aquí el ejemplo (probado en Explorer, Ópera, Safari y Firefox) del código utilizado:
<!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>editor</title>
<style>
input{
border:1px solid #000;
background:#CCCCCC;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
margin-bottom:3px;
}
</style>
<script>
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.body.focus();
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{
editor.body.focus();
u2=editor.selection.createRange();
u2.pasteHTML(u);
}catch(E){
alert('nop');
}
}
}
function htmlOEditor(e){
e=e || window.event;
ob=e.target || e.srcElement
$('edit').style.display=(ob.value=='html')?'none':'block';
$('ht').style.display=(ob.value!='html')?'none':'block';
$('ht').innerHTML=rev(editor.body.innerHTML);
ob.value=(ob.value=='html')?'editor':'html';
}
window.onload=function(){
editor=$('edit').contentDocument || $('edit').contentWindow.document;
editor.designMode='on';
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<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()" />
<br />
<iframe id="edit" width="100%" height="300" style=" border:1px solid #000;"></iframe>
<div id="ht" style="width:100%; height:300px; overflow:auto; border:1px solid #000; display:none"></div>
<div style="margin-top:3px;"><input name="ver" type="button" id="ver" onclick="htmlOEditor(event)" value="html" /></div>
</form>
</body>
</html>
La forma de agregar archivos está muy bien explicada por SireZ
Esperamos haberte ayudado y no olvides valorar las respuestas ;)
Debes utilizar php para subir la imagen al servido.
Entonces debes tener 2 scripts:
1 en html así:
<form enctype="multipart/form-data" action="uploader.php" method="POST"> <input name="uploadedfile" type="file" /> <input type="submit" value="Subir archivo" /> </form>
El código de uploader.php sería algo así:
¿
<?php
// Inicio session
if (!isset($_SESSION)) { session_start();}
// recupero el nombre del archivo de texto
$id = $_SESSION['mi_archivo_de_texto'];
$target_path = "uploads/";
$target_path = $target_path . basename( $_FILES['uploadedfile']['name']); if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) { echo "El archivo ". basename( $_FILES['uploadedfile']['name']). " ha sido subido";
} else{
echo "Ha ocurrido un error, trate de nuevo!";
}
$foto = basename( $_FILES['uploadedfile']['name']);
$len = strlen($foto);
$tipo = substr($foto,$len-4);
$a1 = "uploads/".$foto;
$a2 = "uploads/".$id.$tipo;
rename($a1, $a2);
$a3 = $id.$tipo;
?>El script levantó la imagen, la guardo en la carpeta uploads con el nombre de $id
Que debe ser el nombre de tu archivo de texto (sin la extensión TXT)
Espero te funcione correctamente y no te rompas la cabeza como sucede cuando uno incursiona en el campo de levantar y almacenar imágenes en el servidor.
Nos cuentas como avanzas.
SiREZ