Extension:FCKeditor (by Mafs)

Introduction
This is an experimental approach providing a semi WYSIWYG editor concept.


 *  It may lead to security and technical problems as well as data corruption. 
 * It should work reasonably within a controlled environment.
 * For background information have a look at the WYSIWYG editor article, in which advantages and disadvantages of such tools in the framework of Wikis are studied thoroughly.

Usage
Depending on your configuration the editor is either activated on a per page basis for those pages having the token __USE_EDITOR__ on it (see Screen shots) or it is activated globally (see below).

Wysiwyg

 * Use the FCKeditor for full WYSIWYG text (eg font and background colors), table and image [[image:FCKImage4.png]] formatting.
 * A heading is created by selecting/highlighting an expression and then clicking on "Format" -> "Heading[1-5]". A TOC and edit section links are displayed according to the normal rules.

Wiki syntax
Wiki syntax has to be used for:
 * internal wiki links: PageTitle ;
 * external links: ;
 * category links and
 * images links [[Image:ImageTitle.png]] and
 * extensions like $$ ... $$ or private extensions  ...  ;
 * mediawiki magic words, eg ;
 * templates.


 * images links [[Image:ImageTitle.png]] can still be used.

Activating the editor on a per page basis

 * 1) open a new page for editing;
 * 2) add the token " __USE_EDITOR__ ";
 * 3) save the page;
 * 4) click again on "edit" and you should see the FCKeditor.


 * For deactivating the editor remove the token in edit mode.
 * For escaping the magic word "__USE_EDITOR__" see.


 *  Do not add the token "__USE_EDITOR__" on an existing page which contains standard wiki syntax.  The fckeditor removes line breaks which corrupts your page layout. (But don't panic, the history function is always available.)

Changelog

 * update: mediawiki version 1.6.2, fckeditor version 2.2 Mafs 20:15, 10 April 2006 (UTC)
 * patch free, true extension version published Mafs 09:48, 14 May 2006 (UTC)
 * small fix in FCKeditor.php Mafs 16:17, 15 May 2006 (UTC)
 * documentation rewritten Mafs 19:51, 3 July 2006 (UTC)
 * support for extensions (like ) improved. Mafs 20:25, 7 July 2006 (UTC)
 * tested on mediawiki 1.7.1 Mafs 16:22, 11 July 2006 (UTC)
 * FCKeditor image dialog [[image:FCKImage4.png]] adapted for inserting and formatting images based on mediawiki images names. Using some ajax code the image dialog shows a suggest list when typing an image search term, see screen shots. Mafs 16:13, 16 July 2006 (UTC)
 * some code improvements ... Mafs 20:25, 17 July 2006 (UTC)
 * new version of FCKeditor.php: case insensitive search, "return true" added to hook functions Mafs 17:15, 28 July 2006 (UTC)
 * removed $wgAjaxExportList = array( 'wfSajaxSearch' ); from the LocalSettings.php section. Mafs 21:41, 1 August 2006 (UTC)
 * function wfFCKeditorBypassParserPaste rearranged to fix problem. Mafs 20:46, 3 August 2006 (UTC)
 * The pages containing the code have been reverted (see history) Mafs 16:36, 30 August 2006 (UTC)

Restrictions, bugs

 * The text is stored as HTML in the database.
 * Removal of unwanted, hidden text properties can be a hard job in some cases.
 * Using Netscape 7.1 browser, you cannot use the "browser page-back" navigation function beyond a page, where the WYSIWYG editor was invoked for page editing.
 * Paste function (pasting clipboard content) seems to be prohibited - at least when using Netscape 7.1 browser.
 * "Show preview" function does not work properly.
 * Templates will work if they do only contain wiki syntax.
 * Special pages cannot be included.

Tested on

 * Mediawiki version: 1.7.1
 * FCKeditor version: 2.3
 * Browser:
 * Firefox 1.5.0.4
 * IE
 * Firefox 2.0

Quick overview

 * 1) Install FCKeditor
 * 2) Put FCKeditor.php in extensions directory
 * 3) Adapt LocalSettings.php
 * 4) Adapt fckconfig.js (set FCKConfig.mwScriptPath)
 * 5) Replace fck_image.js
 * 6) Replace fck_image.html

Installing FCKeditor

 * 1) Get the FCKeditor from http://www.fckeditor.net
 * 2) Put the package into the subdirectory /FCKeditor of your mediawiki installation.
 * 3) Replace the content of the file /FCKeditor/editor/dialog/fck_image.html by the content of this page FCKeditor/fck_image_html.  Please follow the "Copy-How-To" on top of the page. 
 * 4) Replace the content of the file /FCKeditor/editor/dialog/fck_image/fck_image.js by the content of this page FCKeditor/fck_image_js.
 * 5) Add this section at the end of the file /FCKeditor/fckconfig.js:

// ******************************************************************************************

// section modified image dialog

FCKConfig.LinkDlgHideTarget	= true ; FCKConfig.LinkDlgHideAdvanced	= true ; FCKConfig.ImageDlgHideLink	= true ; FCKConfig.ImageDlgHideAdvanced	= true ; FCKConfig.FlashDlgHideAdvanced	= true ;

FCKConfig.LinkBrowser 	= false ; FCKConfig.ImageBrowser 	= false ; FCKConfig.FlashBrowser 	= false ; FCKConfig.LinkUpload 	= false ; FCKConfig.ImageUpload 	= false ; FCKConfig.FlashUpload 	= false ;

FCKConfig.mwScriptPath = "";    // When using the modified image dialog // you must set this variable. It must correspond to // $wgScriptPath in LocalSettings.php.

// end section modified image dialog

FCKConfig.ToolbarSets["Wiki"] = [ ['Source','-','Save','NewPage','-'], ['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','Table','Rule','Smiley','SpecialChar','PageBreak','UniversalKey'], ['Style','FontFormat','FontName','FontSize'], ['TextColor','BGColor'], ['FitWindow','-','About'] ] ;


 * You must explicitly specify FCKConfig.mwScriptPath which must correspond to $wgScriptPath in LocalSettings.php.


 * (The FCKeditor has its own built in file and upload browser which can be used as an alternative to the mediawiki upload function. If you want to use it do not replace the files fck_image.html and fck_image.js and do not add the "section modified image dialog" in fckconfig.js. For enabling the FCKeditor's built in file browser and upload function see FCKeditor Developer's Guide at the bottom of the page. Note that you completely bypass all security checks of the mediawiki software for uploaded files when using this feature.)

Finally check your FCKeditor installation:
 * 1) browse to www.yourserver.org/yourwikidir/FCKeditor/_samples/default.html.
 * 2) You should see something like:



Should you encounter troubles, consult the FCKeditor help pages.

Extension FCKeditor.php
Put the extension code which can be found on this page Extension: FCKeditor/extension as FCKeditor.php into the extensions directory of your mediawiki installation. ''' Please follow the "Copy-How-To" on top of the page. '''

LocalSettings.php
Add these lines at the end of file LocalSettings.php (before the final ).

/* Installing this extension may lead to security and technical problems * as well as data corruption. */ require_once("extensions/FCKeditor.php");

$wgFCKUseEditor         = false;      // When set to 'true' the FCKeditor is the default editor. $wgFCKEditorDir         = "FCKeditor"; $wgFCKEditorToken       = "__USE_EDITOR__"; $wgFCKEditorToolbarSet  = "Wiki"; $wgFCKEditorHeight      = "600"; $wgFCKEditorAllow_a_tags     = true; //     : Set this to true if you want to use the **external** link // generator of the FCKeditor. $wgFCKEditorAllow_img_tags   = true; //    : Set this to true if you want to use the // file browser and/or the smilies of the FCKeditor. $wgFCKexcludedNamespaces = array(8,1,-1);   // eg. "8" for disabling the editor within the MediaWiki namespace.

/** * Enable use of AJAX features. */ $wgUseAjax = true; $wgAjaxExportList[] = 'wfSajaxSearchImageFCKeditor';

Read the security warnings: By default FCKeditor is set to 'false' as a default editor. To make FCKeditor the default editor change 'false' to true to look like this in your LocalSettings.php file: $wgFCKUseEditor         = true;      // When set to 'true' the FCKeditor is the default editor

Wikimania 2006

 * Why WYSIWIKI?: Lowering the Barriers to Wiki Use in Heterogeneous User Environments
 * WYSIWIKI - Questioning WISIWIG in the Internet Age
 * Bringing WikiWYG to MediaWiki
 * WYSIWYW
 * Hacking Days schedule

Tutorials and Hints

 * http://wiki.fckeditor.net
 * http://esco.uni-klu.ac.at/index.php/Help:Integration_of_the_FCKeditor

Demonstrations-Wikis

 * FCkEditor-Demo-Sandbox (outdated) - FCK based on mediwiki 1.5beta3. Requires user-login.
 * FCKEditor-Sandbox

Related WYSIWYG-Projects and FCK-Mods

 * MediaWiki+FCKeditor - The official integration from the FCKeditor team.
 * m:FCKeditor and HTML::WikiConverter - An implementation that stores data as wikitext instead of html.
 * wclEditor - An implementation that also stores data as wikitext instead of html but also supports run-time switching between wikitext and visual editing without reloading a page. Beta version.
 * WYSIWYM editor
 * 1125 and 5398
 * http://c2.com/cgi/wiki?WysiwygWiki
 * WikiWyg.net-Project with Demo-Sandbox
 * - wikiWYG.net (differs from Wikiwyg.net) with Demo-Sandbox

Unsorted

 * http://fckeditor.wikiwikiweb.de/FCKeditor
 * http://developer.berlios.de/projects/enotifwiki mediawiki 1.5.6 plus FCKeditor software package
 * http://www.parand.com/say/index.php/2005/06/27/fckeditor-as-wiki-editor/#comments