Mostrando entradas con la etiqueta CKEditor. Mostrar todas las entradas
Mostrando entradas con la etiqueta CKEditor. Mostrar todas las entradas

lunes, 28 de octubre de 2013

Envío de correos sobre CodeIgniter

 

En el artículo anterior “CKEditor + KCFinder sobre CodeIgniter”, te comentaba sobre la integración de una interfaz WYSIWYG sobre Codeigniter. En este artículo te hablaré sobre la utilidad del CKEditor en combinación con la clase email de CodeIgniter para hacer un formulario de envío de correos.

En la ayuda de CodeIgniter puedes encontrar que con la biblioteca email puedes hacer:

$this->load->library('email');

$this->email->from('your@example.com', 'Your Name');
$this->email->to('someone@example.com');
$this->email->cc('another@another-example.com');
$this->email->bcc('them@their-example.com');
$this->email->attach('/path/to/photo1.jpg');
$this->email->attach('/path/to/photo2.jpg');
$this->email->subject('Email Test');
$this->email->message('Testing the email class.');
$this->email->send();

Está muy claro: cargas la biblioteca, defines remitente, destinatarios, adjuntos, título y cuerpo del mensaje, y lo mandas. Es todo lo que necesitas para enviar correos.

Para facilitar las cosas, en nuestro caso hicimos una biblioteca “mail_manager” dentro de application/libraries/mail_manager.php y un fichero de configuración en application/config/mail_config.php.

El fichero de configuración tiene un destinatario FROM por defecto con su nombre, y el tipo de correos (html). Así que en el constructor de mail_manager se carga la biblioteca email de Codeigniter, se carga el fichero de configuración mail_config, y se inicializa la clase email de CodeIgniter con la configuración cargada.

Adicionamos entonces una función send a mail_manager que básicamente recibe los argumentos y hace las llamadas a email indicadas en el grupo de código de arriba.

send($from, $name, $to, $subject, $body, $cc='', $bcc='', $attach_array='')

Con esto ya se pueden mandar correos automáticos, por ejemplo cuando alguien se registra se le envía el correo de “Usted se ha registrado…”.

En otra parte necesitamos que el usuario enviara correos con un formulario. Aquí utilizamos entonces el CKEditor para lograr la siguiente interfaz:

clip_image002

Figura 1 Interfaz de envío de correos

Claro que para esto creamos un controlador “emailer” en cuyo constructor se configura un CKEditor y se envía una instancia del mismo para esta vista (ver artículo CKEditor + KCFinder sobre CodeIgniter).

El botón “Para” de la vista abre una ventana popup donde se pueden seleccionar destinatarios; y el botón “Buscar” permite seleccionar un atachado, que con un poco de jquery modifica la vista cada vez que se selecciona un adjunto, permitiendo eliminarlo nuevamente u obtener una vista previa de él, o seleccionar un nuevo atachado (figura 2).

clip_image003


Figura 2 Detalle de inserción de atachados

Cuando se da “Enviar”, el controlador emailer recibe los inputs y llama a la función “send” de la biblioteca mail_manager.

Con esto quedó terminado nuestro formulario para envío de correos, una mezcla de componentes visuales de html y bibliotecas y utilidades de CodeIgniter para lograr una interfaz agradable y funcional.

{ Leer Más }


viernes, 18 de octubre de 2013

CKEditor + KCFinder sobre CodeIgniter

CKEditor

CKEditor es un helper para CodeIgniter creado por Samuel Sánchez, que permite adicionar a nuestros sitios web una interfaz visual como la que se muestra en la figura 1, a modo WYSIWYG. Con este componente se le brinda a los usuarios la posibilidad de introducir texto enriquecido con fuentes y estilos de letras, hipervínculos, imágenes, etc.

clip_image001

Figura 1 Interfaz visual del CKEditor

Para acoplar CKEditor a CodeIgniter, descargas el paquete en [1] y copias el ckeditor_helper.php para tu directorio application/helpers. Luego copias el ckeditor completo para js/ckeditor (ver tutorial completo en [2]).

Una vez hecho esto creas una función en el controlador relacionado con la vista en la que quieras usar el componente, y la llamas en el constructor… esto para que no incluyas todo ese gran código en el constructor de la clase:

public $data = array();         //creación de la variable $data

function __construct()
{
parent::__construct();

$this->configure_ckeditor(); //llamada a la configuración del ckeditor
}

private function configure_ckeditor()
{
//helpers for CKEditor
$this->load->helper('url');
$this->load->helper('ckeditor');

//Ckeditor's configuration
$this->data['ckeditor'] = array
(
//ID of the textarea that will be replaced
'id' => 'content',
'path' => 'js/ckeditor',

//Optionnal values
'config' => array(
'toolbar' => "Full", //Using the Full toolbar
'width' => "550px", //Setting a custom width
'height' => '100px', //Setting a custom height
),

//definición del estilo del ckeditor

);
}

