Author Topic: CKEditor for WebsiteBaker  (Read 104990 times)

Waldschwein

  • Guest
CKEditor for WebsiteBaker
« on: April 15, 2010, 02:56:45 PM »
Hello!

I just started to work on a new WYSIWYG editor for WebsiteBaker.

Why CKEditor?
FCKeditor (the standard one) is version 2, CKEditor is version 3, so the "next generation" of FCKeditor.


Can I use it as it is where I like?
- It is Release Candidate (RC) - so yes! Also on live-sites - but on your own risk.
- It is LGPL - so yes. With respecting the license (three-licenses, I have chosen LGPL for that module) of CKeditor.

What is included?
- CKEditor version 3.3.
- A filemanager you can upload and select files (thanks Stefek for styling).
- The use of editor.css and editor.styles.js in themes.
- WB plugins: WBDroplets and WBLink (thanks aldus)

What can I do with CKEditor?
- Use it on any WYSIWYG site just like TinyMCE or FCKeditor.
- Resizing with mouse.
- Much more... Just test it.

What is the benefit of CKEditor?
- It is full accessible.
- It is lightweight but has all (even more) options than FCKeditor.
- Quick, nice, easy.

Where can I get it?
AMASP: http://www.websitebakers.com/pages/admin/admin-tools/ckeditor.php
Git: http://github.com/Tenschert/ckeditor

Yours Michael
« Last Edit: June 01, 2010, 12:25:38 PM by Waldschwein »

