Cómo añadir un editor de texto en HTML (WYSIWYG)


Editor de texto WYSIWYG CKEditor

CKEditor es un editor de texto HTML/ WYSIWYG de código abierto que permite incrustar un procesador de texto en un formulario de página web, sin la necesidad de instalarlo como aplicación en la computadora del cliente.

Paso 1

Descargar de la página de CKEditor la última versión de la librería o incluirlo a través del CDN.

<script src="https://cdn.ckeditor.com/ckeditor5/18.0.0/classic/ckeditor.js"></script>

Paso 2

Crear un textarea o div que se convertirá en el editor de texto.

<textarea type="text" name="txtDescripcion" id="txtDescripcion"></textarea>

Paso 3

Luego de definir el textarea abajo o en el pie del documento HTML agregar la siguiente línea de javascript, que convierte el textarea en un editor.

<script>
        ClassicEditor
            .create( document.querySelector( '#txtDescripcion' ) )
            .catch( error => {
            console.error( error );
            } );
        </script>

Paso 4

Para acceder al CKEditor desde PHP lo haremos de la siguiente manera cuando se envíe el formulario.

$_POST["txtDescripcion"]

Para más información te invitamos a que conozcas sobre nuestros cursos tecnológicos:

Ver info sobre cursos IT

Nuestros Cursos