Nukium » module

CKEditor Helper for CodeIgniter

Nukium — Sat, 02 Jan 2010 17:36:59 +0000

Using CKEditor as a plugin into your CodeIgniter applications

CKEditor is a powerfull WYSIWYG text editor licensed under the GPL, LGPL and MPL open source licenses. CKEditor can easilly be added to any web page, you will find below a simple way to integrate CKeditor to your CodeIgniter applications.

Downloading CKEditor

The first step is to download the CKEditor editor package, note that the helper have only be tested over CKEditor 3.0.2. Once done, you should consider to remove the _samples and _sources directories from the uncompressed files.

Then, place the entire ckeditor directory into a /js/ folder. You can place it anywhere but remember to set the correct path when initializing the helper.

Adding the CKEditor helper for CodeIgniter

Download and place the ckeditor_helper.php file into the CodeIgniter’s system/application/helpers folder.

This helper can manage all CKEditor’s available configuration options, custom styles definitions, multiple intances of the editor on the same page and extra config parameters such as toolbar definition.

Creating the controller

First of all, we are going to create a controller that will set all the helper’s configuration options. In this exemple, we are going to instanciate two CKEditors with different configuration values. You are able to set all CKEditor’s available configuration options inside the config array. We are also going to define custom styles to replace the CKEditor’s default styles. Note that the id must match the textarea’s id in the view. Since the 2010-08-28 version, each styles definitions are applied to the associated CKEditor instance, allowing you to use different option set by instance. Since this version, you can also add severals CKEditor instance on the same page and define custom toolbars (thanks to the ronan’s patch ).

^?View Code PHP


 
class Ckeditor extends Controller {
 
	// extends CI_Controller for CI 2.x users
 
	public $data 	= 	array();
 
	public function __construct() {
 
		parent::Controller();
		// parent::__construct(); for CI 2.x users
 
		$this->load->helper('url'); //You should autoload this one ;)
		$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
 
			),
 
			//Replacing styles from the "Styles tool"
			'styles' => array(
 
				//Creating a new style named "style 1"
				'style 1' => array (
					'name' 		=> 	'Blue Title',
					'element' 	=> 	'h2',
					'styles' => array(
						'color' 	=> 	'Blue',
						'font-weight' 	=> 	'bold'
					)
				),
 
				//Creating a new style named "style 2"
				'style 2' => array (
					'name' 	=> 	'Red Title',
					'element' 	=> 	'h2',
					'styles' => array(
						'color' 		=> 	'Red',
						'font-weight' 		=> 	'bold',
						'text-decoration'	=> 	'underline'
					)
				)				
			)
		);
 
		$this->data['ckeditor_2'] = array(
 
			//ID of the textarea that will be replaced
			'id' 	=> 	'content_2',
			'path'	=>	'js/ckeditor',
 
			//Optionnal values
			'config' => array(
				'width' 	=> 	"550px",	//Setting a custom width
				'height' 	=> 	'100px',	//Setting a custom height
				'toolbar' 	=> 	array(	//Setting a custom toolbar
					array('Bold', 'Italic'),
					array('Underline', 'Strike', 'FontSize'),
					array('Smiley'),
					'/'
				)
			),
 
			//Replacing styles from the "Styles tool"
			'styles' => array(
 
				//Creating a new style named "style 1"
				'style 3' => array (
					'name' 		=> 	'Green Title',
					'element' 	=> 	'h3',
					'styles' => array(
						'color' 	=> 	'Green',
						'font-weight' 	=> 	'bold'
					)
				)
 
			)
		);		
 
 
	}
 
	public function index() {
 
		$this->load->view('ckeditor', $this->data);
 
	}
}

Creating the view

The ckeditor.php view only has to display two textarea elements with matched ids and call the display_ckeditor() helper’s function.

^?View Code PHP

<textarea name="content" id="content" ><p>Example datap>textarea>
 echo display_ckeditor($ckeditor); ?>
<textarea name="content_2" id="content_2" ><p>Example datap>textarea>
 echo display_ckeditor($ckeditor_2); ?>
textarea>

