Integrar TinyMCE en 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*/
});

<?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;
}

?>

• 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.

Descargar Editor TinyMCE con PHP & MySQL

1 archivo(s) 202.38 KB

Descargar