Editor de texto JS-PHP

vitro012 · #1 (**permalink**) 31/03/2009, 01:22

Hola, antes que nada un saludo a todos y gracias de antemano. Tengo un editor de texto similar a éste, solo que realmente no tengo mucho conocimiento en Javascript aunque si en otros lenguajes, y espero y me puedan ayudar

.

tengo el sigueiente codigo

<="JavaScript">
function Inicializar()
{
editor.document.designMode = 'On';
}
function Negrita()
{
editor.document.execCommand('bold', false, null);
}

</scrip> // bueno faltan algunas letras pero es para no causar problemas, ya que algunas páginas toman las llamadas a los lenguajes.

<form id="form1" name="form1" method="post" action="" target="editor">

<h3>Editor de texto</h3>
<p>
<img src="Imagenes/negrita.png" onclick="Negrita()"/>

</form>
<br /><br />

<select name="selecciona" size="1" class="">
</select>
</form>

<iframe id="editor" name="editor" style="width: 500px; height:150px" marginheight="2" scrolling="auto" frameborder="1" ></iframe>

Como ven estoy usando, un iframe. Lo que necesito es saber como puedo comunicar este codigo con PHP, es decir, necesito guardar lo que el usuario escribe en una Base de datos (para después mostrarlo en una página web). Y saber si el formato que genera javascript es del tipo <b>negritas</b>.
Ademas si me recomiendas usar el metodo, document.getElementById("iframe").

ME INTERESA MUCHO ALGO SIMILAR AL FUNCIONAMIENTO DE ESTA PÁGINA.

GRACIAS!!

Panino5001 · #2 (**permalink**) 31/03/2009, 06:50

Para tomar el contenido (luego podés asignarlo al value de un campo oculto), podrías hacer lo siguiente:

Código PHP:

  var edit=document.getElementById('editor').contentWindow.document || document.getElementById('editor').contentDocument;
var valor=edit.body.innerHTML;

vitro012 · #3 (**permalink**) 31/03/2009, 14:38

ok entiendo la idea de tomar la el contenido por medio del ID, pero no se como asignar la variable al value del campo oculto

, en php seria value"<?php $valor ?>", pero al intentar hacerlo en js lo toma como si fuera html value "<"java"> variable <script> ".

Realmente desconozco como usar Js. se para que sirven algunas funciones pero hasta ahi.

Panino5001 · #4 (**permalink**) 31/03/2009, 14:58

Suponiendo que tu campo oculto esté definido así:

Código PHP:

  <input type="hidden" name="oculto" id="pepe" />

Podés asignarle el valor de la variable llamada "valor" de esta manera:

Código PHP:

  document.getElementById("pepe").value=valor;

Como ves, referenciamos al campo por su atributo id y le asignamos un atributo value. Luego, en php tendrás que tomar su valor basándote en el atributo name, como siempre (ej: echo $_POST['oculto'])

vitro012 · #5 (**permalink**) 31/03/2009, 22:52

mando mi nuevo codigo a ver si pueden ayudarme, modifique un poco el codigo ya que tenia algunos incovenientes en firefox,

Código PHP:

 
    <head runat="server"> 
      
 
        <!--Código en JavaScript-->  
 
<!--     <script language="javascript" type="text/javascript" src="JS/Editor.js">  --> 
     
     
<SCRIPT Language="JavaScript" type="text/javascript">     
     
 
 
function Init() { 
    document.getElementById('iView').contentWindow.document.designMode = "on"; 
}  
 
function HacerNegrita() { 
    document.getElementById('iView').contentWindow.document.execCommand("bold", false, null); 
    return false; 
}  
 
function HacerCursiva() { 
    document.getElementById('iView').contentWindow.document.execCommand('italic', false, null); 
    return false; 
}  
 
 
var edit=document.getElementById('editor').contentWindow.document || document.getElementById('editor').contentDocument; 
var valor=edit.body.innerHTML;   
 
var prueba=document.getElementById("valorframe").value=valor;   
 
 
    </script>  
 
</head> 
<body onload="Init()"> 
<body style="background-color: transparent;">  
<form id="form1" name="form1" runat="server"  method="post"  > 
        <div> 
<iframe id="iView"    name="iview" runat ="server" style="width: 400px; height: 250px; background-color:#CCFFFF; border: 2px" frameborder="1" enableviewstate="true" allowtransparency="true" ></iframe> 
          <br /> 
 
      <img src="borrarbasura.jpg" onclick="HacerNegrita()" alt="negrita"/> 
      <img src="actualizar.jpg" onclick="HacerCursiva()" alt="cursiva"/> 
 
<input type="hidden" name="oculto" id="valorframe" />  
  </div> 
          
          
 <input name="enviar" type="submit" value="enviar" />  
 
</form> 
 
<?php  echo $_POST['oculto']; 
 
 ?>

gracias a Panino5001, por la ayuda que me ha brindado, aunque yo sigo igual de perdido en esto de Js, jeje!

Si alguien sabe en que estoy mal, porfa ayudenme, je!!

Panino5001 · #6 (**permalink**) 01/04/2009, 00:05

Fijate así:

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=iso-8859-1" />
<title>test</title>
<script>    
function Init() {
    document.getElementById('iView').contentWindow.document.designMode = "on";
} 
function HacerNegrita() {
    document.getElementById('iView').contentWindow.document.execCommand("bold", false, null);
    return false;
} 
function HacerCursiva() {
    document.getElementById('iView').contentWindow.document.execCommand('italic', false, null);
    return false;
} 
function valorizarOculto(){
    var edit=document.getElementById('iView').contentWindow.document || document.getElementById('iView').contentDocument;
    var valor=edit.body.innerHTML;  
    document.getElementById("valorframe").value=valor; 
    setTimeout(function(){alert(document.getElementById("valorframe").value);},300);
}
</script>  
</head>
<body onload="Init()"> 
<form action="?" method="post" onsubmit="valorizarOculto()">
<div>
<iframe id="iView"    name="iview" runat ="server" style="width: 400px; height: 250px; background-color:#CCFFFF; border: 2px" frameborder="1" enableviewstate="true" allowtransparency="true" ></iframe>
          <br />

      <img src="borrarbasura.jpg" onclick="HacerNegrita()" alt="negrita"/>
      <img src="actualizar.jpg" onclick="HacerCursiva()" alt="cursiva"/>

<input type="hidden" name="oculto" id="valorframe" /> 
  </div>
 <input name="enviar" type="submit" value="enviar" /> 
</form>
<?php  echo stripslashes($_POST['oculto']); ?>
</body>
</html>

vitro012 · #7 (**permalink**) 02/04/2009, 19:26

solo para agradecer a Panino5001, y al foro ya que el codigo ya funciona GRACIAS!!!