Implementing CKEditor

[yellowled]

Hey,

as far as I can see, we currently offer FCKeditor, TinyMCE and Xinha as WYSIWYG editors, the latter being the default in recent s9y versions. I just stumbled upon CKEditor, which apprently is a fork/the designated successor of FCKeditor.

It's looking really good, so I think we should have it as a plugin, if it isn't too much of a hassle.

(Actually, I think we might even want to consider making it the default WYSIWYG editor after a testing period, given the amount of issues we have seen with Xinha lately ...)

YL

[garvinhicking]

Hi!

Which issues with Xinha? I thought it were working great, especially considering the cool hooks it offers to integrate.

Making CKEditor a default editor is not likely, because all plugins would need updating to reflect the API of it. FCKeditor hat a gruesome API to hook into, I haven't yet checked on how CKEditor does it.

Honestly, I'm sick of ever increasing WYSIWYG editors. Xinha and TinyMCE are working well for me.

Does CKEditor have a unique feature that is worth implemeting?

Regards,
Garvin

[yellowled]

Which issues with Xinha?

I remember lots of posts, especially in the German forum, from users having problems with it, especially (of course) in combination with NL2BR. Other than feedback here, I'm not really in a position to judge this. I haven't used any WYSIWYG editor in s9y in years.

FCKeditor hat a gruesome API to hook into, I haven't yet checked on how CKEditor does it.

Okay, I have no idea about that, either.

Does CKEditor have a unique feature that is worth implemeting?

Well, this is not exactly a "popular" feature, but hear it's very good in terms of accessibility (from someone who's actually blind). Plus, it looks cool.

YL

[garvinhicking]

Hi!

nl2br is a problem with every WYSIWYG editor, so this issue exists with Xinha, TinyMCE, FCKEditor, CKEditor and all others that use <p> to wrap their paragraphs (which is in fact the right way to do in a WYSIWYG of course).

Accessibility is an interesting thin inside a WYSIWYG editor. I though you couldn't use those properly at all. Do you maybe know specifics as to what it supports that other WYSIWYG editors don't?

Regards,
Garvin

[Don Chambers]

I took a QUICK look at it too... as YL states, it LOOKS cool, but like him, I also do not use a wysiwyg editor.

I also agree about nl2br - that plugin simply cannot be used with wysiwyg editors. However, the accessibility issue sounds interesting. YL - did you ask Robert for his opinion on it?

[yellowled]

I actually have a „better“ source on accessibility - an actually blind user who originally made me aware of CKEditor. I already contacted him about a more detailed explanation.

YL

[yellowled]

I already contacted him about a more detailed explanation.

Translated quote by Marco Zehe:

Yes, CKEditor is really great. For starters, the elements in the menu bar are quite easily operated. Plus, the output generated by the editor is sort of recognized as WYSIWYG in a screenreader. That means if I insert a link, it's instantly visible as a link in the editor, a heading is marked up as a h1 etc.

YL

[Don Chambers]

Which issues with Xinha? I thought it were working great, especially considering the cool hooks it offers to integrate.

What cool hooks? Can it solve that issue Judebert was having trying to get a custom button into the editor?

[garvinhicking]

Hi!

What cool hooks? Can it solve that issue Judebert was having trying to get a custom button into the editor?

Does he have a problem? I believe plugins like linktrimmer already create buttons quite easily, and xinha has this custom template-based WYSIWYG editor configuration tool, this is documented in the NEWS file at some place...

Regards,
Garvin

[Don Chambers]

Judebert was working on something a long time ago and ran into some problem adding a button to different editors. I do not recall what the exact problem was. I will have to search for it.

[Timbalu]

What cool hooks? Can it solve that issue Judebert was having trying to get a custom button into the editor?

Does he have a problem? I believe plugins like linktrimmer already create buttons quite easily, and xinha has this custom template-based WYSIWYG editor configuration tool, this is documented in the NEWS file at some place...

Garvin, or anybody else, do you remember, if linktrimmer and amazonchooser (are there more?) button hook-in's ever worked using the FCKeditor Plugin? Was this ever checked?

I am trying to get this to work with the CKEditor Plugin before release, but the serendipity_emit_htmlarea_code() function never gets accessed (..properly..).

