El plugin CKEditor nos proporciona una manera sencilla de añadir un editor WYSIWYG en un campo input de nuestros formularios web. Por regla general, este tipo de editores reemplazan a un textarea y sirven el propósito de ayudar al usuario a introducir contenido HTML en el formulario. Es decir, el plugin CKEditor permite al usuario insertar contenido HTML a través de un campo textarea para después poder enviarlo a un script del lado del cliente.
El plugin Image de CKEditor nos ayuda a insertar una imagen en el editor. En este caso, debemos especificar la URL de la imagen para insertarla en el contenido del editor. Lo que no nos permite este plugin es subir imágenes para alojarlas en nuestro server. Si queremos llevar a cabo esto, debemos implementar una nueva funcionalidad para luego integrarla en CKEditor. En este tutorial te mostraremos a subir imágenes en CKEditor e insertar la imagen subida en el editor mediante PHP.
Antes de empezar, descárgate el paquete del plugin CKEditor. Extrae el contenido del fichero descargado y muévelo al directorio root de tu proyecto.
Añadir CKEditor a un textarea
Lo primero que necesitaremos es un textarea.
<textarea name="editor" id="editor"></textarea>
Incluye el fichero de la librería CKEditor.
<script src="ckeditor/ckeditor.js"></script>
Utiliza el método CKEDITOR.replace() para inicializar el plugin y reemplazar el textarea por un editor WYSIWYG.
<script>
CKEDITOR.replace('editor');
</script>
Ahora tendremos que configurar ciertos parámetros para modificar la ventana de diálogo de subida. Primero utilizaremos la propiedad filebrowserUploadUrl para definir la URL del script que subirá las imágenes (ck_upload.php). Después, modificaremos la opción de ocnfiguración filebrowserUploadMethod a form.
<script>
CKEDITOR.replace('editor', {
filebrowserUploadUrl: 'ckeditor/ck_upload.php',
filebrowserUploadMethod: 'form'
});
</script>
La configuración anterior agregará una pestaña Upload en el cuadro de diálogo Propiedades de la imagen. Permitirá al usuario seleccionar un archivo y enviarlo al script del lado del servidor para subirlo.
Subir imagen al servidor (ckeditor/ck_upload.php)
El archivo ck_upload.php gestionará el proceso de subida de archivos usando PHP.
- Define el directorio de subida y las propiedades de imagen permitidas.
- Valida el tipo y tamaño de la imagen.
- Sube la imagen al servidor usando la función move_uploaded_file() de PHP.
- Renderiza la imagen como HTML y la envía a CKEditor.
- Si la subida de la imagen es exitosa: el estado de la subida se mostrará en un diálogo de alerta y se insertará la imagen en el editor.
<?php
// Define file upload path
$upload_dir = array(
'img'=> 'uploads/',
);
// Allowed image properties
$imgset = array(
'maxsize' => 2000,
'maxwidth' => 1024,
'maxheight' => 800,
'minwidth' => 10,
'minheight' => 10,
'type' => array('bmp', 'gif', 'jpg', 'jpeg', 'png'),
);
// If 0, will OVERWRITE the existing file
define('RENAME_F', 1);
/**
* Set filename
* If the file exists, and RENAME_F is 1, set "img_name_1"
*
* $p = dir-path, $fn=filename to check, $ex=extension $i=index to rename
*/
function setFName($p, $fn, $ex, $i){
if(RENAME_F ==1 && file_exists($p .$fn .$ex)){
return setFName($p, F_NAME .'_'. ($i +1), $ex, ($i +1));
}else{
return $fn .$ex;
}
}
$re = '';
if(isset($_FILES['upload']) && strlen($_FILES['upload']['name']) > 1) {
define('F_NAME', preg_replace('/.(.+?)$/i', '', basename($_FILES['upload']['name'])));
// Get filename without extension
$sepext = explode('.', strtolower($_FILES['upload']['name']));
$type = end($sepext); /** gets extension **/
// Upload directory
$upload_dir = in_array($type, $imgset['type']) ? $upload_dir['img'] : $upload_dir['audio'];
$upload_dir = trim($upload_dir, '/') .'/';
// Validate file type
if(in_array($type, $imgset['type'])){
// Image width and height
list($width, $height) = getimagesize($_FILES['upload']['tmp_name']);
if(isset($width) && isset($height)) {
if($width > $imgset['maxwidth'] || $height > $imgset['maxheight']){
$re .= '\n Width x Height = '. $width .' x '. $height .' \n The maximum Width x Height must be: '. $imgset['maxwidth']. ' x '. $imgset['maxheight'];
}
if($width < $imgset['minwidth'] || $height < $imgset['minheight']){
$re .= '\n Width x Height = '. $width .' x '. $height .'\n The minimum Width x Height must be: '. $imgset['minwidth']. ' x '. $imgset['minheight'];
}
if($_FILES['upload']['size'] > $imgset['maxsize']*1000){
$re .= '\n Maximum file size must be: '. $imgset['maxsize']. ' KB.';
}
}
}else{
$re .= 'The file: '. $_FILES['upload']['name']. ' has not the allowed extension type.';
}
// File upload path
$f_name = setFName($_SERVER['DOCUMENT_ROOT'] .'/'. $upload_dir, F_NAME, ".$type", 0);
$uploadpath = $upload_dir . $f_name;
// If no errors, upload the image, else, output the errors
if($re == ''){
if(move_uploaded_file($_FILES['upload']['tmp_name'], $uploadpath)) {
$CKEditorFuncNum = $_GET['CKEditorFuncNum'];
$url = 'ckeditor/'. $upload_dir . $f_name;
$msg = F_NAME .'.'. $type .' successfully uploaded: \n- Size: '. number_format($_FILES['upload']['size']/1024, 2, '.', '') .' KB';
$re = in_array($type, $imgset['type']) ? "<script>window.parent.CKEDITOR.tools.callFunction($CKEditorFuncNum, '$url', '$msg')</script>":'<script>var cke_ob = window.parent.CKEDITOR; for(var ckid in cke_ob.instances) { if(cke_ob.instances[ckid].focusManager.hasFocus) break;} cke_ob.instances[ckid].insertHtml(' ', 'unfiltered_html'); alert("'. $msg .'"); var dialog = cke_ob.dialog.getCurrent();dialog.hide();</script>';
}else{
$re = '<script>alert("Unable to upload the file")</script>';
}
}else{
$re = '<script>alert("'. $re .'")</script>';
}
}
// Render HTML output
@header('Content-type: text/html; charset=utf-8');
echo $re;