Comunidad de diseño web y desarrollo en internet online

Como hago un editor de texto en php y msql

Citar            
MensajeEscrito el 03 Jun 2011 04:17 am
Hola amigos :)

He estado buscando como hacer un editor de texto WYSIWYG con php y Msql, donde pueda usar negritas, cursivas, alineados, insertar tablas, imagenes etc.

La idea es hacer que las secciones sean administrables y pueda insetar texto con estilos sin que entre al dreamweaver y haga el texto dentro.

:? Tengo una vaga informacion de como se opera eso

Se crea una tabla en la base de datos con los campos titulo, contenido.

y en el HTML seria imprimir los campos de la base de datos

<? $row['title']; ?>
<? $row['summary']; ?> ( U_U Aqui es donde se imprimiria el codigo del texto que genera el editor)

:crap: Mi duda es como hago eso como puedo sacar ese codigo con que editor seria recomendable

O bien si estoy pensandolo mal. :ownz:

Espero me puedan ayudar :(

Garcias amigos. (y)

Por kakashi2000

Claber

559 de clabLevel

5 tutoriales

Genero:Masculino  

Desarrollador de aplicaciones Web

firefox
Citar            
MensajeEscrito el 03 Jun 2011 02:20 pm
bueno hay ya proyectos WYSIWYG como el tinymce o el ckeditor
http://ckeditor.com/
http://tinymce.moxiecode.com/
ya que estos proyectos ya son maduros en cierto aspecto , seriav er cual te te conviene pero eso si te queda mucho por aprender jeje yo aun sigo aprendiendo :)

Por tuadmin

Claber

598 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 03 Jun 2011 02:52 pm
Gracias por tu respuesta tuadmin.

Dejame revisarlo, habia visto el manejo que tiene el ckeditor y la vdd esta muy bueno, pero ya no supe como hacerlo funcionar o como opera :ownz:

Voy a revisar el otro haber que tiene de opciones y si es facil de configurar.

Esos editores no almacenan los datos en una bases porpiamente vdd?

Saludos,

Por kakashi2000

Claber

559 de clabLevel

5 tutoriales

Genero:Masculino  

Desarrollador de aplicaciones Web

firefox
Citar            
MensajeEscrito el 03 Jun 2011 03:33 pm
no solo son al inrterfaz grafica lo otro ya depende de ti

Por tuadmin

Claber

598 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 03 Jun 2011 03:42 pm
A perfecto creo porder con el resto.

gracias tuadmin voy hacerlo.

Saludos, :D

Por kakashi2000

Claber

559 de clabLevel

5 tutoriales

Genero:Masculino  

Desarrollador de aplicaciones Web

firefox
Citar            
MensajeEscrito el 07 Jun 2011 11:15 pm
Hola tuadmin

Solo para comentarte que ya pude desarrollar la parte del editor HTML hacia una base de datos pude hacerlo sin problemas, la vdd que me funciono muy bien el http://tinymce.moxiecode.com/

Mas de rato publicare como esta mi codigo armado.

Saludos, Gracias :wink:

Por kakashi2000

Claber

559 de clabLevel

5 tutoriales

Genero:Masculino  

Desarrollador de aplicaciones Web

firefox
Citar            
MensajeEscrito el 08 Jun 2011 04:45 pm
Hola a todos como se los prometi le voy a mostrar como realice mi editor de contenidos con PHP y MyQSL

Esto con relacion al apoyo que tuve de tuadmin

Les mostrare con pasos siguientes.

