Lenguaje PHP

Integrar TinyMCE en PHP & MySQL

Save TinyMCE Editor Content with PHP & MySQL

Integrar TinyMCE en PHP & MySQL. En este tutorial nos enfocaremos en usar el editor tinymce.  Lo que haremos será usar este editor para almacenar información en la base de datos.

Recordemos, que los sitios web utilizan este editor para redactar los artículos, incluso el mismo WordPress usa este editor.  Además, trabaja con varios lenguajes como ser: HTML, PHP, JavaScript, etc.

Generalmente, almacenamos el mismo contenido en la base de datos, pero cuando almacenamos HTML o código con etiquetas, entonces necesitamos codificar el contenido en entidades HTML para almacenar en la base de datos. También necesitamos decodificar las entidades HTML que muestran el código.

Así que, si estás desarrollando un sitio web para guardar y mostrar código y buscando solución, entonces estás aquí en el lugar correcto.

Integrar TinyMCE en PHP & MySQL: Estructura

Detallaremos punto a punto en este tutorial  para almacenar el contenido del editor en la base de datos y la vista previa.

Los principales archivos para ejemplo son los siguientes.

  • Index.php
  • tinymce_editor.js
  • code.php
  • db_mce.sql

Primer paso: Crear tabla de base de datos MySQL

Primero crearemos el código de la tabla de base de datos MySQL para almacenar lo que digitamos en el editor. Usaremos la siguiente tabla crear consulta para crear la tabla y tendrá de nombre «Artículos«.

CREATE TABLE `articulos` (
`id` int(11) NOT NULL,
`contenido` mediumtext COLLATE utf8mb4_unicode_ci NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

INSERT INTO `articulos` (`id`, `contenido`) VALUES
(1, '<p><strong>TinyMCE</strong></p>\r\n<p>Is the most advance JavaScript WYSIWYG HTML editor to create contents for websites.</p>');

ALTER TABLE `articulos`
ADD PRIMARY KEY (`id`);

ALTER TABLE `articulos`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;

Segundo paso: Declarar librerías Bootstrap, JavaScript, Archivos CSS

Para que funcione el ejemplo agregaremos la librería Bootstrap para el diseño con Bootstrap. Incluiremos el archivo JavaScript TinyMCE para crear un editor avanzado usando la etiqueta textarea. También incluiremos run_prettify.js archivo JavaScript para mostrar código con CSS.

<script src="tinymce/tinymce.min.js"></script>
<script src="js/tinymce_editor.js"></script>
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
<style>
/* on mobile browsers, I set a width of 100% */
table.mceLayout, textarea.tinyMCE {
width: 100% !important;
}

/* on large screens, I use a different layout, so 600px are sufficient */
@media only screen and (min-width: 600px) {
table.mceLayout, textarea.richEditor {
width: 600px !important;
}
}
</style>

Tercer paso: Crear formulario con el editor de textarea

Diseñaremos formularios HTML con textarea para crear el editor HTML TinyMCE WYSIWYG. Además, para este ejemplo usaremos el método POST para enviar la información a la base de datos.

 <div class="row"> 
<h3>Editor TinyMCE usando PHP & MySQL: Ejemplo completo</h3>

<form id="codeForm" method="post">
<textarea name="contenido" id="content"></textarea><br> 
<button type="button" id="preview" name="preview" class="btn btn-info saveButton">Vista previa y guardar</button>
</form> 
</div>

En el fichero tinymce_editor.js, iniciamos el editor TinyMCE con propiedades para cargar el editor TinyMCE en el Textarea.

tinymce.init({
selector: "textarea",
plugins: [
"code ",
"paste"
],
toolbar: "undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link code ",
menubar:false,
statusbar: false,
height: 200,
/*width:700*/
});

Cuarto paso: Guardar contenido en la base de datos

Cuando el formulario se envíe, mostrara una vista previa y luego insertaremos el texto a la base de datos llamando al método insert() desde Code.php class.
Codificaremos el HTML a entidades usando la función PHP htmlentities().
<?php

$code = new Code($db);
if(!empty($_POST['contenido']) && $_POST['contenido']) { 
$code->message = htmlentities($_POST['contenido']);
$code->insert(); 
}

?>

En la clase Code.php, crearemos el método insert() para guardar el código en la base de datos. Aquí, usaremos la cláusula INSERT INTO para registrar la información.

<?php

public function insert(){

if($this->message) {

$stmt = $this->conn->prepare("
INSERT INTO ".$this->codeTable."(`contenido`)
VALUES(?)");

$stmt->bind_param("s", $this->message);

if($stmt->execute()){
return $stmt->insert_id;
} 
}
} 
}

?>

Quinto paso: Visualizar contenido

Aquí, mostraremos el último registro ingresado a la base de datos y usaremos el método getPost() de la clase Code.php, para mostrar la información.

Descodificaremos las entidades HTML llamando a la función html_entity_decode() desde PHP. Usaremos class prettyprint para mostrar código con css y estilo.

 <?php
$result = $code->getPost();
while ($row = $result->fetch_assoc()) {
echo "<div><pre class='prettyprint'>".html_entity_decode($row['contenido'])."</pre></div>";
}
?>

Crearemos el método getPost() en la clase Code.php para obtener datos de la tabla de base de datos MySQL.

<?php

public function getPost(){
$sqlQuery = "
SELECT id, message
FROM ".$this->codeTable." ORDER BY id DESC";

$stmt = $this->conn->prepare($sqlQuery);
$stmt->execute();
$result = $stmt->get_result();
return $result;
}

?>

Conclusión

  • Hemos aprendido a usar el editor TinyMCE para convertir nuestros textareas en potentes editores de texto y además hemos aprendido a almacenar el contenido en la base de datos.
  • La curva de aprendizaje del ejemplo es muy baja y lo pueden hacer a medida.
  • En este tutorial, aprenderás a guardar y mostrar código con PHP y MySQL.
  • Puede descargar el script desde el enlace Descarga.

Nestor Tapia

Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba