Jump to content

CKEditor module?


pokmot
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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). 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 year later...

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

Link to comment
Share on other sites

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. :P

  • Like 2
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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. :P

+1 For this module!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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 )
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

Alway good to see code Adamkiss :P.

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.

  • Like 1
Link to comment
Share on other sites

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...)

  • Like 4
Link to comment
Share on other sites

  • 2 months later...
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. 

  • Like 10
Link to comment
Share on other sites

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 :)

  • Like 2
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...