1.- Descargate el WYSIWYG [url=http://tinymce.moxiecode.com/ ]aqui[/url]

2.- Este es opcional. Instala el XAMPP para que crees un servidor local y puedas realizar pruebas.

3.- Hacer una base de datos y crear una tabla para poder introducir lo datos y despues imprimirlos.

Name BD = El nombre que tu quieras
Tabla = El nombre que tu quieras
Los campos que utilice en la tabla es
Id = con autoincrement
author= Varchar (255)
text = TEXT

4.- Create un tres archivos 3 en php y 4 en html.
insertar.php, seccion.php, conector_BD y editar.html

5.- Para el archivo insertar.php utiliza el siguiente codigo, este archivo nos va ayudar a insertar los datos que estemos capturando en el form.

Código PHP :

<?php
//1. Crear conexión a la Base de Datos
$conexion = mysql_connect("localhost","usuario","pass");
if (!$conexion) {
die("Fallo la conexión a la Base de Datos: " . mysql_error());
}
//2. Seleccionar la Base de Datos a utilizar
$seleccionar_bd = mysql_select_db("name_BD", $conexion);
if (!$seleccionar_bd) {
die("Fallo la selección de la Base de Datos: " . mysql_error());
}
//3. Tomar los campos provenientes del Formulario
$author = $_POST['author'];
$text = $_POST['text'];
//4. Insertar campos en la Base de Datos (No inserto el id_empleado ya que se genera automaticamente)
$insertar = mysql_query("INSERT INTO `name_BD`.`name_table` (`id` ,`author` ,`text`) VALUES (NULL , '$author', '$text');", $conexion);
if (!$insertar) {
die("Fallo en la insercion de registro en la Base de Datos: " . mysql_error());
}
else{
echo '<SCRIPT LANGUAGE="javascript">location.href = "editar.html";   </SCRIPT>';
}
//4. Cerrar conexión a la Base de Datos
mysql_close($conexion);
?>


6.- El archivo seccion.php ve el siguiente codigo, este imprimira el contenido que generes con el editor.html

Código PHP :

<?php
include ('conectarBD.inc.php'); 
//y hacemos la consulta
$table = "name_table";
$catalog = "select* from $table";
$resEmp = mysql_query($catalog, $conexion) or die(mysql_error());
?>
<!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>Documento</title>
</head>
<body>
  <?php while($row= mysql_fetch_assoc($resEmp)){ ?>
   <div style="margin:10px 0;">
        <div style="margin:10px 0 0 0;"><? echo $row['author'] ?></div>
        <div style="margin:10px 0 0 0;"><? echo $row['text'] ?></div>
    </div>
 <?php } ?>
</body>
</html>


7.- El archivo editar.html a qui hiria las librerias que vienen el zip de TINYMCE fijate como esta armado asi podras integralo mejor.

Código HTML :

<!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>Editar Texto</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/comons.css" />
<!-- TinyMCE -->
<script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
   tinyMCE.init({
      // General options
      mode : "textareas",
      theme : "advanced",
      plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave",

      // Theme options
      theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
      theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
      theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
      theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft",
      theme_advanced_toolbar_location : "top",
      theme_advanced_toolbar_align : "left",
      theme_advanced_statusbar_location : "bottom",
      theme_advanced_resizing : true,

      // Example content CSS (should be your site CSS)
      content_css : "css/content.css",

      // Drop lists for link/image/media/template dialogs
      template_external_list_url : "lists/template_list.js",
      external_link_list_url : "lists/link_list.js",
      external_image_list_url : "lists/image_list.js",
      media_external_list_url : "lists/media_list.js",

      // Style formats
      style_formats : [
         {title : 'Bold text', inline : 'b'},
         {title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},
         {title : 'Red header', block : 'h1', styles : {color : '#ff0000'}},
         {title : 'Example 1', inline : 'span', classes : 'example1'},
         {title : 'Example 2', inline : 'span', classes : 'example2'},
         {title : 'Table styles'},
         {title : 'Table row 1', selector : 'tr', classes : 'tablerow1'}
      ],

      // Replace values for the template plugin
      template_replace_values : {
         username : "Some User",
         staffid : "991234"
      }
   });
</script>
<!-- /TinyMCE -->
</head>
<body>
   <div id="layout">
       <div id="header">
           <div class="logo"><img src="img/logo_firma.jpg" width="180" height="57" /></div>
         </div>
        <div class="spacer"></div>
        <div id="contend">
            <div class="blocks">
               <div><h2 style="color: #666;">Gestor de contenido</h2></div>
                <div>
                   <form name="form1" method="post" action="insert.php">
                       <div><label for="author"><strong>Autor:</strong></label>&nbsp;&nbsp;<input type="text" name="author" id="author" /></div>
                        <div style="margin: 5px 0;">&nbsp;</div>
                        <div><label for="text"><strong>Contenido:</strong></label></div>
                        <div><textarea id="text" name="text" rows="10" cols="80"></textarea></div>
                        <div style="margin: 5px 0;">&nbsp;</div>
                        <div align="right" style="padding-right:20px;"><input type="submit" name="btn" id="btn" value="Guardar Cambios"></div>
                    </form>
                </div>
            </div>
            <div class="spacer"></div>
        </div>
    </div>
</body>
</html>


8.- Y lo que es importante el archivo conector_BD.inc.php, esto para hacer la conexion a la base de datos.

Código PHP :

<?php 
//Aqui haremos la conexion a la base de datos 
$conexion = mysql_connect("localhost", "root", "");
mysql_select_db("pruebas", $conexion); ?>


9.- Y realiza pruebas ya con todo esto te debe funcionar.

Suerte y espero que te pueda servir :wink:

Saludos, :cool:

Por kakashi2000

Claber

559 de clabLevel

5 tutoriales

Genero:Masculino  

Desarrollador de aplicaciones Web

firefox
Citar            
MensajeEscrito el 09 Ene 2013 02:47 am
me sirvio :) al 100

Por elenita

0 de clabLevel



 

firefox
Citar            
MensajeEscrito el 14 Ene 2013 01:21 am
Para que puedas tener una interfaz WYSIWYG, normalmente se usa pleno JavaScript y CSS, ya que esto permite la posibilidad de ir interactuando en tiempo real con el texto, en vez de mandarlo a que el servidor lo procese y lo devuelva formateado. TinyMCE es una herramienta que precisamente funcion a partir de los dos lenguajes mencionados.

Si quieres ayuda para desarrollarla desde cero, puedes postear en el foro correspondiente y trataré de ayudarte, pero lo más recomendable en estos casos es usar librerías más maduras y compatibles.


tl;dr: puedes hacer una interfaz para el formato de texto con php, pero es mucho más amigable para el usuario hacerla en javascript+css :) (y más fácil implementar una ya creada)

Por Lunatic Lycanthrop

Claber

1203 de clabLevel

7 tutoriales

1 ejemplo

Genero:Masculino  

The dark places where wolves access internet with 46,6 kbps

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.