Offline Stefek

  • Posts: 6177
  • Gender: Male
  • ("ړ)
Re: CKEditor for WebsiteBaker
« Reply #1 on: April 16, 2010, 12:13:53 AM »
This is good news, Michael.

What about Luisehahnes attempts?

Regards,
Stefek
"Gemeinsam schafft man mehr."

gemeinsam
1. mehreren Personen oder Dingen in gleicher Weise gehörend, eigen
2. in Gemeinschaft [unternommen, zu bewältigen]; zusammen, miteinander
#Duden

Waldschwein

  • Guest
Re: CKEditor for WebsiteBaker
« Reply #2 on: April 16, 2010, 12:22:02 AM »
Hello!

I am often in contact with Luisehahne, he has right now no time to go further with CKeditor because there are more "urgent" things to do. I haven't seen his module unfortunately yet, but it was based on CKEditor3.0, that is from developers view completly different to 3.1 (that introduces jQuery / PHP connectors). So I just tried a new one, that has only basic implementation, but you can use it and there should be no error.

Here is a screenshot that should let you know what is possible with CKeditor. I like e.g. the option to display all blocks, the quite good spellchecker and many other things.

Yours Michael

Edit2: Ok, I took an in-depth look at the plugin system of CKEditor. It's completely different to FCKeditor, we can't really reuse WBDroplets and WBModules. Well, the buttons are there (and yes, WBModules needs a new one), but that doesn't help anybody...


[gelöscht durch Administrator]
« Last Edit: April 16, 2010, 02:46:48 AM by Waldschwein »

Waldschwein

  • Guest
Re: CKEditor for WebsiteBaker
« Reply #3 on: April 16, 2010, 04:33:16 PM »
Hello!

Now the "frame" for WBDroplets and WBModules is correct, just it isn't working at all yet.
Also several small corrections. Next steps will be:

- Using editor.css from Templates
- Using backend-editor.css from Backend-Themes
- Providing an API for filebrowser ( I won't include any).
- "Perhaps": Making a ckeditor-admin Admin-Tool to customize CKEditor.

Yours Michael

Offline macsmet

  • Posts: 255
Re: CKEditor for WebsiteBaker
« Reply #4 on: April 16, 2010, 05:27:13 PM »
I just installed 0.1 and it looks good so far.
Keep up the good work!

Offline Xagone

  • Posts: 482
  • Gender: Male
  • Developper
    • Xagone Inc
Re: CKEditor for WebsiteBaker
« Reply #5 on: April 16, 2010, 05:39:53 PM »
great, on chrome, CKeditor is so fast...
so great work!

on my side i'd tring to do some "ajax" saving so each module dont reload the entire page... hehe
Xagone Inc. (formerly VotreEspace)
http://xagone.com/

Waldschwein

  • Guest
Re: CKEditor for WebsiteBaker
« Reply #6 on: April 16, 2010, 06:34:10 PM »
Well, Ajax saving would be an option (it's possible with jQuery, and CKEditor has an jQuery API) but I doubt the Developer like the idea, and WebsiteBaker backend is quite "Javascript / AJAX free". The problem with it would be, that the core should be rewritten - that errors also are being displayed, that there is some visual feedback when saving, etc.
To be honest, it would be a bit too much coding for me right now - I can just stutter JavaScript, not speak...

Yours Michael

Edit: Perhaps you will ask: "Why do you use Github and not the official SVN / Forum / AMASP"? Well, to be honest I don't like .zips here in the forum. They are mostly anywhere, and it's better having everything on a centralized place. On AMASP I don't have access, but I don't think it's a good place for downloading such really Alpha modules.
And I hope that more people will have a look at the module as you can read the Sourcecode right on the internet, you (and also I  :-D) have some control on what I change. And finally I am not in the Development team neither I have some "task" to do that module. I just do it because I think CKEditor is the best Editor out there, and FCKEditor is getting old.
I have chosen for that Github - it offers everything I need, and I have to work more accurate than coding somewhere where nobody can see anything.  :wink:
« Last Edit: April 16, 2010, 11:39:06 PM by Waldschwein »

mr-fan

  • Guest
Re: CKEditor for WebsiteBaker
« Reply #7 on: April 17, 2010, 12:33:45 PM »
.......
Quote
On AMASP I don't have access, but I don't think it's a good place for downloading such really Alpha modules.

.....have you ask to get access?
.....there are a lot of alpha modules....there are _all_ modules and there is a usefull place for upcomming stuff..... :wink:

this mod should be where until today 1800 people searched for it and know there is/was something:
http://www.websitebakers.com/pages/upcoming-items/under-construction/ckeditor.php

You could make a "extrawurst" or you get just more testing and interessted people to your project - or you think that this threat reaches all important users for this?

As a suggestion - just "link" your github page on the CKE AMASP Site - you could ask Dietmar for this - the CKEditor is too important to get lost in one little threat and your Mod should really get more attention!!

regards martin

Offline Luisehahne

  • WebsiteBaker Org e.V.
  • **
  • Posts: 4202
  • Gender: Male
    • Webdesign und Entwicklung WebsiteBaker
Re: CKEditor for WebsiteBaker
« Reply #8 on: April 17, 2010, 12:54:39 PM »
Hi,

I too think, that amasp ist a good place, Erpe can give you access and then my old file can be deleted.

Dietmar
Immer nur von der Zukunft reden, die Gegenwart vergessen und auf die Vergangenheit schimpfen
Neues Unwort: Schnappatmung

Waldschwein

  • Guest
Re: CKEditor for WebsiteBaker
« Reply #9 on: April 17, 2010, 03:17:53 PM »
Hello!

Ok thanks, with one of the next more working versions I'll ask for an AMASP site.

There's a new version available: http://github.com/Tenschert/ckeditor/downloads

The changes are:
- Reworking the whole config.js and remove it to a wb_ckeditor folder.
- An experimental inclusion for WB Mediabrowser. Upload is not working ( I guess it's hard to tell the WB media uploader from outside where to store the files...) but you can already browse the Media section. There's also no inserting in the URLs of CKEditor - but you can for the first move the file to URL (the Media section is a pop-up, click and move the mouse to the URL field back).

Next steps will be:
- Tell CKEditor to use the editor.css of the template (well, that should be easy now...)
- Get the WBDroplets / WBModules working.

Yours Michael

Offline Stefek

  • Posts: 6177
  • Gender: Male
  • ("ړ)
Re: CKEditor for WebsiteBaker
« Reply #10 on: April 17, 2010, 04:35:38 PM »
Michael,
first of all:
it's a good idea to use services like github!
User Thorn is using another service for several projects called "launchpad", which has a connection to bazaar.
I don't know the pro/cons which service to use, however, it's a great idea to have an overview of development of modules. I would love if there were more developers using this services.
With a link from AMASP to those services nothing gets lost.
And as I know many of those services are free of charge for open source projects!

Second:

As I see here:
http://github.com/Tenschert/ckeditor/tree/master/wb_config/
there are both files

  • contents.css // for backend editor area style
  • wb_ckstyles.xml  //for the styles drop-down

    Please do not consider to merge both files as it was the case in the fckEditor!
    This was a cause of many headaches in the forum and it was too buggy for use.
    It was used via the editor.css for both functions: the style (output) and the combo drop-down Style choose.
    It shouldn't, because you (the designer) in preparation of a comfortable editing area.

    The better way to handle this is to look first into the template:
    Code: [Select]
    if (file_exists ($editor_css_in_the_template)) {
    use this file
    }else {
    use the default file of the module
    }
    And the same for the ckstyles.xml
    And why not also for templates xml files?

    All this gives the designer/developer a free hand to style/develop a full functioning area for his customers (or just to fit his needs).

    Kind Regards,
    Stefek

"Gemeinsam schafft man mehr."

gemeinsam
1. mehreren Personen oder Dingen in gleicher Weise gehörend, eigen
2. in Gemeinschaft [unternommen, zu bewältigen]; zusammen, miteinander
#Duden

Waldschwein

  • Guest
Re: CKEditor for WebsiteBaker
« Reply #11 on: April 17, 2010, 05:22:11 PM »
Hello!

The primar choose for Github is because it's quite easy (much better than this overblown and often not correctly working TortoiseSVN), everybody can see what I do and it's perhaps better to take part.
Also VersionControl is quite good when doing something that wasn't good at all you have always a way-back.

The next one: There won't be any XML-styles in CKEditor (well, I don't integrate it, if anybody wants to do it...). It doesn't make sense. We can use .CSS or jQuery for that. CKEditor has nothing to do with FCKEditor, even TinyMCE is more like FCK than CK from developers view.  :wink:
The problem of XML-Styles: It is too much in my eyes. There is always confusion with customizing FCKeditor as it's now - there are too many different ways. And CKEditor has some really nice tools you can change quickly anything you need (not just the color). It's not possible in CKEditor to use the editor.css for both (styling textarea and CK itself).

Edit: Of course I mean "pure" JavaScript, not jQuery (but well, that CKEditor JS doesn't distinguish that much from jQuery...).
I will work out here a "good" solution - I just don't like the idea introducing a new language we don't need. CKEditor (and btw. WebsiteBaker in many cases) needs: HTML, CSS, PHP. And more and more Javascript - of course CKEditor uses JavaScript very much. But not really XML. I want to rely on the CKEditor API as much as possible - I don't want to introduce new / independent solutions where we can use API - both from WB and CK...
Ah, ok, I just copied here some FCKEditor files to wb_config folder and haven't reworked them... That shouldn't be there...

Yours Michael
« Last Edit: April 17, 2010, 07:35:16 PM by Waldschwein »

Offline Stefek

  • Posts: 6177
  • Gender: Male
  • ("ړ)
Re: CKEditor for WebsiteBaker
« Reply #12 on: April 17, 2010, 08:22:17 PM »
It's not possible in CKEditor to use the editor.css for both (styling textarea and CK itself).
Very good.
Original FCKeditor never was supposed to work in this way either.


Ah, ok, I just copied here some FCKEditor files to wb_config folder and haven't reworked them... That shouldn't be there...

I see. This confused me.
I will have a look at the CKE docu.

Good work, Michael.

Regards,
Stefek
"Gemeinsam schafft man mehr."

gemeinsam
1. mehreren Personen oder Dingen in gleicher Weise gehörend, eigen
2. in Gemeinschaft [unternommen, zu bewältigen]; zusammen, miteinander
#Duden

Offline Stefek

  • Posts: 6177
  • Gender: Male
  • ("ړ)
Re: CKEditor for WebsiteBaker
« Reply #13 on: April 17, 2010, 09:36:49 PM »
Just had a look at the documentation.

The use of XML is away and in CKE you can use simple js syntax to define the ComboBox.

Code: (wb_ckconfig.js) [Select]
   
    /**
     * stylesComboBox -------------------------------------->
     */
    config.stylesCombo_stylesSet = 'my_styles';
    CKEDITOR.addStylesSet( 'my_styles',
[
    // Block Styles
    { name : 'Blue Title',
    element : 'h2',
    styles : { 'color' : 'Blue' }
    },
    { name : 'Red Title' ,
    element : 'h3',
    styles : { 'color' : 'Red' }
    },

    // Inline Styles
    { name : 'CSS Style',
    element : 'span',
    attributes : { 'class' : 'my_style' }
    },

]);
/*
/<--------------------------------------------------
*/
Of course this definitions can be put in a separate file.
More here:
http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Styles



I wonder how to achieve, with js, to look for "if file exists", so one could put this definitions into the template (the same as the editor.css) and exectute this file if exist or the default if it doesn't.

Any hint in this direction is
w e l c o m e.

Regards,
Stefek
"Gemeinsam schafft man mehr."

gemeinsam
1. mehreren Personen oder Dingen in gleicher Weise gehörend, eigen
2. in Gemeinschaft [unternommen, zu bewältigen]; zusammen, miteinander
#Duden

Waldschwein

  • Guest
Re: CKEditor for WebsiteBaker
« Reply #14 on: April 17, 2010, 09:56:10 PM »
Hello!

It doesn't matter for PHP if it's a .js, .css or any other file extension.  :wink:
Unless, JavaScript is much more powerful than many think - nearly as powerful as PHP.

I just would need some hints on that Mediabrowser integration... Somehow CKEditor docs are quite crappy, even they look good at the first glance.

Yours Michael

Offline Stefek

  • Posts: 6177
  • Gender: Male
  • ("ړ)
Re: CKEditor for WebsiteBaker
« Reply #15 on: April 17, 2010, 10:44:07 PM »

It doesn't matter for PHP if it's a .js, .css or any other file extension.  :wink:

You didn't get the point, did you?

The styles combo has to be customizable without touching the source files of the module.
The above post and code is the first step to achieve this.

Do you have another approach?
"Gemeinsam schafft man mehr."

gemeinsam
1. mehreren Personen oder Dingen in gleicher Weise gehörend, eigen
2. in Gemeinschaft [unternommen, zu bewältigen]; zusammen, miteinander
#Duden

Waldschwein

  • Guest
Re: CKEditor for WebsiteBaker
« Reply #16 on: April 17, 2010, 10:59:30 PM »
Do you have another approach?

Ok, I want to do several things - unfortunately yet nothing is working, but I will get there.

1.) The default: It's in /wb_config. Everything for default is in there.
2.) The custom: It's in the templates. Every frontend-template can have a "editor.css" like yet. For frontend-templates only the output is valid. Every backend-template can have a "editor.styles.js".
CKEDITOR.addStylesS et( 'argos1',    { name : 'Blue Title' , element : 'h3', styles : { 'color' : 'Blue' } }, ]); just, something like that.
3.) The GUI: We create an admin-tool called "CKEditoradmin" (unfortunately WYSIWYG-editors can't install itself there) where you can customize that all, just with "visual" feedback.

It takes some time to get there - probably several weeks or even months.

Edit: Nobody should touch the config.js unless he knows what to do. I just don't like telling people "use your FTP programm, download file XYZ, then open it in your favourite browser... and so on". That is not easy. Unless there is no real solution for this "frickeln" the module stays Alpha.
PS: You can customize CKEditor you like. The API is very powerful. If you want to customize it - just write anything to the config.js you need (or to any config-file you need, just read the API http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html ).
But you are somebody that "knows" what he does - but (F)CKEditor probably 98% of the user don't know by name, and 95% don't know they can customize it. Other CMSes have way better solutions, and - with my little knowledge - I want to get there. It just takes time I'm afraid.  :wink:
And: "Something little for the begin does" is not true, because FCKEditor works quite well and is really nothing small, it is quite huge. But it should stay in the WB Core as long as there is no better solution.

Yours Michael
« Last Edit: April 17, 2010, 11:11:42 PM by Waldschwein »

Waldschwein

  • Guest
Re: CKEditor for WebsiteBaker
« Reply #17 on: April 18, 2010, 12:18:57 PM »
Wouldn´t it make more sense to create a CKEditor "Admin Plugin" which allows to change CKEditor settings without the need of installing another WB Admin tool? This way one can create a WB CKEditor standalone module.
Well, it doesn't make sense for me to use a WYSIWYG module as admin-tool, because then we don't really need that type of module in WB.
If we make the CKEditor module both customizable via Admin-Tools (or anywhere else) and it should contain the CKEditor, we need to modify the WYSIWYG module.
I had the idea having a CKEditor module that only contains the editor just as FCK / TinyMCE / XINHA and so on. And a kind of API, that loads JS-files created by the CKEditorAdmin - a bit like presets.
Yes, using a CKEditor Plugin could be a solution, but I don't like the idea of changing a module you are using when you change it. It is possible - without doubt - but if there is need somebody can create it, I don't want to do that.

Yours Michael

Offline Stefek

  • Posts: 6177
  • Gender: Male
  • ("ړ)
Re: CKEditor for WebsiteBaker
« Reply #18 on: April 18, 2010, 01:01:25 PM »
Thanks for the hint, Christian.

I think both ways (out from CKE or CKE-Admin) are good ideas if they work.
It doesn't matter to me if I change those Settings via a tool or from within the WYSIWYG Editor itself.

But I do care to be able to configure those setting in a easy way.
It could be for me also from within the template.

I wonder, Michael, why you think the styles combo should be inside the backend-theme.
It's not comfortable enough.
The styles combo could be also put in the (frontend) Template.
I will have a look at the API.

But I am afraid, that a more experienced coder will be needed in charge.


Regards,
Stefek

"Gemeinsam schafft man mehr."

gemeinsam
1. mehreren Personen oder Dingen in gleicher Weise gehörend, eigen
2. in Gemeinschaft [unternommen, zu bewältigen]; zusammen, miteinander
#Duden

Waldschwein

  • Guest
Re: CKEditor for WebsiteBaker
« Reply #19 on: April 18, 2010, 01:23:34 PM »
I wonder, Michael, why you think the styles combo should be inside the backend-theme.
It's not comfortable enough.
Well, everything is more comfortable then it's yet in FCK (from my point of view). But to be honest I haven't cared too much about the details here yet, jsut about the "rough" ideas.
But: I don't want to speak too much about it, I will do what I can and think it's the best, if anybody has other ideas- just do it. Too much discussion leads to motivation=0.

Yours Michael


Offline Stefek

  • Posts: 6177
  • Gender: Male
  • ("ړ)
Re: CKEditor for WebsiteBaker
« Reply #20 on: April 18, 2010, 01:26:58 PM »
But we can bring our ideas together.

As I see you need help with some stuff (above).

No need to play the Lone Some One.

;-)

Stefek
"Gemeinsam schafft man mehr."

gemeinsam
1. mehreren Personen oder Dingen in gleicher Weise gehörend, eigen
2. in Gemeinschaft [unternommen, zu bewältigen]; zusammen, miteinander
#Duden

Waldschwein

  • Guest
Re: CKEditor for WebsiteBaker
« Reply #21 on: April 18, 2010, 09:13:01 PM »
The problem is, that there are many ways to implement CKEditor, what to implement and so on.
On the one side it's just a colourful textfield with some features for people that don't understand HTML and CSS.
On the other hand it is for many people a must-have, so the decision is always: We should have a WYSIWYG editor in WB Core. But - that one is right now just a module.
Of course we can bring ideas together - but in the end I want something, that should be robust, easy and "open". Not for bugs and hackers, but for using it the way anybody wants.
I need help, but I doubt there is anybody that can help me - Luisehahne needed some help 8 months ago and nobody helped him, so I don't think somebody will help me. In fact it's also the problem, that I am right now not in the position to ask for help - first I need to know what is not working. And it wouldn't make sense to ask for help when changing many things two weeks later.
 
Yours Michael

Waldschwein

  • Guest
Re: CKEditor for WebsiteBaker
« Reply #22 on: April 19, 2010, 10:44:25 AM »
Just to give a small example why it takes some time, knowledge and so on:
Right now we have two "WB only" modules in FCKEditor, the droplets and the link selector.
Both are the same, just with another icon / table / HTML output, but in core the very same.
Somebody thought it's a good idea to insert them into TinyMCE - where they don't work, but display (just like in the yet CKEditor), so in fact my "buggy" CKEditor is as finished as TinyMCE - because anybody can use e.g. CKFinder http://ckfinder.com/. So it's as good working as such modules.

But - nobody thought, that the code of this Plugins is not really making sense.
Have a look - they make use of the plugin.js as any other. To initalize it, and make it appear in CKEditor. So far, so good.
But then everything "collapses" - because the plugins use their very own way of coding.
There's the "dialog".js (called like fck_wbdroplets.js in FCK), that initalizes the plugin itself. But it just opens a .php, which opens a .htt (which is part of the backend theme, what doesn't make sense at all), where the JavaScript is coded, that needs to be in "dialog".js. Ah yes, and the .htt inserts the fck_wbdroplets.js as script.
 :?  :?  :?
So if we really want to make use of the modules as they are, we need to put that much time into throwing everything out what is just useless, we can programm that module from core as it should be.
Then we can also make use of nice CKEditor things - like defining how WBlink should be opened, and so on. We don't need, but we can.
The only good CKEditor plugin I have seen so far is the Drupal - Joomla is crap, and modx is... Well, I don't want to speak of that. But the drupal one is quite huge, and quite different from codings I have seen before...

So, there is need of recoding, or better: New coding. Not because "new is always better and old is always crap", but because it just won't work.
But that would take time. Dietmar has waited now more than half a year for help, so one or two months more or less won't hurt anybody.

Yours Michael
« Last Edit: April 19, 2010, 10:49:45 AM by Waldschwein »

Waldschwein

  • Guest
Re: CKEditor for WebsiteBaker
« Reply #23 on: April 19, 2010, 01:48:57 PM »
Hello!

Latest change in Version 0.1.2.2 might be interesting:
http://github.com/Tenschert/ckeditor/downloads

Now CKEditor supports (like FCKEditor) the editor.css in templatefile.
In:
wb/templates/_yourtemplate_/editor.css
And:
wb/templates/_yourtemplate_/css/editor.css

Several Templates make use of css-folder (e.g. when using several CSSes for cross-browser support, print and so on) such a folder makes sense, even if it's not part of the template guidelines. So the editor.css can also be placed there.

Yours Michael

Edit: New toolbars and removing of WBModules as a plugin of it's own - we will implement this feature inside the CKEditor link.
Just look at the Screenshot.
 

[gelöscht durch Administrator]
« Last Edit: April 19, 2010, 02:45:51 PM by Waldschwein »

Offline Stefek

  • Posts: 6177
  • Gender: Male
  • ("ړ)
Re: CKEditor for WebsiteBaker
« Reply #24 on: April 19, 2010, 02:03:36 PM »
Cool.

Yes,
css folder makes sense.


Regards,
Stefek

"Gemeinsam schafft man mehr."

gemeinsam
1. mehreren Personen oder Dingen in gleicher Weise gehörend, eigen
2. in Gemeinschaft [unternommen, zu bewältigen]; zusammen, miteinander
#Duden