Guarde el contenido del Editor WYSIWYG en la base de datos utilizando PHP y MySQL


El editor WYSIWYG permite al usuario insertar el texto con formato HTML en el campo de entrada. Puede agregar fácilmente el editor HTML WYSIWYG al área de texto usando el complemento jQuery. Hay muchos complementos de jQuery disponibles para agregar el editor WYSIWYG al área de texto. CKEditor y el editor TinyMCE son los complementos más populares para agregar un editor de texto enriquecido en la página web.
Una vez que se envía el contenido del editor WYSIWYG , el valor debe almacenarse para su uso posterior. Generalmente, en la aplicación web, la base de datos se utiliza para almacenar el contenido de entrada. Para guardar el contenido del editor WYSIWYG, el valor HTML de entrada debe insertarse en la base de datos. El método PHP $ _POST es la forma más fácil de obtener el valor del editor HTML y guardar el contenido del editor WYSIWYG en la base de datos. En este tutorial, le mostraremos cómo insertar y guardar contenido HTML del editor WYSIWYG en la base de datos utilizando PHP y MySQL.

Crear tabla de base de datos

Para almacenar el contenido del editor HTML, se necesita crear una tabla en la base de datos. El siguiente SQL crea una editortabla con algunos campos básicos en la base de datos MySQL.
CREATE  TABLE  `editor` (
  ` id`  int ( 11 ) NOT  NULL AUTO_INCREMENT,
  `content`  text  COLLATE utf8_unicode_ci NOT  NULL ,
  ` created` datetime NOT  NULL ,LLAVE 
 PRIMARIA ( `id` )
) MOTOR = InnoDB  DEFAULT  CHARSET = utf8 COLLATE = utf8_unicode_ci;
Agregue WYSIWYG HTML Editor a Textarea con CKEditor

Configuración de la base de datos (dbConfig.php)

El dbConfig.phparchivo se utiliza para conectar la base de datos mediante PHP y MySQL. Especifique el host de la base de datos ( $dbHost), el nombre de usuario ( $dbUsername), la contraseña ( $dbPassword) y el nombre ( $dbName) según sus credenciales de la base de datos.
<? php
 // Configuración de la base de datos
 $ dbHost      "localhost" ;
$ dbUsername  "root" ;
$ dbPassword  "root" ;
$ dbName      "codexworld" ;

// Crear conexión de base de datos
 $ db  = new  mysqli ( $ dbHost $ dbUsername $ dbPassword $ dbName );

// Revisa la conexión
 si ( $ db -> connect_error ) {
    die ( "Falló la conexión:"  $ db -> connect_error );
}

Formulario de editor HTML WYSIWYG

Al principio, cree un formulario HTML con el campo de entrada de área de texto para permitir que el usuario agregue contenido y envíe datos.
< form  method = "post"  action = "submit.php" > 
    < textarea  name = "editor"  id = "editor"  rows = "10"  cols = "80" >
    Este es mi área de texto para ser reemplazado con el editor HTML.
    </ textarea > 
    < input  type = "submit"  name = "submit"  value = "SUBMIT" > 
</ form >
Para aceptar contenido HTML del usuario, el elemento textarea debe convertirse en el editor WYSIWYG. Puede usar cualquier complemento del editor WYSIWYG (CKEditor o TinyMCE) para agregar el editor HTML al campo de entrada de área de texto. 
Agregue el editor WYSIWYG con CKEditor:
incluya el archivo de biblioteca JS del complemento CKEditor.
< script  src = "ckeditor / ckeditor.js" ></ script >
Utilice el CKEDITOR.replace()método para reemplazar el campo de área de texto con el editor WYSIWYG.
< script > 
CKEDITOR.replace ( 'editor' ); 
</ script >
Agregue el editor WYSIWYG con TinyMCE:
incluya el archivo de biblioteca JS del complemento del editor TinyMCE.
< script  src = "tinymce / tinymce.min.js" ></ script >
Utilice el tinymce.init()método para reemplazar el campo de área de texto con el editor WYSIWYG.
< script > 
tinymce.init ({
    selector: '#editor' 
}); 
</ script >

Guardar contenido del editor HTML en la base de datos

Una vez que se envía el formulario, el contenido del editor se publica en el script del lado del servidor ( submit.php) para insertar el contenido con formato HTML en la base de datos.
  • Recupere el contenido del editor de los datos del formulario publicado utilizando el método $ _POST en PHP .
  • Inserte el contenido HTML en la base de datos usando PHP y MySQL.
  • Mostrar el mensaje de estado al usuario.
<? php
 // Incluir el archivo de configuración de la base de datos
 require_once  'dbConfig.php' ;

$ editorContent  $ statusMsg  '' ;

// Si el formulario se envía
 si (isset ( $ _POST [ 'submit' ])) {
     // Obtenga el contenido del editor
     $ editorContent  $ _POST [ 'editor' ];
    
    // Compruebe si el contenido del editor está vacío
     si (! Empty ( $ editorContent )) {
         // Inserte el contenido del editor en la base de datos
         $ insert  $ db -> query ( "INSERT INTO editor (contenido, creado) VALUES ('" . $ editorContent . "', NOW ())" );
        
        // Si la inserción de la base de datos se realiza correctamente
         si ( $ insert ) {
             $ statusMsg  "El contenido del editor se ha insertado correctamente". ;
        }más{
            $ statusMsg  "Ocurrió algún problema, por favor intente nuevamente." ;
        } 
    }más{
        $ statusMsg  'Por favor agregue contenido en el editor.' ;
    }
}
?>

Conclusión

No solo el contenido del editor CKEditor y TinyMCE, sino que también puede usar el código de ejemplo para insertar cualquier contenido del editor HTML en la base de datos. Este fragmento de código es muy útil para la aplicación CRUD donde se usa el editor WYSIWYG para insertar contenido HTML. Puede mejorar fácilmente nuestra funcionalidad de script para agregar campos de entrada adicionales con el editor WYSIWYG y guardar todo el contenido en la base de datos utilizando PHP y MySQL.

Acerca de: Programator

Somos Instinto Programador

0 comentarios:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Con tecnología de Blogger.