Community CKEditor - a CKEditor package that replaces Redactor

Permalink 4 users found helpful
Community member and core contributor ExchangeCore has started building something that I think could be really great. It is called Community CKEditor, it is a package that replaces Redactor in concrete5. Wherever rich text is used, in Content blocks, blocks, Composer, etc., this package will swap out Redactor for CKEditor.

More information on CKEditor:
- demo
http://ckeditor.com/demo#full
- widgets
http://ckeditor.com/demo#widgets...
- image captions
http://sdk.ckeditor.com/samples/captionedimage.html...
- embeddable media
http://sdk.ckeditor.com/samples/mediaembed.html...
- table resizing
http://sdk.ckeditor.com/samples/table.html...
- style types
http://docs.ckeditor.com/#!/guide/dev_styles-section-style-types...

ExchangeCore has no personal need for more than what Redactor does, but he saw that many people were asking for an editor with more features, so he started working on this.

For something just a few days old, it is really coming together. While I have found it very stable, it is not ready for use on production sites. Please use it on development installs only.

From ExchangeCore:
"I ask that you don't go creating issues for it on github just yet, but if you want to contribute to getting it up and running I will acknowledge pull requests and you are certainly more than welcome to participate in any issues marked with the "discussion" label. If/when this gets to a stable point I'll get it on the marketplace"

Community CKEditor
https://github.com/ExchangeCore/Concrete5-CKEditor...

MrKDilkington
 
jero replied on at Permalink Reply
jero
This sounds like an awesome idea. The redactor editor is certainly pretty basic and a step backwards from TinyMCE, for all its foibles. Here's hoping the project succeeds.
MrKDilkington replied on at Permalink Reply
MrKDilkington
@Jero

I am really impressed by how fast ExchangeCore went from nothing to a stable implementation in days.

The todo list includes wiring it up to the file manager, page selector, "responsive image replacer", and custom styles dashboard page.

You can even use and make plugins for it:
https://github.com/ExchangeCore/Concrete5-CKEditor/blob/develop/docs...

There are some very interesting CKEditor core team plugins and widgets available. They blur the line between content and block.

Here are a few examples:
- Simple Box Template
http://ckeditor.com/demo#widgets...
- Placeholders
http://sdk.ckeditor.com/samples/placeholder.html...
- Content Templates (in the top row of the toolbar, click on the fifth button, just right of the print icon)
http://ckeditor.com/demo#full
exchangecore replied on at Permalink Reply
exchangecore
At this point we're pretty committed to finishing it (although not on any particular timeline). We need to get sitemap and file manager integration hooked in yet (probably the biggest chore of all of it). Once those are done all the other known "issues" are just icing on the cake.

If anyone does want to try things out at and report issues, we'd welcome the feedback. I won't recommend the use for this on production sites just yet, but the worse case scenario if you do use it, you uninstall the plugin and you revert any page versions it goofed up and you'll be back to what you had.

Documentation is going up onhttps://docs.exchangecore.com/community_ckeditor/... and pulls from our git repository. Once we start tagging versions they will also start showing up as versioned documentation on the docs page.
gumptech replied on at Permalink Reply
Yes! I am truly excited about this!
Will it be available as a marketplace add-on to enable in the dashboard?
Will it conflict with a theme or blocks that use Redactor?
Will it work with content blocks that already have content in them using Redactor?

Thanks a Million!
exchangecore replied on at Permalink Reply
exchangecore
Will it be available as a marketplace add-on to enable in the dashboard?
Yes. We're still working on getting a few important features working before we submit it.

Will it conflict with a theme or blocks that use Redactor?
Redactor will be completely replaced with CKEditor. We are working on having it provide all of the same integrations that Redactor provides. As long as the theme or block does not provide Redactor plugins it should work.

Will it work with content blocks that already have content in them using Redactor?
Yes. Redactor will be replaced in the content block with CKEditor.
MrKDilkington replied on at Permalink Reply
MrKDilkington
A development update:

Community CKEditor's link button is now connected to the concrete5 sitemap and file manager. This leaves only a few base features left to implement.

While the remaining base features are being worked on, there is one bug that needs to be fixed. When editing a Content block, CKEditor will not load properly and will trigger a console error. This error happens infrequently and without an obvious pattern. Refreshing the page and attempting a second time will make it go away.
SyntaxError: An invalid or illegal string was specified

Testers and developers are needed to help find the pattern, debug the code, and find a fix. This will also help free up time for the ExchangeCore team to focus on implementing features.
https://github.com/ExchangeCore/Concrete5-CKEditor/issues/26...

Don't forget to watch and star the project on GitHub, get involved, contribute code, and test.
https://github.com/ExchangeCore/Concrete5-CKEditor...
anete replied on at Permalink Reply
anete
Hi, I'm about to start on another clients site with 5.7 and just wondered if the ckeditor is ready enough to install? I've had a look on github but I'm not familiar enough with the lingo to understand where it's at!
MrKDilkington replied on at Permalink Reply 1 Attachment
MrKDilkington
@anete

Your question is very timely.

In a few days Community CKEditor will be submitted to the PRB for review and eventual placement in the marketplace. This means that it works and works reliably. I personally have used it and have encountered no issues.