That’s all ! If you’ve followed all the steps correctly, two CKEditors should shows up in the view. Please note that I assume that you are loading also a correct header and footer view with all the xHTML required stuff.

Downloading the tutorial

Source files of this tutorial (controller, helper, and view) can be downloaded here.

Changelog

2010-08-28: Ronan’s patch for custom toolbar definition added (thanks dude!).
2010-08-28: Configuration options are now only applied on the associated CKEditor.
2010-08-28: Several editors can now be displayed on the same page.
2010-01-12: All the stuff moved out of system/plugins.
2010-01-30: Fixed Internet Explorer compatibility issue.

Troubleshooting

If you are using the .htaccess file given by the CodeIgniter’s user guide and have placed the ckeditor’s folder into system/plugins, be sure to allow the directory system to be called via HTTP in order to allow access to the plugins directory

Licence

CKEditor plugin for CodeIgniter by Samuel Sanchez is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.
Based on a work at codeigniter.com.
Permissions beyond the scope of this license may be available at http://www.nukium.com/contact-nukium-developpeur-france/.

Please note that this helper is based on an original idea discussed in this CodeIgniter thread.

Tutorial CodeIgniter : Flashdata Highlighting with jQuery and jGrowl

Nukium — Mon, 14 Dec 2009 22:40:58 +0000

This tutorial explain how to create a notification system based on the jGrowl plugin for jQuery and the CodeIgniter session Flashdata.

Basically, Flashdata are sessions data only available for the next server request and are then automatically removed. This class can easily be used to build a simple notification system for your application.

Step 1: Create a Flashdata

In order to use CodeIgniter flashdata, we need to load the session library. Then, the set_flashdata method allows to set a session flashdata. This code has to be placed in your controller.

^?View Code PHP

	$this->load->library('session');
	$this->session->set_flashdata('result', 'This is a custom notification using jGrowl and a Flashdata.');

Step 2: Display the Flashdata

I assume that you are using a header view file that is loaded in first everywhere in your application. Just add the code below that test if the flashdata var named result is set, then write the jQuery code that lauch the jGrowl notification.

^?View Code PHP

 if ($this->session->flashdata('result') != ''): ?>
	<script type="text/javascript">
					
	
endif; ?>

Step 3: Install the jGrowl plugin for jQuery

The code above can’t work without adding the JavaScript notification files. You just have to add the jQuery library and the jGrowl plugin files into your header, don’t forget the jGrowl CSS file too. These files can be dowloaded here or on the jGrowl project home page.

Step 4: View demo!

The live demo is available on my demos space: CodeIgniter Flashdata Highlighting with jQuery and jGrowl demonstration.

Afficher le nombre de lectures des articles sous WordPress

Nukium — Wed, 18 Nov 2009 23:01:31 +0000

WordPress ne gère pas nativement de fonctionnalité permettant d’enregistrer puis d’afficher le nombre de vues (lectures) des billets.

Heureusement, il existe un plugin nommé WP-PostViews compatible avec les widgets de WordPress permettant d’afficher le nombre de lectures de chaque article.

Si vous désirez afficher directement dans votre thème le nombre de vues, vous pouvez utiliser le code ci-dessous :

^?View Code PHP

Ce billet à été lu  if(function_exists('the_views')) { the_views(); } ?>

Notez que le plugin dispose d’une interface d’administration dans laquelle le texte affiché peut être modifié

Compteur personnalisé pour FeedBurner avec PHP ou CodeIgniter

Nukium — Wed, 12 Aug 2009 13:20:08 +0000

Saviez-vous qu’il était possible d’afficher le nombre des abonnés de votre flux Google FeedBurner dans un compteur personnalisé ?

En effet, FeedBurner fournit une API nommée Awareness qui permet de récupérer les informations d’un compte via une requête XML. Il devient donc facilement possible de récupérer l’information puis de l’afficher dans un compteur designé par vos soins.

Le seul bémol est que pour récupérer cette information, une requête HTTP sur le serveur de FeedBurner est nécessaire, il est donc nécessaire de mettre en place un système de cache pour ne pas dégrader sensiblement les performances de votre site Internet.

