CKEditor module?

[pokmot]

Hi,

Has anyone created a module for using CKEditor instead of TinyMCE?

[ryan]

Not yet, but definitely under consideration. I don't know a lot about CKEditor. Are there any advantages to it vs. TinyMCE? I always thought the two were roughly equivalent. ProcessWire 1 used FCKEditor (the one before CKEditor) and it seemed alright, though I'm assuming CKEditor is an improvement.

[martinluff]

While ago I evaluated both and came out on the side of CK - but can't remember all the reasons now and of course the inequalities re most likely historic. Interesting to note this blog post from Drupalcamp http://www.mediacurrent.com/blog/wysiwyg-shootout-and-winner. I seem to remember the CK file manager is a bit more integrated (but I could be thinking of FCK there) plus the TinyMCE package of files take up less space (but could be related to the previous point). 

[ryan]

That's interesting to see that TinyMCE came out a little ahead there. As much time as it took to really integrate TinyMCE I'm not all that enthusiastic about doing it all over again unless replacing it with something substantially better. It actually is easy to provide these as Fieldtypes, but all the time goes into tweaking them, making them configurable, and especially providing the custom image/link insertion capabilities.

[Alessio Dal Bianco]

Not yet, but definitely under consideration. I don't know a lot about CKEditor. Are there any advantages to it vs. TinyMCE? I always thought the two were roughly equivalent. ProcessWire 1 used FCKEditor (the one before CKEditor) and it seemed alright, though I'm assuming CKEditor is an improvement.

Hi Ryan, have you still got the version 1 of ProcessWire ?

I want to check if i can adapt the FCKeditor module for PW2...

Personally I really don't like TinyMCE and i want to replace it with CKeditor.. If i could

Anyway thanks for the great work! Now i'm working on the first site with ProcessWire and it is very powerful!

Soon i will make a post with my first experience with PW.

ADB

[adamspruijt]

Conveniently CKeditor 4 just came out on the 27th (and with many huge improvements). I started playing around with creating a Module the very next night, I've so far setup some basic config options and got the basics working but a quick look at the custom PW Image and Link plugins for TinyMCE had my head spinning. Maybe if Ryan could shed some light on how these operate or the requirements involved I could make some more progress. I'd really love to see CKeditor replace TinyMCE, even if only for the improved interface.

[diogo]

It looks great!

[Martijn Geerts]

I never liked tinyMCE. Always angry with the code it creates or corrupts. So I was far from a big fan. Then I discovered PW, was very happy with the markdown it provides. But then after a while I discovered how well tinyMCE is integrated, how well it was configured. PW has changed the way I think of tinyMCE. It does function very well.

The way i think to go for WYSIWYG editors don't drop tinyMCE till PW drops support for older browsers. Or don't drop it at all.

Maybe we need a $config->onlyHtml5Browsers = true; ( or something )

That could make some room for third party WYSIWYG alternatives based on new standards.

[Alessio Dal Bianco]

Conveniently CKeditor 4 just came out on the 27th (and with many huge improvements). I started playing around with creating a Module the very next night, I've so far setup some basic config options and got the basics working but a quick look at the custom PW Image and Link plugins for TinyMCE had my head spinning. Maybe if Ryan could shed some light on how these operate or the requirements involved I could make some more progress. I'd really love to see CKeditor replace TinyMCE, even if only for the improved interface.

+1 For this module!

[Martijn Geerts]

Sorry to spam again for tinyMCE. There's 1 thing missing right now I think. Thats a "retina" checkbox. Checking that checkbox would double the pixel size for images inserted via the image insert function.

[Joss]

Hi Martjjn

I haven't played "Retina" on websites yet. But I have had the impression that really you need two images - one with the original pixel number and the alternative with double the pixels so that you are covering both retina and normal displays.

There is this JQuery plugin, I notice:

http://www.tylercraft.com/projects/jquery-retina-plugin/

So, I suppose you would need to be uploading the Retina image and then the image (and crop-image) plugins automatically create a lower res version with a suffix.

This wouldn't be a tinymce issue at all in that case.

Joss

[ryan]

Sorry to spam again for tinyMCE. There's 1 thing missing right now I think. Thats a "retina" checkbox. Checking that checkbox would double the pixel size for images inserted via the image insert function.

I think this makes sense. I'll look into adding this.

But I have had the impression that really you need two images - one with the original pixel number and the alternative with double the pixels so that you are covering both retina and normal displays.

I don't know all the technical details surrounding this, and only recently started caring about Retina screens, but maintaining multiple images to target different displays sounds like a short term strategy, not a long term one. At least, I'd have a hard time believing we'd be doing this 5 years from now. I would expect pixel density might keep going up over time. Even if it uses more bandwidth, it seems like the safest strategy for individual images would be to just double the resolution and scale it to 50%. Meaning, if you want to display an image at 300px wide, then make it 600px wide and specify 300px in the width attribute or style. But I'm writing in the context of TinyMCE embedded images and other one-off images. For something like a photo gallery where there are going to be huge differences in bandwidth, or other bandwidth-dependent situations, maybe these browser sniffers and multiple copies of photos make sense… make the people with Retina screens pay for the bandwidth rather than everyone else. Still, doubling the pixel density on images seems to offer some better future proofing and we'll probably all be using this level of density in our displays a few years from now.

For the new processwire.com site, I noticed the ProcessWire logo looked crappy on my iPad and iPhone, so saved out a double-size copy, but kept the width/height dimensions the same on the <img> tag. Now it looks great on retina screens, without making any difference on other screens. I think this is the strategy Martijn was referring to for possible inclusion to PW's image placement.

