FCKeditor is a fully-featured embedded WYSIWYG editor for use in web pages and content management systems. This entry focuses on the FCKeditor release in XOOPS.

Latest Version: (includes FCKeditor 2.6.3) | FCKeditor 2.6.3-MB01 

The XOOPS 2.3.x release includes FCKeditor 2.6.3 (and other editor updates, too). I did an integration of the FCKeditor 2.6.0 (archived below) based on the integration efforts of the XOOPSeditor 1.2.1 release for the XOOPS 2.0.x series, and the team asked if it could be included/used in the XOOPS 2.3.0 release (I said yes of course, no use redoing work, but they made a few additional, positive changes).

There are still some configurations you need to make from the core release to make this work best for your site IMHO. The team moved things around a little bit to conform to their new xoopseditor guidelines and to make updating/upgrading FCKeditor much easier (looks proper, too, as to how it's done), so follow the upgrade instructions if migrating from a XOOPS 2.0.x release. I'll note that left out was the integration of custom folder naming as included in the XOOPSeditor 1.2.1 release (which used FCKeditor 2.4.3), so I've included that in mine again as some sites want this capability/delineation, and it's an easy configuration change if desired. Finally, if upgrading, then you just need to copy/move/update a few files.

Installation

Fresh Install

Just copy the files from this release (either from XOOPS 2.3.x or my release) into the /class/xoopseditor directory. If upgrading from my release and you made changes, then follow the upgrade instructions. Finally, make configurations as desired.

Upgrade

It's always best before upgrading to save your configuration, style, and template files (paths from /class/xoopseditor/fckeditor):

• FCKeditor Configurations, Styles and Templates
  • move files fckconfig-xoops.js, fckstyles-xoops.xml, and fcktemplates-xoops.xml into the xoops root FCKeditor directory (found in /class/xoopseditor/fckeditor)
• FCKeditor Connector Configs
  • save the config.php file (in .../editor/filemanager/connectors/php directory) to refer to when updating your configs there
  • Make appropriate configuration changes as described in my modifications below (or use my latest release)

Note: upgrades using FCKeditor 2.4.x will require that you make all configuration changes again as described below due to the changes in file structure to FCKeditor. If upgrading from FCKeditor 2.6.0-MB01 to my FCKeditor 2.6.3-MB01 release (or the XOOPS 2.3.2 release without my mods or configurations), then you only need to update/merge the files above with yours.

Configuration

Make the following changes as desired (from /class/xoopseditor/fckeditor path):

• Enable Custom Configurations
  You must make the change as described below to use the fckeditor-xoops.js custom configs (including styles, templates).
• Other PHP-based Modifications
  See below for other useful modifications (apply as desired)

Modifications

These are the modifications I've made based on the XOOPS 2.3.2 release.

Files

The list of files I've changed/added per below (from /class/xoopseditor/fckeditor path):

• fckconfig-xoops.js (custom FCKeditor configs)
• fckeditor
  • fckeditor/editor/dialog
    • fck_paste.html (Paste from Word Remove Styles checkbox checked by default)
  • editor/filemanager/connectors/php
    • commands.php (custom directory/filename code)
    • config.php (default upload directory, enable Subdirectories, disable QuickUpload, enable ProtectedSource, directory/file permissions, custom directories/filenames)
  • editor/lang
    • en.js (per my desires)
  • fckeditor.js (required to use custom configs)
  • fckeditor_php4.php - HTML special characters bug
  • fckeditor_php5.php - HTML special characters bug
• fckconfig-xoops.js (custom FCKeditor configs)
• fckstyles-xoops.xml (custom css styles for dropdowns -- styles specified in theme css)
• fcktemplates-xoops.xml (custom site templates -- styles specified in theme css)
• modules
  • fckeditor.config.js (cleared customizations)
  • readme.txt (clearer instructions)

HTML Special Characters Issue

For whatever reason, this error still persists — even in the XOOPS 2.3.3 release of FCKeditor 2.6.3. XoopsEditor 1.21 solved it by getting rid of the undoHtmlSpecialChars call in formfckeditor.php (as introduced in the XoopsEditor 1.10 release). However, it was re-introduced. I expect there is a reason that this call is made by FCKeditor for some sort of protection in case someone adds a special character in the source side - ::shrug:: This fix applies to FCKeditor 2.6.3 as released in XOOPS 2.3.3.

Using any special characters cause an unintended cascading effect of ampersand conversion. For instance, a quote " will become " in the code — as it should be. However, after FCKeditor retrieves it from the database and displays it, it becomes " in the WYSIWYG instead of ". The next time it becomes " and then " ad infinitum. What I had to do was change fckeditor_php4.php and fckeditor_php5.php, approximately line 158 to (in function CreateHtml):

// $HtmlValue = htmlspecialchars( $this->Value ) ;
$myts =& MyTextSanitizer::getInstance();
$HtmlValue = $myts->htmlSpecialChars( $this->Value ) ;

This is because this XOOPS implementation uses the $myts->undoHtmlSpecialChars function before throwing it back into the database so we need to use the XOOPS version of the htmlspecialchars function.

Enable Custom Configurations

This methodology makes updates easier to keep custom configs when upgrading FCKeditor in XOOPSeditor. Thus, the FCKeditor release code points to these configurations (except for php configs). Unfortunately, for some reason or another, this release doesn't actually point to the custom configs file, so to enable it, you must edit fckeditor/fckeditor.js, line 27 to be

FCKConfig.CustomConfigurationsPath = '../fckconfig-xoops.js' ;

Enable ProtectedSource

This should have been done by the development team since this configuration depends upon the server-side application language in use (php for XOOPS), so, to stop having to worry about this, put in in fckconfig-xoops.js (at least until this gets fixed), or make the edit in fckeditor/fckconfig.js again by uncommenting line 58 to be:

FCKConfig.ProtectedSource.Add( /<\?[\s\S]*?\?>/g ) ; // PHP style server side code

Paste from Word Remove Styles Checkbox

I want the remove styles checkbox checked by default for the Paste from Word function, so made this change to line 339 of fckeditor/editor/dialog/fck_paste.html:

<input id="chkRemoveStyles" type="checkbox" checked="checked" />

Enabling Sub-Directories

To all your upload path to have subdirectories, edit fckeditor/editor/filemanager/connector/php/config.php line 62 like so (adding '\/'):

$uploadPath = defined("XOOPS_FCK_FOLDER") ? preg_replace("/[^a-z0-9_\-\/]/i", "", XOOPS_FCK_FOLDER) : "fckeditor";

Default Upload Directory

The default upload directory is /uploads/fckeditor. To change the second part, edit fckeditor/editor/filemanager/connector/php/config.php line 62 to change 'fckeditor' to the directory name of your choice (like 'mynewdirname'). Whatever you name this, it will remain as a subdirectory in the uploads directory.

Disable Upload Tab

I disabled the Upload tab on the main insert pop-up window because files uploaded here load directly into the XOOPS_FCK_FOLDER directory and thus weren't easily accessible/browsable, especially using the more functional Browse Server button. This still allows users to upload by using the more functional Browse Server pop-up and upload. Until we can see those files with the browser, it doesn't make sense to use this (now disabled) upload tab. On line 86 of fckeditor/editor/filemanager/connector/php/config.php remove 'QuickUpload' from the array like this:

$Config['ConfigAllowedCommands'] = array('FileUpload', 'GetFolders', 'GetFoldersAndFiles', 'CreateFolder') ;

Alternatively, one could change the $Config['QuickUploadPath']['Type'] settings (and related QuickUploadAbsolutePath cousins) in the same config.php file.

Upload File Permissions

Files and folders will be created with 777 permissions unless you change it in the configurations file, change in fckeditor/editor/filemanager/connectors/php/config.php:

• Files: line 100 (recommend 644)
• Folders: line 104 (recommend 755)

Relative URLs

If you want to use server relative URLs (highly recommended for too many reasons), change line 69 of fckeditor/editor/filemanager/connectors/php/config.php and line 64 of fckeditor/editor/filemanager/connectors/php/upload.php from:

$Config['UserFilesPath'] = XOOPS_UPLOAD_URL . "/" . $uploadPath . "/" ;

to:

$Config['UserFilesPath'] = str_replace(XOOPS_URL,"",XOOPS_UPLOAD_URL) . "/" . $uploadPath . "/" ;

This just removes the portion with your server name. Relative URLs rule for content! It also allows for easier migration from development sandbox to the production server.

Directory and Filename Patterns

The directory (by month/year or year) and filename (various options) patterns was introduced in XOOPSeditor 1.2.1 but dropped in this implementation for some reason (I'm assuming to touch as little of the connector code as possible for future updates). Some of my community sites liked it, so I've added it back in. To add it back in, follow these instructions.

Add to fckeditor/editor/filemanager/connectors/php/config.php the following lines:

// Directory Pattern (UserFiles path based on month and/or year)
// Possible values:
// - Ym: new subdirectory each month
// - Y: new subdirectory each year
// - empty: inside same directory
$Config['UserFilesPathPattern'] = "" ;

// Filename Pattern (filename adds this info)
// Possible values:
// - date: YmdHis
// - time: unixtime
// - uid: userid (prepad with 0)
// - |: combination
// - empty: original name
$Config['UserFilesNamePattern'] = "" ;

and then make configuration changes based upon the pattern(s) you want to use.

In fckeditor/editor/filemanager/connectors/php/commands.php remove lines 177-179:

$sFileName = SanitizeFileName( $sFileName ) ;

$sOriginalFileName = $sFileName ;

then, add starting at (before) new line 182

$name_pattern = "";
if (!empty($Config['UserFilesNamePattern'])) {
$patterns = explode("|", $Config['UserFilesNamePattern']);
$delimiter = "";
foreach ($patterns as $pattern) {
switch($pattern) {
case "date":
$name_pattern .= $delimiter . date("YmdHis");
break;
case "time":
$name_pattern .= $delimiter . strval(time());
break;
case "uid":
$name_pattern .= $delimiter . ( is_object($GLOBALS["xoopsUser"]) ? str_pad($GLOBALS["xoopsUser"]->getVar("uid"), 10, "0", STR_PAD_LEFT) : "0" );
break;
}
$delimiter = "-";
}
}
if (!empty($name_pattern)) {
$sFileName = $name_pattern . "." . $sExtension;
} else {
$sFileName = SanitizeFileName( $sFileName ) ;
}

$sOriginalFileName = $sFileName ;

Module Upload Disabling

Interestingly, in the module-specific configuration code, there is ability to disable file uploads for that module alone, but the code doesn't exist to actually disable upload ability in the php connector. To do so, add these lines to fckeditor/editor/filemanager/connectors/php/config.php (before enabling -- i did it starting at line 62):

if ( defined("FCKUPLOAD_DISABLED") && FCKUPLOAD_DISABLED ) {
SendUploadResults( '1', '', '', 'ERROR: file uploader is disabled' ) ; // this should be "languaged"
exit();
}

Summary

These are my (now "archived") notes and instructions for implementing FCKeditor 2.6.0 across a XOOPS site and for enabling file uploads and the images portion to work correctly, using a site-wide repository as well as repositories for specific modules (single or shared). I originally implemented FCKeditor using the XoopsEditor 1.10 release, but ran into some bugs, and this document is an evergreen release of the evolving XOOPSeditors and especially FCKeditor. The XoopsEditor 1.21 release fixed many of the bugs/issues I originally noted. However, due to an issue with the "maximize editor" function introduced in FCKeditor 2.4.3 (used in XoopsEditor 1.21) related to relative divs, and the issue being fixed in the 2.5.x release, I decided to update to 2.5.1, and along the way 2.6 was release, so I updated to that.

Latest Version: 1.21 (includes FCKeditor 2.43) | FCKeditor 2.6.0-MB01 

FCKeditor 2.6 brings:

• Custom chmod file/directory permissions

FCKeditor 2.5.x had quite a bit of code restructuring to the file system, a positive thing, combining the similar code from various directories.

The new FCKeditor 2.4.3 (as implemented in XOOPSeditors 1.21) brings some new capabilities that may be of use:

• use upload sub-directories automagically named by year&month or year alone;
• automagic file re-naming using the original name, datetime, unixtime, userID, and/or a combination of the above.

For public sites allowing uploaded images and such, this is probably a positive thing, but "corporate" customers will likely not want it.

If you want, instead of doing this editing, you may want to just download my update to FCKeditor (currently based on 1.10, but updating soon), but I recommend also reading this document and understanding what you may want to use or not use for your implementation. At the very least, there are some classes that you will need to add to your theme to get some of my style implementations to work as intended.

Installation

Fresh Install

In short, here is what I did to get FCKeditor (included in XOOPSeditor) working:

• Download XOOPSeditor and install per their instructions
• XOOPSROOT/class/xoopseditor/FCKeditor (the update I made uses the lower-case convention used by FCKeditor).
• Modify any calls from your modules that aren't using this path to point to the appropriate directory. Depending upon the module, you may also need to edit the variables passed when called because it expects an array of configuration information.

At this point, the editor should generally work (except for uploads -- see notes below).

Upgrade

If upgrading from previous versions, you may want to keep the following files (from FCKeditor root) from being overwritten:

• fckconfig-xoops.js (where you made configuration changes -- hopefully)
• fckstyles-xoops.xml (custom style definitions)
• fcktemplates-xoops.xml (custom template definitions)

Finally, if upgrading to a version using FCKeditor 2.5.x or above (such as my version) from a version using FCKeditor 2.4.x or below, then any module-specific custom configuration files will need to be updated as well since the file calls have changed. Just replace them, or copy and edit as appropriate. Also, between 2.4.x and 2.5.x+, the sub-directories for the upload folders changed case from Initial Caps to lowercase.

Configuration Settings

This implementation allows for custom configurations -- site-wide and per module. To make things easier, a custom config file is involved called fckconfig-xoops.js, and you should provide all customized default configs in that file (for easier upgrades). When called this implementation reads the fckeditor configs, your custom default configs, then the module configs, each overwriting the previous, if they exist.

Note: This implementation creates a cache of any customized configurations (combines default site-wide custom configs and any module configs), one for each module: XOOPS_ROOT/cache/fckeditor.moduleName.js. When making changes, you will need to clear the cached file to see such changes take effect. You likely also need to clear the browser cache to see the configuration changes.

Upload Directories

Site-Wide Configuration

By default, the FCKeditor upload path is XOOPS_UPLOAD_URL/fckeditor. Should you desire to change the sitewide default, edit the $uploadPath variable in the config.php files (default is fckeditor; I like to use one called content, as included in my version of the module), and/or use module-specific configurations.

While the editor can create the various upload directories (and sub-directories), for "security" reasons, I'd suggest you go ahead and make them yourself (note prior versions used initial caps on these): file, flash, image, media, and then copy the index.html into each of these so you can't do directory listings.

Modules-Specific Configuration

You may override the sitewide default upload directory for each module allowing a distinct location for each module and/or share between multiple modules. This implementation of FCKeditor will first look for the configuration files in the root of that module's directory and if they exist, use those settings to override the default site-wide settings.

For each module that you want to have different from the global settings, here is what you may do:

• Install: copy the three files from the fckeditor/modules folder to the root directory of the module in question
• Enable Uploads: edit MODULE/fckeditor.upload.php and ENABLE uploads (if you want), by disabling the FCKUPLOAD_DISABLED variable (by making the 1 a 0 in this line: define(FCKUPLOAD_DISABLED, 0);) otherwise it will NOT allow you to upload files (images or otherwise).
• Specify Folder: By default, the upload directory will be the name of the module. If you want to use a different folder, then specify such for XOOPS_FCK_FOLDER In both the module fckeditor.upload.php and fckeditor.connector.php files.
• Configs: Put any module-specific configs in the fckeditor.config.js file. If you have none, you may remove this file.

Toolbars

Toolbar layout may be specified site-wide and per module using the appropriate configuration files noted above. Currently, the toolbar named "Xoops" is the one used by this implementation. You can change/add a toolbar layout in the respective configuration files. [Note: The toolbar name "Xoops" is defined in formfckeditor.php, although I assume it could be overwritten in any configuration file. I'd also like to be able to set different ones for users and for admins, which can be done programmatically in the object creation. This likely needs to be done here.]

Note: for my implementation, I removed/disabled a number including PageBreak (needs to work differently for module integration and/or I need to edit further), docProps, Print, FontNames (should be in stylesheet), and some others. I also re-ordered them to my liking.

Styles

Styles are in several places. There is the main definition in the config file: CoreStyles. There are those defined in fckstyles.xml, the sitewide definition for styles for the drop-down box upon which the CustomStyles variable expands. And then there are the stylesheets used for the display in the editor window.

CoreStyles

Don't remove or add to these, but you may make changes. I set B to be strong and I to be em(phasis) per W3C standards.

Styles Toolbar Dropdown Selector

Style definitions for the drop-down Style setting on the toolbar may be configured site-wide and in each module in their respective config files. I zero'd out the CustomStyles config setting and pointed to the fckstyles-xoops.xml definitions; edit your style definitions there.

Stylesheets

By default, FCKeditor uses a stylesheet from the editor/css directory, but I modified this implementation to use the xoops_getcss() call to use the theme stylesheets for the editor body. My users like this much better than having to visualize what it should look like.

Templates

Templates are specified in the fcktemplates.xml file. I've set the preferences to point to the fcktemplates-xoops.xml file so one can always keep the other for reference. See the FCKeditor documentation for details, but it's pretty easy to setup an insertable template. I create my templates inside the editor and then upload them into the templates to be available to users.

Spelling

I enabled FirefoxSpellChecker, not really a spell-checker, but underlines words not found. The default spelling application for IE — ieSpell — requires a commercial license if not for personal use, and it requires a downloadable file to install on your hard drive. FCKeditor recommends providing your own copy linked, and ieSpell only works if installed on the client machine. I've linked to /common/iespell/iespell.exe which symbolicly links to the latest download I have. The alternate is SpellerPages, but it's server-side spell checking requiring a submission; while it works, it's not desirable.

Modifications

This information applies to integrating the work done on the FCKeditor included in the XOOPSeditor release. To integrate the latest FCKeditor into the current XoopsEditor framework, obtain certain functionality, and make it work in the manner I think it should, I made the following modifications to the implementation.

First, I copied the latest version of FCKeditor into the XOOPSROOT/class/xoopseditor directory. Then from the XOOPSeditor release, I merged in their changes. This included copying the following files (and updating some):

• editor_registry.php
• fckconfig-xoops.js - update per my preferences, also specifies custom styles and templates files
• formfckeditor.php - updated to set editor window stylesheets to use theme stylesheets; added caption tag
• language/<all>
• module/<all> - updated to reflect new paths

I modified a mess of FCKeditor files:

• fckconfig.js - pointed to custom prefs file, enable php ProtectedSource
• fckeditor_php4.php - changed HTML special characters per XoopsEditor 1.21
• fckeditor_php5.php - changed HTML special characters per XoopsEditor 1.21 (solution outlined below for xoopseditor 1.10 may be better solution)
• editor/dialog/fck_paste.html - set the "remove styles" checkbox for Word pastes to be checked
• editor/filemanager/connector/php/
  • commands.php - merged XoopsEditor 1.21 changes for sFileName, sOriginalFileName;
  • config.php - merged XoopsEditor 1.21 changes, set file/directory permissions
  • upload.php - merged XoopsEditor 1.21 changes
• editor/lang/en.js - modified to reflect my preferences

I added the new files called from the custom configuration file:

• fckstyles-xoops.xml - custom styles accessed using the Style drop-down box
• fcktemplates-xoops.xml - custom templates accessed using Templates button

Enabling Uploads

To have uploads work (for images, flash, etc.), you will have to enable the connector (or uploads won't work at all):

• /editor/filemanager/connectors/php/config.php, line 65: $Config['Enabled'] = true;

Disable Upload Tab

I disabled the Upload tab on the main insert window because files uploaded here load directly into the XOOPS_FCK_FOLDER directory and thus weren't easily accessible/browsable, especially using the more functional Browse Server button. This still allows use of the more functional Browse Server pop-up and upload. Until we can see those files with the browser, it doesn't make sense to use this (now disabled) upload tab. On line 85 in ...connectors/php/config.php, line 86, remove 'QuickUpload'). Alternatively, one could change the $Config['QuickUploadPath']['Type'] settings (and related QuickUploadAbsolutePath cousins) in the config.php file.

Enabling Sub-Directories

If you want your upload path to allow the use of subdirectories, change:

if(!defined(XOOPS_FCK_FOLDER) || !$uploadPath = preg_replace("/[^a-z0-9_\-]/i", "", XOOPS_FCK_FOLDER) )

to be (allow directory slashes):

if(!defined(XOOPS_FCK_FOLDER) || !$uploadPath = preg_replace("/[^a-z0-9_\-\/]/i", "", XOOPS_FCK_FOLDER) )

Upload File Permissions

Files and folders will be created with 777 permissions unless you make these changes (search for 'chmod' in each file):

• Files: change line 250 of editor/filemanager/connectors/php/commands.php (recommend 644)
• Folders: change line 126 of editor/filemanager/connectors/php/io.php (recommend 755)

Relative URLs

If you want to use server relative URLs (highly recommended for too many reasons), change line 63 of editor/filemanager/connectors/php/config.php and line 64 of editor/filemanager/connectors/php/upload.php from:

$Config['UserFilesPath'] = XOOPS_UPLOAD_URL."/".$uploadPath."/";

to:

$Config['UserFilesPath'] = str_replace(XOOPS_URL,"",XOOPS_UPLOAD_URL)."/".$uploadPath."/";

This just removes the portion with your server name. Relative URLs rule for content! It also allows for easier migration from development sandbox to the production server.

Errors/Bugs

I found bugs (beyond these enhancement issues above).

Captions

When using the FCKeditor in a form, the caption text wasn't being passed. To fix, in XoopsRoot/class/xoopseditor/fckeditor/formfckeditor.php, change line 56 to:

$this->XoopsFormTextArea(@$this->_caption, @$this->_name, @$this->_value);

HTML Special Characters Issue

Note: Solved in XoopsEditor 1.21 by getting rid of the undoHtmlSpecialChars call in formfckeditor.php as applied in the XoopsEditor 1.10 release (resulting in the info below). However, I expect there is a reason that this call is made by FCKeditor for some sort of protection in case someone adds a special character in the source side - ::shrug::] This fix below applies to older 1.10 implementation.

Using any special characters cause an unintended cascading effect of ampersand conversion. For instance, a quote " will become &quot; in the code — as it should be. However, after FCKeditor (in the 1.10 implementation) pulls it back up, it them becomes &quot; in the WYSIWYG instead of ". The next time it becomes &amp;quot; and then &amp;amp;quot; ad infinitum. What I had to do was change fckeditor.php, approximately line 58 to be these two lines:

global $myts;
$HtmlValue = $myts->htmlSpecialChars( $this->Value ) ;

This is because this XOOPS implementation uses the $myts->undoHtmlSpecialChars function before throwing it back into the database so we need to use the XOOPS version of the htmlspecialchars code.

Miscellaneous Notes...

Note: In version 2.5.x, FCKeditor changed the file structure "drastically." It was a good move because it combined and consolidated code that was quite duplicated. But if you still are having problems, then you can use the two test files included to help troubleshoot your installation just like I did:

http://yoursite.com/class/xoopseditor ... ager/connectors/test.html

    and

http://yoursite.com/class/xoopseditor ... onnectors/uploadtest.html

Enhancement Requests

• Toolbars: I'd like to offer Users just the basic toolbar and then offer other groups (Admins and privileged content users) the ability to use the full toolbar. I see this in the implementation for Drupal, so I'm sure it can be done here. That's left for another day for me. I assume that even though the toolbar isn't there, I can still upload just about any HTML, though, so I'm not sure if it buys any security for the site. It appears this can be done in 2.5.1 with a code change, but I'll have to look at it more.
• Options moved to config file. Many of these changes can likely be moved to the configuration file(s). This includes permissions, paths, etc. I expect that is where one would likely want to add the module info, too.
• FontNames, FontFormats, FontColors, FontSizes to be done programmatic in the theme, checking to see if the theme has the files or using the defaults instead.
• CKFinder - a replacement file manager, but will need some integration work. Allows for deleting, too, and thumbnails and better file management.
• Links to automagically remove the current server's name as well and to automagically set the target to _blank for other servers. Best in FCKeditor somehow.

Many thanks to the following posts for helping me to get this going. XOOPS: News Article, Forum Post 1 and Post 2 where I was pointed to XOOPSInfo Post where I was pointed to XOOPSforge Post which pointed me to the test URLs. From all of those pointers, I was able to figure this out.