FckeditorPackage

A WYSIWYG Editor Integrated into Bitweaver

Created by: WaterDragon, Last modification: 20 Jul 2010 (09:46 UTC) by Lester Caine

FCKEditor has been renamed by CKEditor from Version 3. Currently version 3.3.1 is available in bitweaver HEAD.

FCKeditor

FCKeditor is a rich text editor. This means, input areas for content will look like an Office program. Users mark some text, then click on a button B or hit Ctrl+B on their keyboard, and instantly see the marked text bold. It is browser independent, written in Javascript, and released as Open Source by fckeditor.net. Alternatively, you can use TinyMCE, another rich text editor that can easily be integrated with Bitweaver.

How to enable FCKeditor in Bitweaver

  1. Enable Bitweaver's FCKeditor package: your Bitweaver > Admin > Kernel > Packages.
  2. Enable HTML in Admin > Liberty > Plugins > Format. Consider setting HTML as default format.
  3. Enable the ability to input HTML for the user group of your choice in Admin > Users > Groups & Permissions.

Features

  • Multiple Browser Support, including Internet Explorer 5.5+, Firefox, Mozilla, Netscape, Opera, Safari
  • 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

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.

Issues

  • FCKeditor is currently NOT compatible with the feature Ajax Comments in Admin > Liberty > Comments.

Your own plugins for FCKeditor

If you want to write your own plugin for FCKeditor, here are two good tutorials to get you started:

Bitweaver's 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, open the file fckconfig.js and uncomment the following line:

/fckeditor/jscripts/fckconfig.js


<?php
FCKConfig
.Plugins.Add'split' ) ;
?>


Now you need to add Split to your toolbar list, for example like:

/fckeditor/jscripts/fckconfig.js


<?php
FCKConfig
.ToolbarSets["Basic"] = [
    [
'Source'],['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','Split']
] ;
?>


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 FCKeditor 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 FCKeditor plugin will also preview the attachment image in the FCKeditor editing interface. To enable Attachment in your FCKeditor you need to edit fckconfig.js and FCKeditor's header_inc.tpl:

/fckeditor/jscripts/fckconfig.js


<?php
// add or uncomment:
FCKConfig.Plugins.Add'attachment' ) ;
?>


Now you need to add Attachment to your toolbar list, for example like:

/fckeditor/jscripts/fckconfig.js


<?php
FCKConfig
.ToolbarSets["Basic"] = [
    [
'Source'],['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','Attachment']
] ;
?>


Finally, include a number of the MochiKit Javascript library files, there are two ways to do this. You can add them in the header_inc.tpl or even better is to edit bit_setup_inc.php and include them via our javascript bundling function:

/fckeditor/templates/header_inc.tpl


<?php
{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}
?>


/fckeditor/bit_setup_inc.php


<?php
    $gBitThemes
->loadAjax'mochikit', array( 'Iter.js' ) );
    
// add the above loadAjax call before the following loadJavascript line
    
$gBitThemes->loadJavascriptFCKEDITOR_PKG_PATH.'jscripts/fckeditor.js' );
?>


Image Browser Fix

To get the Resources Browser (Image > Browse Server) working so you can upload files, flash, images and media, first change 'asp' to 'php' in fckconfig.js:

/fckeditor/jscripts/editor/fckconfig.js


<?php
// original:
// var _FileBrowserLanguage    = 'asp' ;
// var _QuickUploadLanguage    = 'asp' ;
// change to:
var _FileBrowserLanguage    'php' ;
var 
_QuickUploadLanguage    'php' ;
?>


Now create new directories in your storage directory:

new directories


<?php
/storage/Image/
/
storage/Media/
/
storage/Flash/
/
storage/File/
?>


Now edit the config.php of FCKeditor's Filemanager:

/fckeditor/jscripts/editor/filemanager/browser/default/connectors/php/config.php


<?php
//    original:
//    $Config['Enabled'] = false;
//    change to:
    
$Config['Enabled'] = true;

//    original:
//    $Config['UserFilesPath'] = "/UserFiles/";
//    change to:
//    your storage directory or any other directory that you want your media to be stored in.
    
$Config['UserFilesPath'] = "/bitweaver/storage/";
?>


Make sure apache can write to the directories you created above:

command line


<?php
chmod 
-R 777 storage/
?>


Now point your browser to fckconfig.js (http://localhost/bitweaver/fckeditor/jscripts/fckconfig.js) and hit reload to makes sure that your changes are present in your browser.

Custom configuration files

Set up your FCKeditor with a custom fckconfig.js to make updates and trying different settings easier:
  1. Admin > FCKeditor > Settings:
  2. enable Custom config file
  3. copy /fckeditor/fckconfig.bitweaver.js to your custom style:
  4. /themes/styles/your-style/fckeditor/fckconfig.bitweaver.js
  5. edit settings and toolbars, see:
  6. FCKeditor documentation
  7. trick: externalize the XML file that holds FCKeditor's styles:
    1. copy fckstyles.xml from /fckeditor/jscripts/fckstyles.xml to your custom style
    2. in /themes/styles/your-style/fckeditor/fckconfig.bitweaver.js, add:
    3. FCKConfig.StylesXmlPath = '/themes/styles/your-style/fckeditor/fckstyles.xml';
    4. by editing that file you can control which styles are shown in FCKeditor's style dropdown

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. To prevent the editor to hook on to your textareas, don't use bitweaver's "textarea" Smarty-plugin, but normal plain HTML:

somepackage/templates/some.tpl


<?php
{*
//     instead of:
//    {textarea id="someid" rows=6 help="somehelpnote"}{/textarea}
//    write:
*}
    <
textarea id="someid" rows=6 help="somehelpnote"></textarea>
?>

Comments

very nice

by nexe, 17 May 2007 (06:12 UTC)
very nice touch with the attachments. Now if you can build plugins for all of the tiki wiki plugins like TOC, tabs ect.. that would be absolutly fantastic.

How to install

by , 19 Oct 2007 (06:31 UTC)
As simplistic as it sounds, but where do I find this package for install?

It's not in my bitweaver root, and I can't seems to find anywhere to download it from this site or FCK's.

Trouble with toolbars?

by juicydata, 15 Jun 2008 (15:00 UTC)
I enabled FCKEditor for wiki, in R2 (2.0.2), and I found : "Toolbar 'Supported' not set" dialog boxes.

The workaround to my wysiwyg wiki problem was to enable custom fckeditor config, and copy the provided fckeditor.bitweaver.js to the new name fckeditor.custom.js.


Can't use upload

by bdietz, 18 Dec 2009 (18:44 UTC)
When I use the attachment plugin and try to upload a file, I get "Error with upload: You must enter your email address".. Any idea what is causing this?

Can't get it

by djdubuque, 06 Oct 2011 (07:51 UTC)
It doesn't work on my site.