BestSites.ro

I think CKEditor http://ckeditor.com/ (Ex FCKEditor) is the best option if you are looking for a WYSIWYG web editor. It’s Open Source, easy to integrate in any application, it’s stable and it’s used by a lot of websites.

CKEditor has a lot of built-in features, but you may want to extend its functions for a better integration with your website. This can be easily done by adding custom plug-ins.

The following steps will show you a flexible way to create your own CKEditor plug-in and connect it with external data sources using PHP.

1. Declare the plug-in by adding this line :

   config.extraPlugins = 'myplugin';

   in the CKeditor’s configuration file (config.js). The editor will know now to search for this plug-in load it.

2. Include your new plug-in in the toolbar definition (config.js)

   	config.toolbar = 'MyToolbarSet';
   	config.toolbar_MyToolbarSet =
   	[
   	...
   	,['myplugin']
   	]
   	

   You can find more details about toolbar definition here: http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar

3. Create a new folder /ckeditor/plugins/myplugin with the same name as the plug-in.
4. Under this new folder, create a file called plugin.js with this content

   CKEDITOR.plugins.add('myplugin',
   {
   	requires: ['iframedialog'],
   	init: function(editor)
   	{
   		var pluginName = 'myplugin';
   		var mypath     = this.path;
   		CKEDITOR.dialog.addIframe( pluginName, 'My Plug-in', mypath+'myphpfile.php', 300, 100, false);
   		editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName));
   		editor.ui.addButton('My Plug-in',
   		{
   			label: 'My Plug-in',
   			command: pluginName,
   			icon: this.path + 'myplugin.png'
   		});
   	}
   });
   

5. Under the same folder, create the php file (myphpfile.php in this case).
   The output from this file will be displayed in the plug-in’s pop-up. Using PHP you have the flexibility to connect to a database, build custom data selectors or include external files.
   You can also control the plug-in from inside the php file, by customizing the pop-up’s  buttons.
   Add the following lines at the end of the php file:

6. Add ‘myplugin.png’ icon into plugin’s folder.

Have fun!

Posted by Dan | Posted in Articles | No Comments

Tags: CKEditor, Custom, Javascript, PHP, plug-in, Web, WYSIWYG