Los editores WYSIWYG son la mar de util cuando quieres que el usuario inserte contenido HTML en un campo textarea. Generalmente, este tipo de editores están desarrollados con Javascript. Es decir, convierten el texto al formato que desean antes de hacer submit al formulario. El usuario puede insertar contenido HTML en el textarea y cambiar el formato diretamente mediante un editor de texto integrado en el campo. Cuando se envía el contenido del editor, el contenido del textarea es enviado al script en formato HTML.
Existen muchísimos editores WYSIWYG en el mercado, pero si tuviera que escoger uno, me quedaría con CKEditor. Este te da la posibilidad de transformar un simple textarea en un editor de texto totalmente profesional. En este tutorial te mostraré cómo añadir un editor HTML a un textarea con CKEditor.
Antes de empezar, lo primero que debes hacer es descargar la última versión de CKEditor. Descomprime el fichero y sitúalo en el directorio raíz de tu aplicación web. Una vez hecho eso, ya podemos empezar a trabajar.
Añadir CKEditor al textarea
Crea un elemento textarea en la página. Recuerda que es el que utilizaremos para convertirlo en un textarea.
<textarea name="editor" id="editor" rows="10" cols="80"></textarea>
Incluye la librería JS de CKEditor.
<script src="ckeditor/ckeditor.js"></script>
Utiliza el método CKEDITOR.replace() para reemplazar el textarea por el editor de texto de CKEditor. Para ello debes pasarle como parámetro el ID del textarea que quieras convertir.
<script>
CKEDITOR.replace('editor');
</script>
En el siguiente ejemplo puedes ver cómo añado el editor de texto CKEditor reemplazando un elemento textarea.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>CKEditor</title>
<meta charset="utf-8">
<!-- Include CKEditor library -->
<script src="ckeditor/ckeditor.js"></script>
</head>
<body>
<form>
<textarea name="editor" id="editor" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
</form>
<script>
// Replace the <textarea> with a CKEditor
CKEDITOR.replace('editor');
</script>
</body>
</html>
Guardar el contenido de CKEditor
Una vez que se ha hecho submit al formulario al que pertenece el textarea, podremos obtener lo que ha ingresado el usuario en el campo utilizando tanto las variables $_REQUEST o $_POST de PHP. Aquí puedes ver un ejemplo.
$_REQUEST['editor']