Forum OpenACS Q&A: Still having problems configuring ckeditor for Xowiki.

I was unable to obtain ckeditor using cvs as follows:

cvs co openacs-4/packages/xowiki/www/resources/ckeditor

I therefore downloaded the earlier version 3.6.5 from, since I realise now that my earlier failed
attempt was with version 4 which has substantially changes dependencies, just as Gustaf mentioned.

I have checked all the paths and they seem to be fine now, and the integration code seems to be doing its thing since
the parameters in my form spec do appear in the page header.  However ckeditor does not start (in fact the 
textarea field to which it should be added does not appear at all).

The error I get is :

SCRIPT5007: Unable to get value of the property 'icons': object is null or undefined 
ckeditor.js, line 180 character 249

I have tried to work out why this is happening, but am a little out of my depth.

The most obvious absent resource is the one referenced in the document ready function.  I have no directory called /xowiki/ckeditor-images/

Where and how would I obtain this?

Here is the resulting header:


<html lang="en">
    <title>xowiki - Airfield Entry Form (1362)</title>

    <meta name="language" content="en">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="generator" content="OpenACS version 5.7.0">
    <link rel="stylesheet" href="/resources/acs-templating/lists.css" type="text/css" media="all">
    <link rel="stylesheet" href="/resources/acs-templating/forms.css" type="text/css" media="all">
    <link rel="stylesheet" href="/resources/openacs-default-theme/styles/default-master.css" type="text/css" media="all">
   <script type="text/javascript" src="/resources/acs-subsite/core.js"></script>

  <link rel="stylesheet" type="text/css" href="/resources/xowiki/xowiki.css" media="all" >
  <link type='text/css' rel='stylesheet' href='/resources/xowiki/jquery-ui-1.8.17.custom.css' media='all' >
<link type='text/css' rel='stylesheet' href='/resources/ajaxhelper/yui/fonts/fonts-min.css' media='all' >
<script src='/resources/xowiki/jquery/jquery.min.js' type='text/javascript'></script>
<script src='/resources/xowiki/ckeditor/ckeditor.js' type='text/javascript'></script>
<script src='/resources/xowiki/ckeditor/adapters/jquery.js' type='text/javascript'></script>
<script src='/resources/xowiki/jquery-ui-1.8.17.custom.min.js' type='text/javascript'></script>
<script src='/resources/xowiki/get-http-object.js' type='text/javascript'></script>

