Guardar el contenido de un editor WYSIWYG en base de datos mediante PHP y MySQL

Los editores WYSIWYG permiten al usuario insertar texto formateado en HTML dentro de un campo input. Puedes convertir facilmente un campo textarea en un editor WYSIWYG utilizando un plugin de jQuery. Existen cantidad de ellos para ese propósito, solo debes elegir el que esté más acorde en base a tus necesidades. Tanto CKEditor, como TinyMCE, son los más populares en ese sentido.

Una vez se ha enviado el contenido del editor WYSIWYG, debemos almacenar su valor para usarlo posteriormente. Generalmente, en desarrollo web, utilizamos las bases de datos para almacenar el contenido de los diferentes campos. Por lo tanto, el contenido de un editor WYSIWIG, por regla general, debe almacenarse, como he dicho antes, en base de datos. El método $_POST es la manera más sencilla de obtener el valor de un editor HTML y guardar el contenido del WYSIWYG en base de datos. En este tutorial, te mostrare,ps a guardar el contenido de un editor WYSIWYG en base de datos mediante PHP y MySQL. ¡Presta atención!

Crear tabla de la base de datos

Para almacenar el contenido de nuestro editor HTML, necesitamos crear una tabla en la base de datos. El siguiente SQL crea una tabla editor con campos muy basiquitos.

CREATE TABLE `editor` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `content` text COLLATE utf8_unicode_ci NOT NULL,
 `created` datetime NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Configuración de base de datos

Utilizaremos el fichero dbconfig.php para conectarnos a la base de datos desde PHP. Para ello debemos definir el host ($dbhost), el nombre de usuario ($dbUsername), la contraseña ($dbPassword) y el nombre de la base de datos ($dbName).

<?php
// Database configuration
$dbHost     = "localhost";
$dbUsername = "root";
$dbPassword = "root";
$dbName     = "noprog";

// Create database connection
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);

// Check connection
if ($db->connect_error) {
    die("Connection failed: " . $db->connect_error);
}

Editor HTML

Antes que nada, tendremos que crear un formulario HTML con un campo textarea para permitir que el usuario pueda añadir contenido y enviarlo.

<form method="post" action="submit.php">
    <textarea name="editor" id="editor" rows="10" cols="80">
    This is my textarea to be replaced with HTML editor.
    </textarea>
    <input type="submit" name="submit" value="SUBMIT">
</form>

Ahora, para que el usuario nos envíe texto formateado en HTML necesitamos convertirlo en un editor HTML WYSIWYG. Puedes utilizar cualquier plugin de jQuery para ello. En nuestro caso utilizaemos el plugin CKEditor.

<script src="ckeditor/ckeditor.js"></script>

Después, mediante las opciones del plugin debemos asignar la función WYSIWYG al textarea que acabamos de crear.

<script>
CKEDITOR.replace('editor');
</script>

Guardar el contenido del editor HTML

Una vez que el usuario envía el formulario, el contenido del editor llegará al fichero del lado del servidor (script.php) para que se pueda insertar en base de datos.

  • Recuperamos el contenido del editor
  • Insertamos el contenido en base de datos
  • Mostramos el mensaje de estado al usuario
<?php
// Include the database configuration file
require_once 'dbConfig.php';

$editorContent = $statusMsg = '';

// If the form is submitted
if(isset($_POST['submit'])){
    // Get editor content
    $editorContent = $_POST['editor'];
    
    // Check whether the editor content is empty
    if(!empty($editorContent)){
        // Insert editor content in the database
        $insert = $db->query("INSERT INTO editor (content, created) VALUES ('".$editorContent."', NOW())");
        
        // If database insertion is successful
        if($insert){
            $statusMsg = "The editor content has been inserted successfully.";
        }else{
            $statusMsg = "Some problem occurred, please try again.";
        } 
    }else{
        $statusMsg = 'Please add content in the editor.';
    }
}
?>

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP