FCKEditor Integration

The Rich Text Editor used within LAMS is the FCKEditor.

LAMS 2.1 will be using FCKEditor 2.5.1. Next time the FCKEditor is upgraded within LAMS, please check these notes to see what changes need to be made.

File Locations

The FCKEditor directory structure is places in lams_central/web/fckeditor. We do not need to keep the _source directories as these are not needed at runtime, and removing them . You can also remove the other _blah files that are documentation about the FCKEditor. Leave the licence file in the package.

Customisations

The bulk of the customisations are specified in lams_central/web/includes/javascript/fckconfig_custom.js. This defines:

  • The two standard toolbars - authoring and learner
  • Sets the stylesheet to our standard stylesheets
  • Turns on the spellchecker in Firefox
  • Allows the browser context menu
  • Defaults any link targets to be a new window.
  • Points to templates in lams_www.

The code templates (available via the Template button on the toolbar) are stored in lams_www/web. The images for the templates are in lams_www/web.images. So when an upgrade is done any new templates should be added there and you need to add a note to the Database and Configuration Changes so that we can warn the users that the templates are changing. Why? The templates are in lams_www so that LAMS sites can add their own custom templates to the template file, which we will be overwriting in an upgrade.

There is a major customisation relating to where uploaded files are put. All uploaded files go into a directory in lams_www.war/secure. Each new learning design is assigned a new directory name, which is a very long number that should be unique across all systems. To support this, we have done our own versions of two servlets that manage the uploaded files - org.lamsfoundation.lams.web.LAMSConnectorServlet and org.lamsfoundation.lams.web.LAMSUploadServlet.

To make this work, you also have to modify lams_central/web/fckeditor/editor/filemanager/browser/default/browser.html. Change all references to oConnector.CurrentFolder from "/" to GetUrlParam( 'CurrentFolder' ). (See FishEye for a diff on how this was done in the past).

We have also written a number of tags to make using the FCKEditor (with all our customisations) easier. See:

Toolbar customisations

We have two custom toolbars - one for use in authoring and one in learner (used in Forum).

To make all the buttons on the toolbar work when using Greek, we've had to change the translation of Format from (Μορφή Γραμματοσειράς) to (Στυλ), so that all the buttons fit. This required a change to lams_central/web/fckeditor/editor/lang/el.js

Extensions and Plugins

The FCKEditor has a large number of plugins and extensions that can potentially work with LAMS. Some of them require a bit of tweaking to make them work with LAMS in a proper way.

As part of these plugins and given that we had interest in embedding sound and video in LAMS activity tools, we have added modified these plugins to work with LAMS:

Important Licensing Information
Due to licensing reasons, we cannot include these plugins directly in LAMS. Therefore we provide information on how to install them and use the within LAMS, but it is up to you to fulfill and follow the limitations of the licenses.
  • flvPLayer Plugin: it allows you to embed video and audio files in any LAMS activity.

Issues with the FCKeditor

Editor won't load - get an error or a plain text box but no toolbar

If the FCKeditor cannot be loaded for some reason then it will display the error: "The browser you are using doesn't support Rich Text Editor, Please use a supported browser" or it may just show up as a normal text box, without the usual FCKeditor toolbars.

The usual three culprits are:

  • The ServerURL is wrong (see Wrong URL).
  • FCKeditor doesn't recognise your browser. In LAMS 2.0.x, you could only use Internet Explorer or Firefox. In LAMS 2.1 you can use Safari and Opera as well. Other browsers may not work.
  • Some other javascript on the page has failed, stopping the FCKEditor stuff initialising. If neither of the first two apply, then have a look for other Javascript errors on the page and get them fixed.

Security error when uploading image to fckeditor

When trying to upload an image inside the fckeditor, a javascript popup says 'Security error. You probably don't have enough permissions to upload. Please check your server.' (e.g. thumbnail below)
 

It probably means your $JBOSS_HOME/server/default/deploy/lams.ear/lams-www.war/secure directory is not writable by the user that JBoss is running as or the EAR Directory on the Edit Configuration Settings screen is wrong. Check your EAR Directory settings and the the directory permissions. It would also be worth checking the repository, dump and temp directory settings on the Edit Configuration Settings screen, as well as checking that these directories are writable by the JBoss server.

Strange link behaviour with Safari

FCKeditor now has Safari support, which allows us to make Safari a supported browser for LAMS. However there are still a number of bugs with Safari support.

  • If you want to create a link using the link button, you must type in the link's name, highlight the text and then click the link button. If you just click the link button and enter a URL, it will not create the link. (FCKeditor Bug Report)

Word text paste warning only appears sometimes

If you paste text from Word into an FCKEditor, if you use IE then you get a warning "The text you want to paste seems to be copied from Word. Do you want to clean it before posting?". If you accept the prompt, it opens the Word paste dialogue window.

If you paste the same text into Firefox, the prompt does not appear. So when you use Firefox you have to remember to use the special Word paste button.

<!-[lams:xxxx]-> appears in text pasted from Word

The effect of pasting text from Word is different depending on whether you use Firefox or IE. If you are pasting text into the HTML Editor in Firefox from Word and the text is part of a list, you might get <!-[lams:if !supportLists]-> in the text. But it is only seen on the screen in IE (not in Firefox), so it probably won't be discovered till a learner goes in in IE. This was discovered while entering question text in the survey tool.

It has to do with differences between IE and Firefox - for a full explanation see https://bugs.lamsfoundation.org/browse/TP-6.

To avoid the problem:

  • If you want to paste into the FCKEditor from Word then do it into IE as it does a better job of cleaning up the horrible HTML that Word uses. Particularly if you are using any of the Word list formats (bullet points, numbered lists).
  • If you want to use Firefox then don't try to copy any lists (or parts of lists) from Word into the FCKEditor or if you do then after pasting from Word you should go to source, clear out any of the HTML that has come from Word and then use FCKEditor's buttons to reformat your text.

Previously Upload Image doesn't appear in FCKEditor

Fiona has encountered this problem occasionally in both Firefox and Safari but it can't be reproduced on other PCs. It was encountered with different servers, months apart.

When you want to insert an image into some text in the FCKEditor, you click on the image button and upload the image. That image is then available during the whole sequence. If you try to insert the image into another FCKEditor (in the same sequence), instead of uploading it again you click on the image button and select "Browse" to search on the server. Fiona found that sometimes when she selected an existing file, the height and width are calculated as zero, resulting in the image not being displayed on the page. The link to the image is in the html but with a height and width of 0, you can't actually see the picture!

Clicking on the circular arrow next to the lock resets the width and height to the correct values.

If you encounter this problem please email it to Fiona Malikoff or make an entry in JIRA so that we can track the issue.

Issues with FCKEditor translations

Greek

It seems that in some languages and given the size of the fckeditors that we have, some parts of the FCKEditor don't show properly

So Spyros Papadakis (from Open University Greece) has suggested to change the translation of the FontFormat label (in the el.js file) from Μορφή Γραμματοσειράς to Στυλ instead (see here). If we upgrade to other versions of FCKEditor, we should incorporate this change as shown here.

Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.