Before the PRB submission, I am going to be writing up some additional documentation for it. This will include topics like "boilerplate" example CSS for using certain plugins that install with it, how to write CKEditor custom styles, and what the different plugins do.

The ExchangeCore team has put a lot of time and work into this add-on and it shows. One member of the team has easily invested more than 50 hours on the project. The team members themselves were fine with Redactor, but they heard calls for something with more features and wanted to help the community.

I am attaching the GitHub version in a folder that can be put in your concrete5 packages folder for install. I would appreciate your feedback and others' feedback. This feedback will help me write better documentation or include things that weren't considered.
anete replied on at Permalink Reply
anete
Thanks Karl, I'll download load it soon and advise of any issues. Congrats to yourself and all involved in the development of it. I had got a bit used to redactor but still not as user friendly for my clients for areas that need the wysiwyg editor
gumptech replied on at Permalink Reply
Karl, could you test this out...
Add an image, left align
then add some text, right align

After setting the text right align the image then right aligns.

Thanks
exchangecore replied on at Permalink Reply
exchangecore
Grumptech,

I'd ask if you have any potential bugs or problems that you come across you post them to https://github.com/ExchangeCore/Concrete5-CKEditor/issues... . This way others who might have the same problems can easily find them in our issue tracker and those who work on the project will be alerted to any issues.

If I have some time I'll give this a try tomorrow if Karl can't get to it. I suspect it's either a ckeditor "feature" or perhaps some over zealous highlighting on your part but it's hard to be certain without further testing.

Best,
Joe
MrKDilkington replied on at Permalink Reply
MrKDilkington
@gumptech

First some background, Redactor and CKEditor wrap images in p tags. This means that if the image does not have a float set, the text-align for the parent p tag will change the image alignment.

Are you using the default image plugin or the Enhanced Image plugin?

The default image plugin offers two ways to apply alignment. Through the Image Properties form (also available by right clicking on the image) and by clicking on the image and selecting the Align Left and Align Right toolbar buttons. Either method will set an inline style float to the img tag. Both alignment methods are default behavior for CKEditor.

If you have an image that changes alignment when you change the alignment of text, click on the image to select it, then realign it using the Image Properties form or the align toolbar buttons. The buttons allow for applying or removing float, based on the current state.

The Enhanced Image plugin is different, it allows for align None, Left, Center, Right. It doesn't add inline float styles to do this, instead it adds a class. Which means that if you do not have the CSS for these classes defined, the images will be inline elements, so if they are part of the text selection when text-align is applied, they will move with the text. This happens because the image's parent p tag will receive an inline text-align style, this style will align the image.

Here are the alignment classes that Enhanced Image plugin uses: content-editor-image-left, content-editor-image-center, content-editor-image-right.

Using the Show Blocks feature makes it easier to see what you are editing and selecting.
http://s1.ckeditor.com/sites/default/files/styles/large/public/show...

The marketplace version of Community CKEditor will include example CSS for using these alignment classes and styling captions.
jpcharrier replied on at Permalink Reply
jpcharrier
@MrKDilkington I have been following this and some other posts on CKEditor, I'm DYING to give this a try and see how much better than redactor it is. Redactor is fine with its minimalist styling and simple controls, but there are many times when we need greater control of style placement (ie block, inline, non-image etc etc).

I found the git repo, but wanted to ask permission to jump in and test first :)

May i?
MrKDilkington replied on at Permalink Reply
MrKDilkington
@jpcharrier

Feel free to use the add-on, no permission is required.

As PineCreativeLabs mentioned, CKEditor is the default editor in the upcoming version 8 release of concrete5. There is a version 8 preview available for download. The preview will allow you to test out CKEditor while also helping the community look for bugs and make improvements.
https://www.concrete5.org/download...
PineCreativeLabs replied on at Permalink Reply
PineCreativeLabs
CKEditor will be included in the upcoming 5.8 release.

It's mentioned here:https://www.concrete5.org/about/blog/core-roadmap/whats-store-versio...
cablecito replied on at Permalink Reply
Hello,

I've installed the community Ckeditor add-on on my concrete5 5.7 installation and works amazing, thanks you.

It is possible to add two functions to the Ckeditor toolbar?

The two i'm searching for are:

Glyphicons ->http://ckeditor.com/addon/glyphicons...

Line Height ->http://ckeditor.com/addon/lineheight...

Thanks you,
Enrique
exchangecore replied on at Permalink Reply
exchangecore
@cablecito Personally I don't have any plans to add anything else to the package at this point. There are already questions about performance with the bloated ckeditor we have today. I think that if we want these things they're most likely best suited as their own packages that can be added as needed.

If you feel that these would have a lot of value to the core, you're welcome to open a discussion issue on github to see if they would be suitable to add to v8 (https://github.com/concrete5/concrete5/issues... )
cablecito replied on at Permalink Reply
Hello @exchangecore.

Ckeditor is working amazing, i don't really need those plugins. At least for me, much better than the default redactor.

My question was just because i am working with the salix theme, and only can insert glyphycons trought HTML. Also i found the glyphicons nice to use :) (http://getbootstrap.com/components/)

If there is any perfomance issue adding these plugins, i can go ahead with HTML.

Thanks for your response
Regards,
Enrique