C’est pourquoi la librairie intègre un système de cache par fichier XML permettant de stocker l’information pendant une période donnée (configurable). Notez que vous pouvez également choisir de désactiver complètement le système de cache.

Ma librairie est disponible pour PHP ainsi que pour le framework CodeIgniter sous licence LGPL.

Pour télécharger la librairie, merci de vous rentre sur la page dédiée.

MooEasyRollover – The easiest rollover image plugin for Mootools !

Nukium — Wed, 10 Jun 2009 17:25:40 +0000

What is MooEasyRollover ?

MooEasyRollover is a plugin for Mootools that allows you to make a simple rollover image without writing any code line !
The plugin is able to detect all images tagged with a specific class in order to add a rollover image behavior with an image caching.

Live Demo

Check out the MooEasyRollover live demo to see it in action !

Why this Mootools plugin ?

I was working on an old website that use the Macromedia function mm_swapimage, when I added some Mootools stuff, I thought it can be cool to be able to do the same work than mm_swapimage with a Mootools class

Installation instructions

Download the MooEasyRollover archive.
Then, add mootools to your page, note that the plugin requires the Assets class of the more builder.
Add the MooEasyRollover class to your page :

^?View Code HTML

Use this code to launch the plugin. Make sure to set options with the correct values according to your server.

^?View Code JAVASCRIPT

window.addEvent('domready', function() {
 
        //MooEasyRollover launcher
	var MooEasyRolloverInstance = new MooEasyRollover({
		MooEasyRolloverClass : 'rollover', //Set the class which tags all buttons to rollover
		fullPath : 'http://www.domain.com/buttons/', //Set the full path to your images folder
		prefix: '-on' //Set the prefix of mouseover images
	});	
 
});

MooEasyRolloverClass is the classname used to identify images to rollover.

Fullpath is the path to the images folder to use.

Prefix is used to identify rollover images, for exemple, in order to rollover button.png you have to create a button-on.png image in the fullPath folder.

Download

Click here to download MooEasyRollover.

Apprendre à utiliser les points d’arrêt de Firebug

Nukium — Wed, 08 Apr 2009 10:58:23 +0000

Firebug comme tout le monde le sais est un des meilleurs modules de développement pour Firefox. Outre ses fonctionnalités merveilleuses d’aide à la création de pages XHTML / CSS, les outils Javascript dont il dispose sont également fantastiques.

Parmi les fonctionnalités Javascript de Firebug, les points d’arrêts (breakpoints) peuvent s’avérer très utile pour le développement Javascript (et donc Mootools by the way) car ils permettent d’interrompre l’exécution du code à la volée, puis de reprendre l’exécution pas-à-pas.

C’est clairement le même fonctionnement qu’un débugueur classique dans n’importe qu’elle IDE.

Pour nous aider dans cette tâche, Jonathan Snook de snook.ca a créé un screencast très bien ficelé qui montre par l’exemple comment utiliser le débugueur Javascript de Firebug.

Je vous invite tous à le consulter, en revanche ce screencast n’est disponible qu’en anglais

Consulter le screencast de Jonathan Snook sur l’utilisation des points d’arrêts de Firebug.

Pour ceux qui n’ont pas Firebug (ça existe ?) c’est par là.

Autoriser les fichiers .htaccess en local

Nukium — Sun, 08 Mar 2009 13:30:25 +0000

Lorsque l’on développe en local avec les logiciels Wampserver sous Windows ou encore MAMP sous Max OS X, les fichiers .htaccess ne fonctionnent pas avec l’installation par défaut. Le plus souvent, le serveur renvoie un code d’erreur 500.

La raison est simple, le module rewrite d’Apache n’est pas activé par défaut, pour l’activer il suffit d’éditer le fichier de configuration d’Apache (httpd.conf).

Sous Wampserver, il se trouve dans : Program Files\wamp\bin\apache\Apache2.2.11\conf.

Pour activer le module rewrite, remplacez la ligne :

^?View Code BASH

#LoadModule rewrite_module modules/mod_rewrite.so

Par :

^?View Code BASH

LoadModule rewrite_module modules/mod_rewrite.so

Redémarrez en suite vos services afin que la modification soit prise en compte