<script type='text/javascript' >
      function xowiki_image_callback(editor) {
    $(editor.element.$.form).submit(function(e) {
      function calc_image_tags_to_wiki_image_links (form) {
    var calc = function() {
      var wiki_link = $(this).attr('alt');
    $(form).find('iframe').each(function() {
    $(form).find('textarea.ckeip').each(function() {
      var contents = $('<div>'+this.value+'</div>');
      this.value = contents.html();
    return true;
      function calc_wiki_image_links_to_image_tags (data) {
    var pathname = window.location.pathname;
    pathname = pathname.substr(pathname.lastIndexOf("/")+1,pathname.length)
    console.log('pathname' + pathname);
    pathname = pathname.replace(/:/ig,"%3a");
    var regex_wikilink = new RegExp('(\\[\\[./image:)(.*?)(\\]\\])', 'g');
    data = data.replace(regex_wikilink,'<img src="'+pathname+'/$2"  alt="./image:$2" type="wikilink"  />');
    console.log('data' + data);
    return data

      $(document).ready(function() {
        $( '#F1362af_descent' ).ckeditor(function() { /* callback code */ }, {
    toolbar : 'Page',
    uiColor: '',
    language: 'en',
    skin: 'Office2003',
    startupMode: 'wysiwyg',
    parent_id: '1363',
    package_url: '/wikirim/',
    extraPlugins: 'xowikiimage,_description:omit,_page_order:omit',
    contentsCss: '/resources/xowiki/ck_contents.css',
    imageSelectorDialog: '/xowiki/ckeditor-images/',
    ready_callback: 'xowiki_image_callback(e.editor);',
    customConfig: '../ck_config.js'
            CKEDITOR.instances['F1362af_descent'].on('instanceReady',function(e) {xowiki_image_callback(e.editor);});

  <script type="text/javascript">
function get_popular_tags(popular_tags_link, prefix) {
  var http = getHttpObject();'GET', popular_tags_link, true);
  http.onreadystatechange = function() {
    if (http.readyState == 4) {
      if (http.status != 200) {
    alert('Something wrong in HTTP request, status code = ' + http.status);
      } else {
       var e = document.getElementById(prefix + '-popular_tags');
       e.innerHTML = http.responseText; = 'block';

Aha!  Success at last! :-)

The problem in the end was twofold:

1)  specifying 'extraPlugins=xowikiimage' causes ckeditor to fail because I do not have the OpenACS image uploader code for ckeditor, and without a means of browsing the CVS repository, I have not been able to obtain it from CVS.

2)  I had mis-understood Gustaf's post here:

  form {<form>@foo@</form>}
  text {@foo@}
  form_constraints {
    _description:omit _page_order:omit

....that '_description:omit _page_order:omit' were to be added to the plugins space delimited.  I now see that this is a programmatic form spec and these are directives to omit these default CR fields from the xowiki.Form when new instances are being created for filling in.  Should have seen that sooner.

So the only remaining issue is trying to get the xowikiimage plugin code.

I think version 4 of ckeditor would be good to have so I will play with trying to get that working too.


Finally, I think I've found the trouble!

Firstly, I found where the image uploader was hiding:

cvs co openacs-4/packages/xowiki/www/ckeditor-images/

But once downloaded, it still didn't work.

Turns out the reason is that the path that is passed into the xowiki.Formpage is imageSelectorDialog: '/xowiki/ckeditor-images/',

However, I have put this instance of xowiki onto a url called something else. This means that this path should be '/somethingelse/ckeditor-images'.

in form-field-procs.tcl in the render_input method of richtext::ckeditor, this path is generated by:

[my imageSelectorDialog]

Tomorrow I will track down where this property is set and will try to change it to use the current url for the package instance instead of assuming /xowiki/.


So I found I can pass in the path like this:



even though the path is now correct, and there are now no script errors in the browser, the editor doesn't load. I guess I must still be missing some aspect of the image uploader code.




Finally. Fresh eyes in the morning!

xowikiimage code was missing from the ckeditor plugins directory. This because I had not downloaded from cvs.

I have tried version 3.5.2 (which is the one committed to cvs) and also version 3.6.2. Both load fine, but there is still a problem with the image uploader. This error is thrown whenever the cancel button is clicked:

SCRIPT5009: 'xowiki_image_dialog' is undefined
1449?m=edit, line 1 character 1

in IE and

ReferenceError: xowiki_image_dialog is not defined
Line 2

in Firefox.



This would appear to be that the object is called:


but that reference in cancel button is to:


...but where oh where is that set?




in the onclick method of the close button.

Ok. So now I have a better understanding, maybe I should try to get the newest version (4) to work.


Finally, there was a problem with the icon for the xowikiimage plugin.

To get the icon to display you have to add a 15 x 16 pixel icon (i.e. xowikiimage.png).  The path specified in the xowikiimages plugin is not consistent with the ckeditor standard.

To be standard, add an 'images' directory under plugins/xowikiimages/ and place the gif in there.

Edit plugins/xowikiimages/plugin.js to include the icon declaration in the editor.ui.addButton function:

editor.ui.addButton( 'xowikiImage',
    label: editor.lang.xowikiImage['insertImage'],
    command: pluginName,
    icon: this.path + 'images/xowikiimage.png'
} );

The problem was that "icon: this.path + 'images/xowikiimage.png'" this was incorrectly located in the CKEDITOR.plugins.add function instead.


Having seen a working v3.6.5, I thought I'd have a go at adapting the integration for CKeditor version 4.

On first impression the new version seems to have substantially streamlined the process of activating the editor, and dramatically reducing the number of files and components that have to be loaded. It seems to be substantially optimised. Along the way they have changed the calling method names, and have changed the way options are passed to each instance of the editor.

I was making good progress in stripping out what I thought was no longer needed from form-field-procs.tcl, and I had the main CKEDITOR.replace('$ID') { $options }; going just fine, until I received an object undefined error right in the middle of a huge block of compressed javascript in the middle of ckeditor.js. At that point I realised I was in way over my head! How on earth do you debug an error like that!?

I'd happily put some time into doing this, but I think I'd need someone to walk me through the existing integration since there are still some bits that I am a little foggy about.


I was unable to obtain ckeditor using cvs as follows:
cvs co openacs-4/packages/xowiki/www/resources/ckeditor

Just now, i was trying ckeditor on a fresh installation of OpenACS head with the contained xowiki version. If you have an xowiki version from cvs head, there is no need for an additional checkout, just "cvs update -d" is sufficient. The image selector is not finished (e.g. icon, message keys, etc.), but it is not essential either.

I have not yet looked into newer version of ckedit.


I have already created the icon for my installation from an open source icon library, and will be doing the message keys shortly.

If you would like I can provide them, though I would have to refresh my memory on my CVS login details and permission.