[Martijn Geerts]

Yep indeed, thats the way to go for now I think. lots of hires solutions have double image requests & an extra js request. Or have to wait before DOM is finished to show the image. I think serving a bigger image is quicker than the extra requests. And as Ryan mentioned will become more normal in the near future.

off-topic:

Loudly thinking here about images in textaera/text. An imageFormatter a little bit like the the video embed module.

In he settings:

• max-width % (landscape images)
  
• max-width % (portrait images)
  
• pixel density
  
• default position ( setting default position to left, right or none )
  
• link to larger checkbox to set default or not
  

for use in textarea/text, tags like:

• {imagesfield} ( first image of images field )
  
• {imagesfield:n} ( where n is the index of the image in the images field )
  
• {nameoftheimage:right} ( the image with that name aligned right )
  
• {imagesfield:3:left} ( 3th image aligned left )
  
• maybe: {imagesfield:3:right:%50} ( 3th image aligned right, 50% wide )
  
• maybe: {imagesfield:3:link} ( 3th image link to larger version )
  

[Adam Kiss]

Loudly thinking here about images in textaera/text. An imageFormatter a little bit like the the video embed module.

Yeah, I already did (almost) that. I could post you the code if you wish

In my case it's more like {{ figureimage index=2 figindex=1 title="What is this?" }}, but totally simple to adjust.

I also has far more robust system for parsing textareas and using shortcodes inside text fields, but that one is far from done… so I'm just bragging here.

[Martijn Geerts]

Alway good to see code Adamkiss .

[Adam Kiss]

Alway good to see code Adamkiss .

It's quite undocumented and it's rather chaos, but it's here: https://gist.github.com/4233629 • it's temporarily shortened version of WIP full module, so comments may make no sense

you input {{ anything:function pw=like, params=1 }} and it will call "function" from inside the class (with parsed $params as parameter, should be array.

Do with it whatever you want.

[apeisa]

I have implemented TinyMCE, AlohaJS (when it still had ExtJS dependencies) and now CKEditor 4.0 in various projects and I have to say that I really loved how the CKEditor 4.0 works. It was very fast to implement, easy to customize, works fast and it supports both inline/textarea... It has brilliant documentation (http://docs.ckeditor.com/#!/guide) and as a cherry it looks very pretty.

After I have implemented it in this project (I use it for frontend editing in this case) I will definitely look for implementing CKEditor Inputfield. I think the table editor alone is so much better than what TinyMCE that it is worth it. But also looking for some nice scenarios to implement CKEditor on frontend - maybe with AdminBar 2.0... (there isn't yet a thing called AdminBar 2.0, but who knows...)

[marcin]

I'd suggest Redactor - http://imperavi.com/redactor/ - I haven't played with it a lot, but it looks and works pretty nice!

[diogo]

@marcin, see here http://processwire.com/talk/topic/1964-redactor-wysiwyg-editor/page__hl__redactor

[ryan]

I have implemented TinyMCE, AlohaJS (when it still had ExtJS dependencies) and now CKEditor 4.0 in various projects and I have to say that I really loved how the CKEditor 4.0 works. It was very fast to implement, easy to customize, works fast and it supports both inline/textarea... It has brilliant documentation (http://docs.ckeditor.com/#!/guide) and as a cherry it looks very pretty.

I've got a CKEditor 4.1 Inputfield pretty far along. I'm trying to duplicate most or all of the functionality we have in TinyMCE with regards to the link and image plugins. So far I've got the link one fully functional, and hope to have the image one wrapped up soon. 

The docs are nice to look at for CKEditor, but I haven't found them to be any more useful different than TinyMCE's. I still have to ultimately figure out how to do everything via the Chrome web inspector and "trial and error". Though part of this is because we use our own dialogs rather than the ones supplied with TinyMCE and CKEditor. 

I'm loving the inline mode (using it in the admin). I've got a couple dozen textarea fields to power on a single page. Using TinyMCE or CKEditor regular editing mode, it took several seconds of loading/initialization. I experimented with Redactor, which was quite bit faster for that, but still not perfect. Then I tried out CKEditor's inline mode and BAM! they all load in an instant. So CKEditor's inline mode seems to have some real benefits in speed… particularly if you need to power lots of rich text fields in 1 editor (like you would in a repeater, for instance). Or in my case, several repeater items, each containing TextareaLanguage fields for 6 languages… meaning, potentially dozens of rich text fields in 1 editor. So finding something that could do rich text editing quickly became a necessity. And it looks like CKEditor nailed it with this. 

[apeisa]

Ryan, you are animal. Others talk, but you do. I definitely agree with ckeditor and it's inline speed.

And about the docs: yep, I had the same experience recently when I had to dig little deeper. My first experience with the docs was very positive though

[ryan]

Here's a link to the CKEditor module work-in-progress if you want to try it out. I'm not yet using it in production, but it seems to work well locally on the sites I'm developing. 

https://github.com/ryancramerdesign/InputfieldCKEditor

[apeisa]

This is amazing, thanks Ryan. Just doing finishing touches to PWImage-plugin.

[apeisa]

Just send you an pull request for PWImage plugin! Thanks again for your work on this. I think CKEditor 4 is super nice. Their default theme will fit nicely on most of the admin themes there is currently available for PW too. Great implementation on inline support too Ryan!

[Joss]

Just send you an pull request for PWImage plugin! Thanks again for your work on this. I think CKEditor 4 is super nice. Their default theme will fit nicely on most of the admin themes there is currently available for PW too. Great implementation on inline support too Ryan!

Yes, looking forward to trying this. It should look nice on my Bootwire admin!