I tested with amazonchooser, which emits the $eventData button array properly in staticpages, but not in the main entry form, which simply only carries the body and extended field names. I would try to work around the use of serendipity_emit_htmlarea_code() taking eventData to be hooked somehow into the toolbar of the new editor Plugin, but I need to know if there is a serendipity solution somewhere already, which worked with the old Plugin and why this eventData button array does not appear in/for the main entry forms.

[garvinhicking]

Hi!

Garvin, or anybody else, do you remember, if linktrimmer and amazonchooser (are there more?) button hook-in's ever worked using the FCKeditor Plugin? Was this ever checked?

Grischa once worked on this and I think at some point, they did support FCKEditor, yes. I personally never tried this on my own.

Are you trying this with master or 2.0?

Maybe you can grep all additional_plugins for the event hook that would emit those buttons...I think Grischa at one point added specific javascript into those plugins that supported FCKEditor. Sadly I cannot exactly remember which those were, or if I'm remembering something wrong.

[Timbalu]

I try with both branches...
Ok I will contact him about it.
The only thing I found regarding FCK is in cores js function serendipity_imageSelector_addToBody () and the FCKeditorAPI.GetInstance insert image in emoticonchooser... and the button event hooks in add. Plugins amazon and linktrimmer.

Its not easy to insert a custom button on the fly without using a plugin... (at least for me!).. so I have some more Problems to solve - though the standard toolbars work just easy in entry form and staticpages.

[Timbalu]

Is there a slick way to convert an $eventData...[img_url] img 'external_plugin' path eg.

Code: Select all

Array
(
    [init] => 
    [item] => nuggets
    [jsname] => nuggets
    [skip] => 1
    [buttons] => Array
        (
            [0] => Array
                (
                    [id] => amazonchoosernuggets
                    [name] => Amazon Medien
                    [javascript] => function() { window.open('http://domain/beta/git-s9y/plugin/amazonch?txtarea=nuggets', 'AmazonImageSel', 'width=800,height=600,toolbar=no,scrollbars=1,scrollbars,resize=1,resizable=1') }
                    [img_url] => http://domain/beta/git-s9y/plugin/amazongif
                    [toolbar] => other
                )

        )

)

in a javascript environment to show up as a real image http path, like:

Code: Select all

http://domain/beta/git-s9y/plugins/serendipity_event_amazonchooser/serendipity_event_amazonchooser.gif

?

Edit:
If I use a

Code: Select all

jQuery.ajax({ type: "GET",   
         url: 'http://domain/beta/git-s9y/plugin/amazongif',  ... "return data" 

to fetch the image, I do get an img as file_get_contents() raw data returned, which can't get used as ui.addButton( icon: returnedRawImageData, ....). This CKEDITOR API needs a real path url to truly work.

[Timbalu]

I did make some progress on this, since it would be nice to release this plugin as comfortable as possible before the soon 1.7 release, while we might need some small added tweaks to some additional and core plugins for this.

But I still have the problem that eventdata by amazonchooser is available in staticpage forms (see above), but not in entry forms (see below).

Code: Select all

Array
(
    [body] => serendipity[body]
    [extended] => serendipity[extended]
)

I have no idea why this happens, since the core htmlarea/xinha wysiwyg editor appears correct with the new amazon button build-in inside the normal entry forms, but the ckeditor only comes up with above textarea ID's array, without any further plugin eventData...; that is where I got stuck to implement eventData to CKEditor entry forms. (I can't imagine that amazons backend_entry_toolbar_body and backend_entry_toolbar_extended event hooks have something to do with it...)

Does anybody out there uses the old FCKEditor Plugin and could have a look if linktrimmer or amazonchooser Plugins are working in there, please?

Edit:
Now I know why eventData is not forwarded...

Code: Select all

                case 'backend_wysiwyg':
                    $eventData['skip'] = true;
                    if (preg_match('@^nugget@i', $eventData['item'])) {
                        $this->event_hook('backend_wysiwyg_finish', $bag, $eventData);
                    }
                    return true;
                    break;

Is/was there a special reason why textarea nuggets only get the eventData hook?