1. Descarga e instalación
  2. Personalizar botones del CKEDITOR
  3. Habilitar la subida de imágenes
  4. Problemas

Descarga e instalación

Editor WYSIWYG.

Para descargarlo:
http://ckeditor.com/download

Dependiendo de la opción de descarga que escojamos (basic, standard, full), el editor traerá más o menos botones.

Usar el CKEDITOR

Es preciso tener en la misma ruta los siguientes ficheros y carpetas (pueden variar dependiendo de si cogimos la versión básica, standard o full del ckeditor):

Usar el CKEDITOR II

Es posible aplicar el plugin a textareas con una id concreta:

	
CKEDITOR.replace("editor1");
	

Personalizar botones del CKEDITOR

	
var arrayCats = [];
	CKEDITOR.stylesSet.add('my_custom_style', [
		{ name: 'pliego', element: 'a', attributes: {'class': 'pliego'} },
		{ name: 'oculto', element: 'div', attributes: {'class': 'oculto'} },
		{ name: 'link a otra ficha', element: 'a', attributes: {'class': 'ficha'} },
		{ name: 'zoom', element: 'span', attributes: {'class': 'zoom'} }
]);

CKEDITOR.replace('editor1',{
    uiColor: '#9AB8F3',
    stylesSet: 'my_custom_style'
});

Habilitar la subida de imágenes

En el fichero plugins/image/dialogs/image.js buscaremos filebrowserImageBrowseLinkUrl. Un poco más adelante aparece este atributo:
hidden:!0
Lo dejamos en: hidden:!1

Configuración de CKEditor contra el script php de subida de imágenes

En el fichero config.js, situado en la raíz de la carpeta del ckeditor, definimos la url que lo vinculará con el php de subida.
Para ello, a la siguiente función:
CKEDITOR.editorConfig = function( config ) {

Añadiremos el siguiente nodo:
config.filebrowserUploadUrl = '/testing/oscar/gestor/js/ckupload.php';

Script php de subida al server

	
<?php 
$image_name = time()."_".$_FILES['upload']['name'];
$path = '/media/monty/HD/Datos/tutos/theory/workspaces/testing/oscar/gestor/public/upload/'.$image_name;
$url = 'http://localhost/testing/oscar/gestor/public/upload/'.$image_name;

 //extensive suitability check before doing anything with the file…
if (($_FILES['upload'] == "none") OR (empty($_FILES['upload']['name'])) ){
 $message = "No file uploaded";
}else if ($_FILES['upload']["size"] == 0){
 $message = "The file is of zero length.";
}else if (($_FILES['upload']["type"] != "image/pjpeg") AND ($_FILES['upload']["type"] != "image/jpeg") AND ($_FILES['upload']["type"] != "image/png")){
 $message = "The image must be in either JPG or PNG format. Please upload a JPG or PNG instead.";
}else if (!is_uploaded_file($_FILES['upload']["tmp_name"])){
 $message = "You may be attempting to hack our server. We're on to you; expect a knock on the door sometime soon.";
}else {
  $message = "";
  $move = @ move_uploaded_file($_FILES['upload']['tmp_name'], $path);
  if(!$move){
   $message = "Error moving uploaded file. Check the script is granted Read/Write/Modify permissions.";
 }
}
$funcNum = $_GET['CKEditorFuncNum'] ;
echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', '$message');</script>";
?>
	

Problema típico I

El editor no funciona la segunda vez que es cargado vía AJAX.

Solución: Borrar todas las instancias del editor para volver a cargarlo al hacer la llamada con AJAX.


var editor = CKEDITOR.instances["textarea_name"];
if (editor) { editor.destroy(true); }

//Luego habrá que volver a cargar el editor:
CKEDITOR.replaceAll();
	

Problema típico II

Al pulsar el botón de salvar para almacenar en contenido del textarea en la base de datos, no se almacena el código html del mismo al recoger el value del textarea.

Solución:
for ( instance in CKEDITOR.instances )CKEDITOR.instances[instance].updateElement();

icono de mandar un mail¡Contacta conmigo!
contacta conmigoPablo Monteserín

¡Hola! ¿En qué puedo ayudarte?