EE v. 1.4 plus 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
Table of Contents
- EE v. 1.4 plus FCKeditor Extension
- Setup
- Configuring
- Using the filemanager built into FCKeditor (php connector)
- Pre EE v. 1.4
Setup
The Extension to FCKeditor is available from the forums
http://www.pmachine.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/' ;
A couple of notes:
*<s>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).</s>
*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)
*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:
<nowiki>
FCKConfig.LinkBrowserURL = ‘http://sitename/fckeditor/editor/filemanager/browser/default/browser.html?Type=File&Connector=connectors/php/connector.php’;
</nowiki>
Pre EE v. 1.4
Changes are made at your own risk and are not guaranteed, either by the author or the administrator, to work. You should always make backups of the original files so that you can revert back to them, as well as backups of the database in case you really mess up.
Best Practice
Make a duplicate copy of your original weblog template group, or create a backup copy. This allows you to rollback quickly to a pristine version of the original templates.
Also, note with hacks that they are dangerous and can cause your site to stop working. They also make later updates to EE more difficult and you should track the hacks you use if you are going to use them, or you may lose the functionality later on down the line when you upgrade.
This a small HOWTO to integrate a Java WYSIWYG HTML editor under ExpressionEngine.
If you have any suggestion or correction to add, do not hesitate!
——
HOWTO install FCKeditor (Java WYSIWYG HTML editor) under ExpressionEngine
* Originaly posted by Arnold Jagt on Sep 02 2004 - 6:34 am PST.
* Tested and completed by mailto:ymartin@mail.com on March 06 2005.
Tested with:
* ExpressionEngine 1.2.1
* FCKeditor 2.0 RC3 (http://www.fckeditor.net)
* Works under IE 5.5+ (Tested under IE 6.0), Firefox 1.0+ (tested under Firefox 1.0.1), Mozilla 1.3+ and Netscape 7+.
——
* IMPORTANT NOTE:
ExpressionEngine 1.4 is implements extensions. An FCKeditor extension will likely be released by January 2006, meaning that the tweaking described in this article will be unnessecary. See pmachine.com for the lastest information.
Known issues:
* Until you double click on the entry field, the original link button will not work.
* The upload image functionality doesn’t work
* The browse server function within FEKEditor aren’t configured to work.
Step 1:
* Download FCKeditor at http://www.fckeditor.net
* Decompress the downloaded file
* Rename the folder FCKeditor Package to “fckeditor” (i.e. remove .V2.Package from the end of the folder name and change the first 3 letters (FCK) to lowercase, i.e. fck).
Step 2:
In “/fckeditor/fckconfig.js” disable XHTML support as illustrated below:
* Search for :
FCKConfig.EnableXHTML = true ;
FCKConfig.EnableSourceXHTML = true ;
* Replace it by:
// Enable XHTML support
//FCKConfig.EnableXHTML = true ;
//FCKConfig.EnableSourceXHTML = true ;
FCKConfig.EnableXHTML = false ;
FCKConfig.EnableSourceXHTML = false ;
Step 3 (optional but highly suggested):
To make the text area a little larger simply adjust the fckeditor.js file in the fckeditor folder as shown below.
It make it 400 high (the default is 200).
* Search for:
this.Height = height || '200' ;
* Replace by:
this.Height = height || '400' ;
Step 4:
Upload the fckeditor folder to the root of your public html folder on the Web server where you have ExpressionEngine installed.
To keep the installation instructions simple, don’t change the name of the fckeditor folder.
You can change the folder name and move it somewhere else on your server (but we’ll skip over that for now).
Step 5:
In the EE directory, add this lines to /system(if you renamed it, whatever you renamed it to)/cp/cp.publish.php:
* Search for:
$DSP->input_textarea('field_id_'.$row['field_id'], $field_data, $rows, 'textarea', '99%',
"onclick='setFieldName(this.name)'", $convert_ascii);
* Replace by:
$DSP->input_textarea('field_id_'.$row['field_id'], $field_data, $rows, 'textarea', '99%',
"ondblclick='setFieldName2(this.name)'", "onclick='setFieldName(this.name)'", $convert_ascii);
* In the same file (cp.publish.php), search for :
// Dynamically set the textarea name
function setFieldName(which)
{
if (which != selField)
{
selField = which;
clear_state();
tagarray = new Array();
usedarray = new Array();
* After this, add this lines below:
// FCKeditor
// Dynamically set the textarea name on a DblClick
function setFieldName2(which)
{
if (which != selField)
{
selField = which;
clear_state();
tagarray = new Array();
usedarray = new Array();
var oFCKeditor = new FCKeditor( selField ) ;
oFCKeditor.ReplaceTextarea() ;
}
}
Step 6:
In /system(if you renamed it, whatever you renamed it to)/cp/cp.display.php:
* Search for:
"<meta http-equiv='pragma' content='no-cache' />\n";
* Replace this line by:
// "<meta http-equiv='pragma' content='no-cache' />\n";
// --- FCKeditor ---
"<meta http-equiv='pragma' content='no-cache' />\n".
"</script> \n";
// --- end ---
Note:
If your FCKeditor is not in the public html folder on the Web server where you have ExpressionEngine installed, just adjust the path.
For example, mine is in /index/fckeditor/fckeditor.js , so the last line will be :
"</script> \n";
Additional note:
The files you only need for FCKeditor are:
/editor (the complete dir.)
fckconfig.js
fckeditor.js
fckstyles.xml
license.txt
——
That’s all folks !
It should works. To activate the Java applet, just go in the administrative interface for publishing or editing, and click two times in the editing windows.
The WYSIWYG editor should be there !
Please, complete it if I lost something !
Category:WYSIWYG Category:Hacks