Category:Extensions -> WYSIWYG
Table of Contents
- FCKeditor Extension
- What is FCKeditor
- Installation & Setup
- Using the filemanager built into FCKeditor (php connector)
- Notes
- Bonus: Allowing for EE Code
FCKeditor Extension
• Originally Posted by Jitendra Shrestha (Feb 9, 2006)
•Updated: (Feb 10) More description on enabling file uploads
•Image fileManager tested using the php connector
What is FCKeditor
This HTML text editor brings to the web many of the powerful functionalities of desktop editors like MS Word. It’s lightweight and doesn’t require any kind of installation on the client computer.
Installation & Setup
The Extension to FCKeditor is available from the forums
http://expressionengine.com/forums/viewthread/31467/.
Basic steps are:
• Download Fckeditor and put it in your site (http://www.fckeditor.net/download/default.html)
• Take the included files. Put the one with the ext. prefix into the /system/extensions folder for the site. Take the one with the lang. prefix and put it in the /system/language/english/ language folder. Note: You may have changed the system folder of EE when you installed it
•Go into the Extensions Manager and enable the extension.
•Check it out in the Publish area.
Configuring
The best way to configure FCKeditor is to have your own configuration (.js) file. So create a custom configuration and in the FCKEditor Configuration, just point it to the correct path. My configuration (in the extension) looked something like this:
var oFCKeditor = new FCKeditor(textAreaName);
oFCKeditor.BasePath = '../../fckeditor/' ;
oFCKeditor.Config["CustomConfigurationsPath"]="http://sitename/eetest/eetestconfig.js";
oFCKeditor.ToolbarSet = 'eetestToolbar';
oFCKeditor.ReplaceTextarea() ;
From this, you may deduce that I have created my custom configuration called eetestconfig.js. The contents of which contain a custom toolbarset called eetestToolbar. You may also see that i have copied the fckeditor folder in the same level as the eetest folder (where i have installed expression engine). My eetestconfig.js looks like this:
// Custom toolbar, removed some unneccessary tools
FCKConfig.ToolbarSets["eetestToolbar"] = [
['Source'],
['Cut','Copy','Paste','PasteText','PasteWord','-','Print'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
'/',
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','SpecialChar','PageBreak','UniversalKey'],
'/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor']
] ;
UPDATE: the FCKeditor class is defined as the following
var FCKeditor = function( instanceName, width, height, toolbarSet, value )
Thus, you could combine the toolbarset in one line, as well as giving the width and height of the replacement area. For example the following would have the replacement take up 100% of the width of the parent container and have a height of 500px:
var oFCKeditor = new FCKeditor(textAreaName, '100%', '500', 'eetestToolbar');
Using the filemanager built into FCKeditor (php connector)
Note: I tested this out with the php connector and it works. I am not sure if it will work with the other types of connectors, but I assume that a similar change will make it work for the other types of connectors (ie. asp…etc)
In order to use the built in file manager, you HAVE to edit the config.php file found in fckeditor>editor>filemanager>browser>default>connectors>php> config.php. There are three things that you need to change: You need to enable the connector, set the UserFilesPath and set the UserFilesAbsolutePath. The absolute path will put the image in the correct directory while the userfilespath will get the correct url of the image when you place it. Thus, with the changes, the config.php file should look like this: (minus the comments)
$Config['Enabled'] = true ;
$Config['UserFilesPath'] = '/images/uploads/' ;
$Config['UserFilesAbsolutePath'] = '/[absolutesitename location]/eetest/images/uploads/' ;
Notes
General
•UserFilesPath: I know it says the relative location in the comment above UserFilesPath, but put in the URL because when you place the image in Expression Engine, the real URL to the image will be placed, not a relative url (which doesn’t work).
•UserFilesAbsolutePath: this is your absolute path (ie. pwd in linux) to the image directory (in windows using a virtual apache folder it might be something like /www/mysite/images ... see the forums)
• Note: (http://www.pmachine.com/forums/viewthread/38010/) Some people may need to comment out this line
•Image Management: Without hacking the code, this filemanager will put the images in the Image Subdirectory (in this case under (eetest/images/uploads/), the files in the File subdirectory…so on and so forth. So, you may need to create and set up permissions to this directory (not sure, it work by default for me).
•Image Upload Location: The reason I have put it in the eetest/images/uploads/ directory is that if you want to use the filemanager of Expression Engine, you can do so, and the file will show up in the entry, (it will seem like a broken link when you have FCKeditor up as it uses {filedir_1} - EE Tag, but it’ll work, just preview it if you don’t believe me).
Update: I have found a better solution to a problem with linking images…unfortunately that means editing some fckeditor code:
Now there was a slight problem when a person inserted the images into EECore, the link was relative, so the actual display of the image was broken. I couldn’t find a way to make the links absolute, so I created the following hack to display the absolute url of the images. (Note: make the path in UserFilesPath relative)
# Open fckeditor>editor>filemanager>broswer>default> frmresourceslist.html
# Go to function OpenFile(fileUrl)
# Add:
## var urlChange = ‘http://sitename’+fileUrl.toString();
## window.top.opener.SetUrl(urlChange) ;
# Comment out window.top.opener.SetUrl(fileUrl) ;
# Save and close
Note: Obviously the url would be whatever location that you have EE installed. Once you do this, fckeditor is configured to use EECore only for its images (the link will always be with that url).
Finally: To actually use the connector, I suggest enabling it via the custom configuration (.js) file. Thus, for Images I added the following likes in eetestconfig.js
// Say which connector to use
FCKConfig.ImageBrowserURL =
'http://sitename/fckeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/php/connector.php';
// Getting rid of unneccessary image upload functions
FCKConfig.ImageDlgHideLink = true;
FCKConfig.ImageUpload = false;
FCKConfig.ImageDlgHideAdvanced = true;
And that should be it! Image uploads should work…
One Last Note: You will have to add more lines to the configuration file as you probably want file, media, and flash to have the same upload capability. That is..FCKConfig.LinkBrowserURL and FCKConfig.FlashBrowserURL
Update: You will have to change the Type= in the URL. Thus for file uploads:
FCKConfig.LinkBrowserURL = 'http://sitename/fckeditor/editor/filemanager/browser/default/browser.html?[b]Type=File[/b]&Connector=connectors/php/connector.php';
Bonus: Allowing for EE Code
If you’d like to allow EE code to be put into the editor without it being parsed, you’ll need to follow a few steps. You will still be required to be in source view, however, but you can switch back and forth without the code changing.
You’ll need to go to your fckconfig.js file, usually in your fckeditor folder.
Next, you’ll need to scroll down to about line 58. You’ll see FCK.Config.ProtectedSource…
You’ll need to paste the follow code into a new line there:
FCKConfig.ProtectedSource.Add( /{exp:[\s\S]*?{\/exp:[^\}]+}/g ) ; // Expression Engine style server side code
This is for FCKeditor 2.6.4. Other builds in version 2.x.x should work too.