Craft WYSIWYG editor and CKEditor

Question

I have a client who requires more advanced formatting options than the current Redactor editor provides, like editing table cells, merging cells, background colors, etc.

My plan is to integrate CKEditor into Craft as a custom field type and a plugin - and basically switch out the current limited editor with CKEditor.

Has no one else needed a more advanced editor than the stock? Am I heading down the wrong path?

Answer 1

From my experience, I try to strip out as much formatting options as I can from any wysiwyg editor. Otherwise you'll end up with large, purple text with a red background (or some other crazy style the client thinks looks good).

I understand the client wants to construct a table - then alter the table along with the graphics etc.

What if...

Create a matrix field, then within that have a block for the rich text area, then another block that is of type table? I'm not 100% on what capabilities that the table field type has. That should allow them to create the table and work with it.

I would then have some sort of pre-defined css that took over for them, rather than giving the client free reign on the design.

Answer 2

Am I heading down the wrong path?

If you gotta ask that question, sometimes it's a self-fullilling prophecy! ;)

One of the big reasons people use Craft is it does a great job of separating content from layout, which is becoming important when trying to build for all types of screens as Damon also alluded to in his answer.

Tables are tough. I try to avoid them if possible because they can break mobile layouts and a lot of clients still want to use them for presentation instead of what they're intended for... tabular content. When I get a request like this from a client, I always look why the client asking for more advanced table fuctionality. Is there something else we can do to fulfill that request that Craft's built-in table field can't handle?

What kinds of table content are they needing to create? You might want to look at Super Table. That gives you a fighting chance of having the client enter their content while still having some control over the design. It's a bit like souped up Matrix field but designed with tables in mind.

Going the opposite direction, Redactor also has a very simple Table plugin too. It likely won't work in your case but it can do the job for simple, one-off tables, depending on the client's use case. (For example you can get the table started for them and if it needs changes, they can pop those in).

Answer 3

Thanks guys - yes I'm fully aware of the downfall of letting clients run free with the editor, and we've had discussions internally about tables & trying to stop the client from using them but in this particular case there's a real need for an editor which is more fully featured.

I am however looking for a solution, and CKEditor seems like the best. I've looked at the likes of Super Table and the matrix options but they don't provide the ability to edit content inline like we need.

When I asked the original question I was hoping that there was more featured wysiwyg plugin out there, or perhaps extra config options on redactor which I had missed, but unfortunately it seems this isn't the case.

In the meantime I've gone down the route of integrating CKEditor and it looks promising, I'll post back here with some 'learnings' later today once I've finished testing the new plugin & custom field.

EDIT:

For those who are interested, I've integrated CKEditor into the site I'm working on. The process was relatively painless and look just a few hours.

Steps:

• I created a new craft plugin which consists of a Custom Field Type and a Template
• The template is simple, just includes the Textarea for displaying on the page
• I then queue in the CKEditor javascript files, and my own custom JS file which triggers the CKEDITOR.replace function
• I then wanted the Image button on the toolbar to link to the Craft asset dialoog, so I copied the Image dialog code from the RichText plugin and added it to CKEditor as a new plugin, then added a custom button to the editor toolbar
• I noticed that the current/old Body text from Craft referred to asset:url in the output for images rather than image paths, so I created a RegEx to display these correctly; this regex runs in the prepValue() function of the custom field
• I didnt need a prepValuePost() function
• And then on my website pages, {{ entry.body }} was outputting escaped HTML characters, so I adjusted this to {{ entry.body|raw }}

The end result is pretty good, works well and was surprisingly quick to implement.

Answer 4

This is an old question, but in case it helps anyone else there's a plugin that alleviates some of the limitations of Redactor's absurdly simplistic table button: http://plugins.supercooldesign.co.uk/plugin/table-maker

It's a separate fieldtype so you can have a separate Matrix block for it. It allows the user to set relative column widths and left/center/right alignment. And because it's a fieldtype, you have total control over the markup structure.

Still not as robust as TinyMCE or CKEditor's inline table maker thing, but might help in some situations.