Recorté un poco el código para dejar lo fundamental: primero, creas una variable “$data” global para el controlador, y en la función que configura al ckeditor defines el id del componente visual que será reemplazado por el editor de ckeditor, en este caso se llama “content”.

Hecho esto, en la función que carga la vista deseada pasas la variable $data[ckeditor],

function load_view()
{
$data['ckeditor'] = $this->data['ckeditor'];
$this->load->view('views/my_view.php', $data);
}

Y en la vista, en el lugar donde quieras que te salga el componente, pones el siguiente código:

<?php echo form_textarea(array('name' => 'content', 'id' => 'content')); ?>

<?php echo display_ckeditor($ckeditor); ?>

Con esto lo que estamos haciendo es, que el textarea con id “content” sea reemplazado por el ckeditor que pasamos en la variable $ckeditor (recuerda que en el controlador dijimos que el componente con id “content” sería reemplazado por un ckeditor).

En el controlador capturas el contenido del componente como con cualquier otro:

$content = $this->input->post('content').

KCFinder

Bien, en la primera parte de este artículo he querido introducirte a la instalación del CKEditor sobre Codeigniter, pero la intención final es montar el KCFinder.

Como detalle, en el texto del componente ckeditor puedes insertar imágenes a través del ícono señalado en la figura 2. Esta opción abre la ventana mostrada en la figura 3, donde puedes escoger la dirección de una imagen existente en el servidor.

clip_image002

Figura 2 Opción de insertar imágenes en el texto

clip_image003

Figura 3 Ventana de inserción de imágenes

El problema está en darle a los usuarios la facilidad de subir primeramente imágenes al servidor y a la vez seleccionarlas para insertarlas en el texto del ckeditor. Aquí entra entonces el kcfinder, un explorador de imágenes, archivos genéricos y contenido flash que permite acoplarle al ckeditor los componentes necesarios para subir y seleccionar archivos.

Ojo, no confundir con CKFinder: CKFinder es de pago y KCFinder es la alternativa libre.

Una vez instalado, el kcfinder le adiciona al ckeditor la pestaña “Upload” en la ventana de selección de imágenes (figura 4) que permite subir imágenes al servidor, y adiciona el botón “Browse Server” (figura 5) que permite buscarlas y seleccionarlas para introducirlas en el texto.

clip_image004

Figura 4 Pestaña Upload

clip_image005

Figura 5 Botón "Browse Server"

Para instalar el kcfinder [3] descomprime el archivo kcfinder.zip dentro de /js/ckeditor de forma que quede así: /js/ckeditor/kcfinder.

Luego, en el controlador (en el que estamos usando como ejemplo), se configura la variable de sesión que le especifica a kcfinder el camino en el servidor:

private function configure_ckeditor()
{
$_SESSION['KCFINDER'] = array();
$_SESSION['KCFINDER']['disabled'] = false;
$_SESSION['KCFINDER']['uploadDir'] = 'C:\wamp\www\...';
$_SESSION['KCFINDER']['uploadURL'] = base_url()."images/kcfinder/";

//helpers for CKEditor
$this->load->helper('url');
$this->load->helper('ckeditor');

//Ckeditor's configuration
$this->data['ckeditor'] = array
(
//ID of the textarea that will be replaced
'id' => 'content',
'path' => 'js/ckeditor',

//Optionnal values
'config' => array(
'toolbar' => "Full", //Using the Full toolbar
'width' => "550px", //Setting a custom width
'height' => '100px', //Setting a custom height

'filebrowserImageBrowseUrl' => base_url().'js/ckeditor/kcfinder/browse.php?type=images',
'filebrowserImageUploadUrl' => base_url().'js/ckeditor/kcfinder/upload.php?type=images'
),


//definición del estilo del ckeditor

);
}

Aquí puse en negritas el código adicionado a la función configure_ckeditor. Con esto queda lista la integración del CKEditor con KCFinder sobre CodeIgniter. Puedes obtener una guía más completa de esta integración en [4].

Referencias:

[1] Descarga de CKEditor

http://ckeditor.com/download

[2] Tutorial de instalación de CKEditor sobre Codeigniter

http://kromack.com/developpement-php/codeigniter/ckeditor-helper-for-codeigniter/

[3] Descarga de KCFinder

http://kcfinder.sunhater.com/download

[4] Howto CodeIgniter 2.1 + Ckeditor 3.6.1 + kcfinder 2.51

http://www.hcosta.info/wp/2012/05/howto-codeigniter-2-1-ckeditor-3-6-1-kcfinder-2-51/

{ Leer Más }


IconIconIcon