History of FckeditorPackage
!FCKEditorPackage
))FCKEditor(( is a WYSIWYG editor for bitweaver from [http://www.fckeditor.net|fckeditor.net].
{maketoc}
!Basic Features
* __Multiple Browser Support__ Including:
** IE 5.5+ (Windows)
** Firefox 1.0+
** Mozilla 1.3+
** Netscape 7+.
* __XHTML 1.0 Output__
* __CSS Support:__ For easier integration with a theme.
* __Font formatting:__ type, size, color, style, bold, italic, etc
* __Text formatting:__ alignment, indentation, bullets list, etc
* Cut, Paste and Paste as Plain Text, Undo and Redo
* Paste from __Word__ cleanup with auto detection
* Link and anchors support
* Table creation and editing (add, delete rows, etc) - one of the best systems in the market.
* Table cells editing (size, colors, etc)
* Right click context menus support
* Support for Toolbar Customization
* Skins
* Spell Checker Integration
* Automatic browser detection and customization
* Full Page Mode
* Easy to Use
* Source Code View
^__NOTE:__ ))FCKEditor(( is currently NOT compatible with the Ajax Comments feature in LibertyPackage.^
!Toolbars
Bitweaver includes the ability to use one of several toolbars with ))FCKEditor(( easily. It is also possible to customize the toolbar by editing the fckeditor/jscripts/fckconfig.js file to specify your own and then adding it to fckeditor/admin/))admin_fckeditor_inc((.php.
!Skins
Bitweaver includes the ability to skin the interface with one of the three default skins. It is also possible to create your own skin. You will have to add it to the fckeditor/admin/admin_fckeditor_inc.php file to add it to the administration interface.
!Adding Your Own Features/Plugins
Here are two good tutorials to get you started
[http://sourceforge.net/forum/forum.php?thread_id=1268047&forum_id=257180|Create a Dialog Based Plug-In]
[http://sourceforge.net/forum/message.php?msg_id=3091867|Creating a Non-dialog Based Plugin ]
!bitweaver Plugins for FCKeditor
!!Split
The Split plugin gives you a button that will insert a split tag: ...split... into your content. This is good for blog posts and articles where you want to easily define a read more section. Now your users don't need to know how to use ...split... they can just click the "Insert Split" button, which includes a hover tool tip letting you know it is for adding a Read More section.
To enable Split in your FCKeditor you need to edit your fckconfig.js file in fckeditor/jscripts/
In fckconfig.js you need to add/uncomment the following:
{code}
FCKConfig.Plugins.Add( 'split' ) ;
{/code}
and you need to add Split to your toolbar list, for example like:
{code}
FCKConfig.ToolbarSets["Basic"] = [
['Source'],['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','Split']
] ;
{/code}
!!Attachment
The Attachment plugin integrates bitweaver's native LibertyAttachments features into the FCKeditor. __Note that the current state of the Attachment plugin only supports previewing of images, and does not yet create attachment associations between content and uploaded files.__ Like the attachment tab in most liberty content packages this fck plugin will let you upload files via ajax to associate with your user account. You can also get a list of all attachments your user has ever uploaded. From the resulting list it is a single click to insert attachment code into your text. The fck plugin will also preview the attachment image in the fck editing interface.
To enable Attachment in your FCKeditor you need to edit your fckconfig.js file in fckeditor/jscripts/ and edit the fck ))header_inc((.tpl
In fckconfig.js you need to add/uncomment the following:
{code}
FCKConfig.Plugins.Add( 'attachment' ) ;
{/code}
and you need to add Attachment to your toolbar list, for example like:
{code}
FCKConfig.ToolbarSets["Basic"] = [
['Source'],['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','Attachment']
] ;
{/code}
In header_inc.tpl you need to include a number of the MochiKit javascript library files.
{code}
{if $gBitSystem->isPackageActive('fckeditor') }
<script src="../util/javascript/libs/MochiKit/Base.js" type="text/javascript"></script>
<script src="../util/javascript/libs/MochiKit/Iter.js" type="text/javascript"></script>
<script src="../util/javascript/libs/MochiKit/Async.js" type="text/javascript"></script>
...rest of header code
{/if}
{/code}
!Image Browser Fix
To get the Resources Browser (Image > Browse Server) working so you can upload files,flash,images and media follow the steps below
in jscripts/editor/fckconfig.js
change asp
{code}
var _FileBrowserLanguage = 'asp' ;
var _QuickUploadLanguage = 'asp' ;
{/code}
to php
{code}
var _FileBrowserLanguage = 'php' ;
var _QuickUploadLanguage = 'php' ;
{/code}
create the following directories in your storage directory
Image,Media,Flash,File
in jscripts/editor/filemanager/browser/default/connectors/php/config.php
change
{code}
$Config['Enabled'] = false;
{/code}
to
{code}
$Config['Enabled'] = true;
{/code}
also set
{code}
$Config['UserFilesPath'] = "/UserFiles/";
{/code}
to point to your storage directory or any other directory that you want your media to be stored in.
{code}
$Config['UserFilesPath'] = "/bitweaver/storage/";
{/code}
make sure apache can write to the directories you created above
{code}
chmod -R 777 storage/
{/code}
Now point your browser to your fckconfig.js file and hit reload
http://localhost/bitweaver/fckeditor/jscripts/fckconfig.js this just makes sure that your changes arn't cached in your browser
!Custom Configuration File
By setting up your ))FCKEditor(( with a custom config file, updates become less problematic, playing around with different settings becomes easier, and the overall setup becomes tidier:
{code}
1. copy /fckeditor/templates/header_inc.tpl to your theme folder:
2. /themes/styles/mytheme/fckeditor/header_inc.tpl
3. find a line like:
4. var oFCKeditor = something ;
5. write this underneath:
6. oFCKeditor.Config["CustomConfigurationsPath"] = "{$smarty.const.THEMES_PKG_URL}styles/mytheme/fckeditor/fckconfig.js";
7. you might also want this next extra line for ultra-fine-control over the toolbar:
8. oFCKeditor.ToolbarSet = "finetunedtoolbar";
{/code}
Now, of course, create the file fckconfig.js in the path mentioned above. This holds all the desired variables from [http://wiki.fckeditor.net/Developer%27s_Guide/Configuration/Configurations_Settings|their documentation pages]. Now if the ))FCKEditor(( package is updated, your settings are not lost. (Take it even one step further by externalizing that XML file. Copy the file fckstyles.xml from /fckeditor/jscripts/fckstyles.xml to the location claimed underneath, the content and how to utilize it is almost self-explanatory.) Anyway, for example, a fckconfig.js file might look like this:
{code}
FCKConfig.Plugins.Add( 'attachment' ) ;
FCKConfig.BodyClass = 'fck';
FCKConfig.EditorAreaCSS = '/themes/styles/mystyle/mystyle.css';
FCKConfig.ForceStrongEm = true;
FCKConfig.StylesXmlPath = '/themes/styles/mystyle/fckeditor/fckstyles.xml';
FCKConfig.ToolbarSets["finetunedtoolbar"] = [
['Source','Style','PasteText','RemoveFormat','Undo','Redo','Bold','Italic','OrderedList','UnorderedList','Outdent','Indent'],
['Link','Unlink','Table','SpecialChar','FitWindow','Attachment']
] ;
// for UTF-8 + Text Diff uncomment these 4 lines:
// FCKConfig.ProcessHTMLEntities = false;
// FCKConfig.IncludeLatinEntities = false;
// FCKConfig.IncludeGreekEntities = false;
// FCKConfig.ProcessNumericEntities = false;
{/code}
!UTF-8 + ))Text_Diff((?
If you're using the HTML format and also sometimes the ))WYSIWYG(( editor and still want to compare different versions of a Wiki page efficiently, you want ))Text_Diff((, the PEAR package that should be installed on your system. There are only 2 problems. First, to make ))Text_Diff(( work in a UTF-8 (e.g., non English) environment, you need to stop ))FCKEditor(( from processing special characters, otherwise ))Text_Diff(( will always find that Motörhead is something else than Motörhead. For that, the last 4 variables in that code sample above are ace of spades. Next, in /wiki/templates/))page_history((.tpl around line 40 you could change
{code title="/wiki/templates/page_history.tpl"}
this: {$diffdata}
to this: {$diffdata|html_entity_decode}
{/code}
... which both can be desirable, but the latter version renders HTML, so that ))Text_Diff(('ing might not result in an exact view of all characters that have actually changed, but in a nicy-fied view of what ''content'' has actually changed:
||before (normal plain text diff) | after (html enhanced diff)
{attachment id=790 size=medium} | {attachment id=791 size=medium}||
! How to prevent the FCKifying of certain textareas
There are quite a few textareas that should not be FCKified even if the editor is supposed to be available in general. Examples would be the textarea to add trackback URLs to a blog posting and many of the kernel's textareas, as well as the ones you add yourself. To prevent the editor to hook onto those, use the __noformat="y"__ attribut like so:
{code}
{textarea id="someid" noformat="y" rows=6 help="somehelpnote"}{/textarea}
{/code}
))FCKEditor(( is a WYSIWYG editor for bitweaver from [http://www.fckeditor.net|fckeditor.net].
{maketoc}
!Basic Features
* __Multiple Browser Support__ Including:
** IE 5.5+ (Windows)
** Firefox 1.0+
** Mozilla 1.3+
** Netscape 7+.
* __XHTML 1.0 Output__
* __CSS Support:__ For easier integration with a theme.
* __Font formatting:__ type, size, color, style, bold, italic, etc
* __Text formatting:__ alignment, indentation, bullets list, etc
* Cut, Paste and Paste as Plain Text, Undo and Redo
* Paste from __Word__ cleanup with auto detection
* Link and anchors support
* Table creation and editing (add, delete rows, etc) - one of the best systems in the market.
* Table cells editing (size, colors, etc)
* Right click context menus support
* Support for Toolbar Customization
* Skins
* Spell Checker Integration
* Automatic browser detection and customization
* Full Page Mode
* Easy to Use
* Source Code View
^__NOTE:__ ))FCKEditor(( is currently NOT compatible with the Ajax Comments feature in LibertyPackage.^
!Toolbars
Bitweaver includes the ability to use one of several toolbars with ))FCKEditor(( easily. It is also possible to customize the toolbar by editing the fckeditor/jscripts/fckconfig.js file to specify your own and then adding it to fckeditor/admin/))admin_fckeditor_inc((.php.
!Skins
Bitweaver includes the ability to skin the interface with one of the three default skins. It is also possible to create your own skin. You will have to add it to the fckeditor/admin/admin_fckeditor_inc.php file to add it to the administration interface.
!Adding Your Own Features/Plugins
Here are two good tutorials to get you started
[http://sourceforge.net/forum/forum.php?thread_id=1268047&forum_id=257180|Create a Dialog Based Plug-In]
[http://sourceforge.net/forum/message.php?msg_id=3091867|Creating a Non-dialog Based Plugin ]
!bitweaver Plugins for FCKeditor
!!Split
The Split plugin gives you a button that will insert a split tag: ...split... into your content. This is good for blog posts and articles where you want to easily define a read more section. Now your users don't need to know how to use ...split... they can just click the "Insert Split" button, which includes a hover tool tip letting you know it is for adding a Read More section.
To enable Split in your FCKeditor you need to edit your fckconfig.js file in fckeditor/jscripts/
In fckconfig.js you need to add/uncomment the following:
{code}
FCKConfig.Plugins.Add( 'split' ) ;
{/code}
and you need to add Split to your toolbar list, for example like:
{code}
FCKConfig.ToolbarSets["Basic"] = [
['Source'],['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','Split']
] ;
{/code}
!!Attachment
The Attachment plugin integrates bitweaver's native LibertyAttachments features into the FCKeditor. __Note that the current state of the Attachment plugin only supports previewing of images, and does not yet create attachment associations between content and uploaded files.__ Like the attachment tab in most liberty content packages this fck plugin will let you upload files via ajax to associate with your user account. You can also get a list of all attachments your user has ever uploaded. From the resulting list it is a single click to insert attachment code into your text. The fck plugin will also preview the attachment image in the fck editing interface.
To enable Attachment in your FCKeditor you need to edit your fckconfig.js file in fckeditor/jscripts/ and edit the fck ))header_inc((.tpl
In fckconfig.js you need to add/uncomment the following:
{code}
FCKConfig.Plugins.Add( 'attachment' ) ;
{/code}
and you need to add Attachment to your toolbar list, for example like:
{code}
FCKConfig.ToolbarSets["Basic"] = [
['Source'],['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','Attachment']
] ;
{/code}
In header_inc.tpl you need to include a number of the MochiKit javascript library files.
{code}
{if $gBitSystem->isPackageActive('fckeditor') }
<script src="../util/javascript/libs/MochiKit/Base.js" type="text/javascript"></script>
<script src="../util/javascript/libs/MochiKit/Iter.js" type="text/javascript"></script>
<script src="../util/javascript/libs/MochiKit/Async.js" type="text/javascript"></script>
...rest of header code
{/if}
{/code}
!Image Browser Fix
To get the Resources Browser (Image > Browse Server) working so you can upload files,flash,images and media follow the steps below
in jscripts/editor/fckconfig.js
change asp
{code}
var _FileBrowserLanguage = 'asp' ;
var _QuickUploadLanguage = 'asp' ;
{/code}
to php
{code}
var _FileBrowserLanguage = 'php' ;
var _QuickUploadLanguage = 'php' ;
{/code}
create the following directories in your storage directory
Image,Media,Flash,File
in jscripts/editor/filemanager/browser/default/connectors/php/config.php
change
{code}
$Config['Enabled'] = false;
{/code}
to
{code}
$Config['Enabled'] = true;
{/code}
also set
{code}
$Config['UserFilesPath'] = "/UserFiles/";
{/code}
to point to your storage directory or any other directory that you want your media to be stored in.
{code}
$Config['UserFilesPath'] = "/bitweaver/storage/";
{/code}
make sure apache can write to the directories you created above
{code}
chmod -R 777 storage/
{/code}
Now point your browser to your fckconfig.js file and hit reload
http://localhost/bitweaver/fckeditor/jscripts/fckconfig.js this just makes sure that your changes arn't cached in your browser
!Custom Configuration File
By setting up your ))FCKEditor(( with a custom config file, updates become less problematic, playing around with different settings becomes easier, and the overall setup becomes tidier:
{code}
1. copy /fckeditor/templates/header_inc.tpl to your theme folder:
2. /themes/styles/mytheme/fckeditor/header_inc.tpl
3. find a line like:
4. var oFCKeditor = something ;
5. write this underneath:
6. oFCKeditor.Config["CustomConfigurationsPath"] = "{$smarty.const.THEMES_PKG_URL}styles/mytheme/fckeditor/fckconfig.js";
7. you might also want this next extra line for ultra-fine-control over the toolbar:
8. oFCKeditor.ToolbarSet = "finetunedtoolbar";
{/code}
Now, of course, create the file fckconfig.js in the path mentioned above. This holds all the desired variables from [http://wiki.fckeditor.net/Developer%27s_Guide/Configuration/Configurations_Settings|their documentation pages]. Now if the ))FCKEditor(( package is updated, your settings are not lost. (Take it even one step further by externalizing that XML file. Copy the file fckstyles.xml from /fckeditor/jscripts/fckstyles.xml to the location claimed underneath, the content and how to utilize it is almost self-explanatory.) Anyway, for example, a fckconfig.js file might look like this:
{code}
FCKConfig.Plugins.Add( 'attachment' ) ;
FCKConfig.BodyClass = 'fck';
FCKConfig.EditorAreaCSS = '/themes/styles/mystyle/mystyle.css';
FCKConfig.ForceStrongEm = true;
FCKConfig.StylesXmlPath = '/themes/styles/mystyle/fckeditor/fckstyles.xml';
FCKConfig.ToolbarSets["finetunedtoolbar"] = [
['Source','Style','PasteText','RemoveFormat','Undo','Redo','Bold','Italic','OrderedList','UnorderedList','Outdent','Indent'],
['Link','Unlink','Table','SpecialChar','FitWindow','Attachment']
] ;
// for UTF-8 + Text Diff uncomment these 4 lines:
// FCKConfig.ProcessHTMLEntities = false;
// FCKConfig.IncludeLatinEntities = false;
// FCKConfig.IncludeGreekEntities = false;
// FCKConfig.ProcessNumericEntities = false;
{/code}
!UTF-8 + ))Text_Diff((?
If you're using the HTML format and also sometimes the ))WYSIWYG(( editor and still want to compare different versions of a Wiki page efficiently, you want ))Text_Diff((, the PEAR package that should be installed on your system. There are only 2 problems. First, to make ))Text_Diff(( work in a UTF-8 (e.g., non English) environment, you need to stop ))FCKEditor(( from processing special characters, otherwise ))Text_Diff(( will always find that Motörhead is something else than Motörhead. For that, the last 4 variables in that code sample above are ace of spades. Next, in /wiki/templates/))page_history((.tpl around line 40 you could change
{code title="/wiki/templates/page_history.tpl"}
this: {$diffdata}
to this: {$diffdata|html_entity_decode}
{/code}
... which both can be desirable, but the latter version renders HTML, so that ))Text_Diff(('ing might not result in an exact view of all characters that have actually changed, but in a nicy-fied view of what ''content'' has actually changed:
||before (normal plain text diff) | after (html enhanced diff)
{attachment id=790 size=medium} | {attachment id=791 size=medium}||
! How to prevent the FCKifying of certain textareas
There are quite a few textareas that should not be FCKified even if the editor is supposed to be available in general. Examples would be the textarea to add trackback URLs to a blog posting and many of the kernel's textareas, as well as the ones you add yourself. To prevent the editor to hook onto those, use the __noformat="y"__ attribut like so:
{code}
{textarea id="someid" noformat="y" rows=6 help="somehelpnote"}{/textarea}
{/code}