FCKeditor Tutorials

All the tips on this page are for FCK Editor 1.6 or 2.0 Beta 2. You can visit the FCK Editor home page to learn more about this open-source javascript rich text editor.

Readable XHTML Formatting for FCKeditor 1.6

I edited the "js/fck_xhtml.js" file so that there would be a line break placed after every block element, like a "<p>" or an "<h1>" and a tab would be placed before nested elements like "<li>" and "<td>". This makes the document tree much more readable and makes code editing and error correction much easier especially since the XHTML code created by FCKeditor 1.6 can be a bit buggy at times. I also added a rough bit of code that makes the parser ignore the "shape" and "coord" properties of image maps because the XHTML renderer kept mangling my image maps and making them invalid and useless. It should be noted that this code will not allow you to type line breaks and tabs in source mode and have them stick. This simply adds line breaks and tabs into the formatted code so that it is human readable. It should also be noted that the "config.EnableSourceXHTML" option should be set to "true"

Files changed:
js/fck_xhtml.js

Better Integration for FCKeditor 1.6

I have changed FCK Editor to allow you to dynamically create a toolbar instead of having to specify it explicitly in the config file. This is very useful when you need to create a toolbar quickly without having to manually edit FCK Editor.

You can use this example code to initialize the editor. What you basically do is create an array representing the toolbar, similar to how you would create the array in the "js/fck_config.js" file. Then you can assign that toolbar to the editor in the exact same way you would specify other config variables.

If you are having any problems getting this to work please let me know. I may have left out a step because it has been a few months since I made the changes.

Files changed:
fckeditor.php
js/fck_init.js

FCKeditor 2.0 Beta 2 PHP Integration

I have created a PHP class to call FCKeditor 2.0 Beta 2. This works in much the same way as the original class that was included in the 1.6 distribution. I have included the modifications for dynamic custom toolbars that were introduced above.

Files Changed:
fckeditor.php
editor/js/fck_startup.js

You can use this example code to initialize the editor. It works in much the same way as the 1.6 modifications mentioned above.

FCKeditor 2.0 Beta 2 Config for Font Format

I added some config directives to allow you to set the options available to the "Font Format" Dropdown using the config file. You can view this text file to see exactly what lines to add.

Files Changed:
fckconfig.js
editor/js/fckeditorcode_gecko_2.js
editor/js/fckeditorcode_ie_2.js

• Home
• Web Design
• Interactive Design
• Contact