CKEditor For WordPress installeren, inclusief CKFinder

Voor mijn eigen CMS gebruik ik altijd CKEditor als editor voor de content, samen met de CKFinder voor de afbeeldingen en bestanden. Dan is TinyMCE wel even wennen, de editor die standaard in WordPress zit. CKEditor heeft veel meer mogelijkheden om de css-stijl van de website in de editor zelf al te laten zien en de editor te configureren. Voor enkele websites heb ik TinyMCE Advanced geinstaleerd, maar de heimwee bleef.

Advertisements

Voor mijn eigen CMS gebruik ik altijd CKEditor als editor voor de content, samen met de CKFinder voor de afbeeldingen en bestanden. Dan is TinyMCE wel even wennen, de editor die standaard in WordPress zit. CKEditor heeft veel meer mogelijkheden om de css-stijl van de website in de editor zelf al te laten zien en de editor te configureren. Voor enkele websites heb ik TinyMCE Advanced geinstaleerd, maar de heimwee bleef.

En gelukkig, CKSource heeft een plugin om TinyMCE te vervangen voor de CKEditor.

De plugin: CKEditor for WordPress van CKSource
Vandaag geïnstalleerd en jawel: plug-and-play.

Hierna de CKFinder gedownload vanaf ckeditor.com/download geïnstalleerd volgend de aanwijzingen op de readme.txt in de ckfinder-folder.
In  CKFinder -> Upload options de licentiecode ingevoerd en de Filebrowser op CKFinder gezet.
Deze licentiecode is niet noodzakelijk voor de werking van de CKFinder, maar zonder code komt er een dikke “demo-version” melding in beeld.

Hierbij heb ik Viper’s Video Quicktags geïnstalleerd. Hierbij kun je makkelijk bijvoorbeeld video’s van YouTube of Flickr in de content zetten.
Deze installatie overschrijft de  Ckeditor.config.js, dus eerst deze twee plugins installeren, dan pas de configuratie van de CKEditor aanpassen.

Configuratie-aanpassingen

Ckeditor.config.js

Zie voor documentatie: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html

De config.toolbar_WordpressFull aanpassen, smilies eruit, fontsize eruit, flash eruit (zit in Viper’s plugin).
En verder nog: keuzelijst fonts (in vredesnaam geen comic sans), beschikbare tags instellen voor de webredactie (format_tags), skin kiezen, en de editor opstarten met blocks aan. Dit laatste is voor webredacties erg verhelderend is mij gebleken.

/*
Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/ 

CKEDITOR.editorConfig = function( config )
{
 config.toolbar = 'Full';

 config.toolbar_Full =
 [
 ['Source'],
 ['Cut','Copy','Paste','PasteText','PasteFromWord','-'],
 ['Undo','Redo','-','SelectAll','RemoveFormat'],
 ['Bold','Italic'],
 '/',
 ['Subscript','Superscript'],
 ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
 ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
 ['Link','Unlink'],
 '/',
 ['Image','Table','HorizontalRule','SpecialChar'],
 ['Format'],['Font'],
 ['TextColor','BGColor'],
 ['Maximize', 'ShowBlocks','-','About']
 ];
 config.font_names = 'Trebuchet MS;Georgia';
 config.format_tags = 'p;h1;h2';
 config.skin = 'office2003';
 config.startupOutlineBlocks = true;
};

Verwijder “basket” uit de folders van de CKFinder

Voeg hiervoor aan ckfinder/config.js in CKFinder.customConfig = function( config ) toe:

config.removePlugins = 'basket';

Discussie: de CKFinder, wel of niet…

Het uploaden en beheren van bestanden in cd CKFinder loopt paralel aan die van WordPress en is toegankelijk via het knopje “afbeelding” in de optiebalk van de editor. De bestanden worden niet in de zelfde folder geplaatst als die van WordPress maar in een subdirectory hiervan genaamd /images /files of /flash. Ook worden de bestanden niet als attachment gekoppeld. Wil je dit wel, beheer dan de afbeeldingen/bestanden bij een post in de Media van WP zelf, toegankelijk via het “uploaden/toevoegen” gedeelte boven de editor.

Omdat WordPress eigenlijk steeds beter wordt in het beheren van bestanden op  de website is de CKFinder misschien niet echt meer nodig. Moet het even bekijken. Een dubbele manier van opslag werkt mijns inziens nogal verwarrend voor webredacties.Voordeel is wel dat je nu subdirectories kunt maken en de boel beter in mapjes kunt beheren. Een andere reden om voor CKFinder te kiezen is dat deze beter in te stellen is om de code schoon te houden van extra harde HTML zals width=xxx px. Een groot nadeel van CKFinder is dat je maar 1 bestand tegelijk kunt uploaden.

Bronnen en Links

Author: Rian Rietveld

WordPress Engineer focussing on accessibility

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s