En el desarrollo web la elección de un buen editor de texto enriquecido (WYSIWYG) es una decisión crucial que afecta directamente la experiencia del usuario y la flexibilidad del desarrollador. Existen varias opciones Open Source para el Framework Laravel, Una de estas opciones es Quill, un editor de código abierto que se ha convertido en el favorito de muchas aplicaciones modernas. Lo que distingue a Quill del resto es su arquitectura modular y su poderosa API, que permite a los desarrolladores tener un control total sobre el contenido generado, yendo mucho más allá de un simple campo de texto.
En este post se implementara un ejemplo de su integración limpia en vistas Blade de Laravel, la personalización de la barra de herramientas y la gestión de contenido estructurado, veremos así por qué Quill es la opción ideal si busca un editor que le devuelva el control.
Manos a la obra.
Paso 1. Proyecto Laravel
Nuestro punto de partida sera un proyecto laravel limpio, el cual creamos con el comando:
composer create-project laravel/laravel example-app
Paso 2. Las rutas
En este paso agregaremos dos rutas con los métodos GET y POST en el archivo routes/web.php. Tambien agregamos una referencia al controllador QuillController.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\QuillController;
Route::get('quill-editor', [QuillController::class, 'index']);
Route::post('quill-editor', [QuillController::class, 'store'])->name('quill.store');
Paso 3. El controllador
En este paso, debemos crear un nuevo controlador llamado QuillController.php el cual tendra los métodos index() y store(). El comando es:
php artisan make:controller QuillController
Y el contenido del controllador:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\View\View;
use Illuminate\Http\JsonResponse;
class QuillController extends Controller
{
public function index(): View
{
return view('quill');
}
public function store(Request $request): JsonResponse
{
dd($request->all());
return response()->json($request->all());
}
}
Paso 4. La vista
En este último paso, creemos el Blade quill.blade.php para el formulario de visualización editor y coloquemos el siguiente código:
<!DOCTYPE html>
<html>
<head>
<title>Quill Rich Text Editor</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css"/>
</head>
<body>
<div class="container">
<div class="card mt-5">
<div class="card-body">
<form method="POST" action="{{ route('quill.store') }}">
@csrf
<div class="mb-3">
<div id="toolbar-container">
<span class="ql-formats">
<select class="ql-font"></select>
<select class="ql-size"></select>
</span>
<span class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
<button class="ql-strike"></button>
</span>
<span class="ql-formats">
<select class="ql-color"></select>
<select class="ql-background"></select>
</span>
<span class="ql-formats">
<button class="ql-script" value="sub"></button>
<button class="ql-script" value="super"></button>
</span>
<span class="ql-formats">
<button class="ql-header" value="1"></button>
<button class="ql-header" value="2"></button>
<button class="ql-blockquote"></button>
<button class="ql-code-block"></button>
</span>
<span class="ql-formats">
<button class="ql-list" value="ordered"></button>
<button class="ql-list" value="bullet"></button>
<button class="ql-indent" value="-1"></button>
<button class="ql-indent" value="+1"></button>
</span>
<span class="ql-formats">
<button class="ql-direction" value="rtl"></button>
<select class="ql-align"></select>
</span>
<span class="ql-formats">
<button class="ql-link"></button>
<button class="ql-image"></button>
<button class="ql-video"></button>
</span>
<span class="ql-formats">
<button class="ql-clean"></button>
</span>
</div>
<div id="quill-editor" class="mb-3" style="height: 200px;">
</div>
<textarea rows="3" class="mb-3 d-none" name="body" id="quill-editor-area"></textarea>
</div>
<div class="mb-3">
<button class="btn btn-success">Enviar</button>
</div>
</form>
</div>
</div>
</div>
</body>
<!-- Inicializar Quill editor -->
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
if (document.getElementById('quill-editor-area')) {
var editor = new Quill('#quill-editor', {
placeholder: 'Hola mundo cruel!',
theme: 'snow',
modules: {
syntax: true,
toolbar: '#toolbar-container',
},
});
var quillEditor = document.getElementById('quill-editor-area');
editor.on('text-change', function() {
quillEditor.value = editor.root.innerHTML;
});
quillEditor.addEventListener('input', function() {
editor.root.innerHTML = quillEditor.value;
});
}
});
</script>
</html>
Ejecutamos nuestro proyecto y tenemos:
Enjoy!!!
Un JTable es un componente swing de java que nos permite presentar datos en forma tabular, si bien haciendo uso de IDe[...]
Ejercicio: Escriba un programa en consola que implemente un Hashtable, cree una clase «Persona«, este será el tipo de da[...]
Se ha descubierto una vulnerabilidad de tipo Server-Side Request Forgery (SSRF) en el plugin de WordPress Ditty, específ[...]
En este tutorial veremos lo fácil que es personalizar las pestañas de un JTabbedPane con unas cuantas lineas de código y[...]
En este post implementamos en lenguaje Kotlin (lenguaje de programación de tipado estático que corre sobre la máquina vi[...]
La Alcaldía de la ciudad de La Paz encabezado por Iván Arias presentó el lunes por la noche el «Atlas Integral del Riesg[...]
