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

3: Re: Still having problems configuring ckeditor for Xowiki. (response to 2)

Posted by Richard Hamilton on 11/30/12 02:23 AM

Finally, I think I've found the trouble!

Firstly, I found where the image uploader was hiding:

cvs -d:pserver:mailto:anonymous@cvs.openacs.org:/cvsroot 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/.

4: Re: Still having problems configuring ckeditor for Xowiki. (response to 3)

Posted by Richard Hamilton on 11/30/12 02:31 AM

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

{af_descent:optional,richtext,width=80%,editor=ckeditor,inplace=false,toolbar=Page,extraPlugins=xowikiimage,imageSelectorDialog=/wikirim/ckeditor-images/}

....BUT,

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.

Ho-hum!

:-|

5: Re: Still having problems configuring ckeditor for Xowiki. (response to 4)

Posted by Richard Hamilton on 11/30/12 09:02 AM

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
https://63.246.8.12:8441/wikirim/1449?m=edit/event/seq/1/onclick
Line 2

in Firefox.

Hmmm.

6: Re: Still having problems configuring ckeditor for Xowiki. (response to 5)

Posted by Richard Hamilton on 11/30/12 09:06 AM

This would appear to be that the object is called:

xowikiimage_dialog

but that reference in cancel button is to:

xowiki_image_dialog

...but where oh where is that set?

7: Re: Still having problems configuring ckeditor for Xowiki. (response to 6)

Posted by Richard Hamilton on 11/30/12 09:11 AM

BINGO!

./ckeditor_images/index.adp

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.

8: Re: Still having problems configuring ckeditor for Xowiki. (response to 7)

Posted by Richard Hamilton on 11/30/12 11:56 AM

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.

Regards
Richard

9: Re: Still having problems configuring ckeditor for Xowiki. (response to 8)

Posted by Richard Hamilton on 12/01/12 12:57 AM

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.

Regards
Richard