Module: CKEditor

[ryan]

CKEditor for ProcessWire

 

CKEditor is a web text editor like TinyMCE. This module can be used anywhere TinyMCE can be used in ProcessWire and it is generally considered one of the best web text editors out there. TinyMCE and CKEditor have always been the two big leaders of web text editors, and they've been equals for many years. Though lately it seems like CKEditor might be a little ahead of TinyMCE in some areas, so I thought we should give people the option of using CKEditor with ProcessWire. 

 

CKEditor has a nice inline mode that is desirable in the page editor when you may have lots of rich text inputs. The reason for this is that the page editor loads a lot faster. If you have this need, this would be one reason why you might want to use CKEditor over TinyMCE. Some also prefer CKEditor for other reasons. For instance, @apeisa prefers the table controls in CKEditor to TinyMCE's. 

 

Here are a few notes about this module:

• You already know CKEditor–it's what this forum is using. Though the version included with ProcessWire's module is significantly newer. 
• It is currently beta test. You are advised to test thoroughly before using it in production. You may very well run into bugs, in which case please let me know so that I can fix. 
• It is tested and confirmed compatible with both repeaters and multi-language support.
• It is now fully hooked into our link and image systems, like TinyMCE. Thanks to Antti for helping with the image plugin.
• If you want to use the inline mode, you'll need to install the HTML Purifier module first. 
• The toolbar is fully configurable.
• It is multi-language ready and all text in the module is translatable.
• Like with TinyMCE, the module optionally supports definition of custom plugins and content.css file. 

 

How to install

1. Copy all the files from this module into: /site/modules/InputfieldCKEditor/
2. Login to your admin and go to Modules > Check for new modules. Click install for InputfieldCKEditor.
3. Now go to Setup > Fields and locate a textarea field that you want to use CKEditor (or create a new textarea field).
4. When editing the settings for a textarea field, click the Details tab. Change the Inputfield Type to CKEditor and save.
5. While still editing the field settings, click to the Input tab for CKEditor-specific settings you may optionally configure.

Download

• ProcessWire Modules page: http://modules.processwire.com/modules/inputfield-ckeditor/
• GitHub Repo: https://github.com/ryancramerdesign/InputfieldCKEditor

Screenshots

Screenshot of regular mode:

Screenshot of inline mode, combined with multi-language fields:

[apeisa]

I did had good play with this earlier this weekend - compared to tinyMce - it is just much nicer to use. Less fighting with positioning (text and tables, images inside text etc), less mysterious "if I hit backspace now, I don't have a clue what will happen" -moments and it just looks and feels nicer.

Great work Ryan! Glad I could help a little.

Also: The inline mode beats the Aloha hands down in my opinion. Of course not much use in backend (unless you need RTE inside repeaters or have lot's of multilang fields) - but if you build front end editing to your sites - don't forget this beauty.

[ryan]

I did had good play with this earlier this weekend - compared to tinyMce - it is just much nicer to use. Less fighting with positioning (text and tables, images inside text etc), less mysterious "if I hit backspace now, I don't have a clue what will happen" -moments and it just looks and feels nicer.

Be sure to grab the latest, as I updated many things this morning. I haven't noticed this level of difference yet between TinyMCE and CKEditor. But if this becomes a common feeling among ProcessWire users, then we could always switch out the core default from TinyMCE to CKEditor. Though I would like to maintain them both either way.

I noticed CKEditor doesn't seem happy to paste text without inserting a bunch of style attributes into it... which is annoying. But I'm sure there's a way to configure that out of there, just haven't figured out how yet. The current dev version of CKEditor does support allowed content rules in a manner similar to TinyMCE, but the stable version [that we are using] apparently does not (?). 

[Philipp]

Looks good. I'm installing it right now on my own page. The table feature sounds nice and that's one thing I always hated about TinyMCE(The mostly complete lack of table features).

[apeisa]

Ryan, Phillip: TinyMCE has that right click table toolbar also, just not enabled by default. I still prefer CKeditor tables, but not so much differences than I thought there is. Both have too many options by default (although there are situation where some of those options are really needed).

Ryan: Yep, that feature is still missing. I think best way to go currently is forcePasteAsPlainText setting (http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.forcePasteAsPlainText) combined with paste from word (if your client does use word).

But it seems 4.1. is just around the corner: http://ckeditor.com/blog/CKEditor-4.1-RC-Released so maybe we should upgrade to it already?

[apeisa]

Oh, and it seems to have a killer feature: 

Download any CKEditor package, set allowedContent to the set of tags/attributes/styles you want to allow, and all buttons that generate disallowed code will automatically be removed from the toolbar! No need to adjust the toolbar whenever you change the set of allowed tags. Input elements in dialog windows which were designed to edit disallowed attributes will be removed automatically too!

[Philipp]

First impression is nice so far. I'm not sure how, but the Editor displays everything in German (that's good!). The feeling while typing is good.

Only thing I'm missing: How can I prohibit the editor from stripping <i> HTML? Searched the config.js but didn't find anything.

[apeisa]

That kind of tweaks (which elements are allowed and which are not) are coming in 4.1.

[Radek]

Awesome work Ryan. Thanks.

[apeisa]

Ryan: tested this with 4.1RC. Seems to be working great (just remember to clear cache, otherwise lots of empty icons). It also does what it promises: by default it strips away all the elements that are not available from toolbar menu. So most sites are fine with that one setting field you have there already (CKeditor Toolbar). Although we probably don't want to strip links, so we need to make it think PWLink as a link tool. Or then use the allowed content rules: http://docs.ckeditor.com/#!/guide/dev_allowed_content_rules

EDIT: Hmm.. some problems with PWImage module. Other than that - I think this will be pretty easy upgrade.

[apeisa]

Ok, problems with PWImage are for the same reason - both PWImage and PWLink does work if toolbar has CKeditor native Image and Link buttons also. Need to find a way to define "allowed elements" per plugin.

[nikola]

Thank you Ryan & Antii for this plugin, always kind a liked it better then TinyMCE.

Would you consider adding this to the module (people can always integrate it themselves, but it's neat feature )

http://ckeditor.com/addon/codemirror

Alternative:

http://ckeditor.com/addon/syntaxhighlight

[Michael Murphy]

I think this will become my default rich text editor for projects especially with the inline mode. I have always preferred CKeditor over TinMCE in previous projects as I found that the quality of the HTML was usually better, especially when copy and pasting from other applications.

However I did notice that in this version of CKeditor, the default formatting from pasted content was not so perfect so I added forcePasteAsPlainText to the config

config.forcePasteAsPlainText = true;

I really like the inline mode - it makes the PW interface so much less noisy, especially when you have more than a few rich text areas on a page. I noticed that there was no code editing possible with inline mode, but this has been fixed in 4.1 - 

http://ckeditor.com/addon/sourcedialog

[Martijn Geerts]

A wish from my side would be to make it possible to link to anchors within the PWLink popup.

Great work Ryan !

[Soma]

Great work Ryan!

Well I can't say I like ckeditor more than tinymce yet. But that's maybe personal experience using them. Sure some things are nice and it may more robust in some cases, and inline mode is such a cool feature, but overall I still struggle to see what's really better for an editor.

Testing the new editor I think as it is now, the table tool is not really more usable than with tinymce. I think it's even worse or same. In Chrome it's hard to use and select (same in tinymce), in FF it works but if you turn off border you can't see the table anymore like in tinymce. This is in inline edit mode and standard. Maybe there's a setting like in tinymce to show it?

[ryan]

Ok, problems with PWImage are for the same reason - both PWImage and PWLink does work if toolbar has CKeditor native Image and Link buttons also. Need to find a way to define "allowed elements" per plugin.

Let me know if you discover any solutions for this, and I'll look at it too. It sounds like otherwise the 4.1 update is a good idea. 

Would you consider adding this to the module (people can always integrate it themselves, but it's neat feature

Definitely. CodeMirror is great. The only reason we don't have it standard in TinyMCE is because of the language pack issue. Maybe that's not an issue in the CKEditor verssion--I will try it out. 

I think this will become my default rich text editor for projects especially with the inline mode. I have always preferred CKeditor over TinMCE in previous projects as I found that the quality of the HTML was usually better, especially when copy and pasting from other applications.

Much of this just depends on how they are configured. Both editors have an endless amount of settings related to pasting text. Currently I don't think we've got the right paste settings in CKEditor, just because it's generating a lot of inline styles in the process, for some reason that I haven't yet figured out. So this is something I could use help with finding. 

However I did notice that in this version of CKeditor, the default formatting from pasted content was not so perfect so I added forcePasteAsPlainText to the config

I think this isn't ideal either, because headlines, lists, links, bold/italic, also get lost in that type of paste. These are things you'd usually want to keep (or at least, I would). For instance, if I'm copying/pasting from one editor to another, or even moving text within the same editor, I don't want to lose this stuff. 

A wish from my side would be to make it possible to link to anchors within the PWLink popup.

It's already there. If you know the anchor you want to link to, highlight the text you want to link, click the Link button, and type in the anchor name preceded by a "#", like "#myanchor". 

Well I can't say I like ckeditor more than tinymce yet.   But that's maybe personal experience using them. Sure some things are nice and it may more robust in some cases, and inline mode is such a cool feature, but overall I still struggle to see what's really better for an editor.

I think the big picture is that they are equals. But when you get down to little things, some may prefer one over the other. 

Testing the new editor I think as it is now, the table tool is not really more usable than with tinymce. I think it's even worse or same. In Chrome it's hard to use and select (same in tinymce), in FF it works but if you turn off border you can't see the table anymore like in tinymce. This is in inline edit mode and standard. Maybe there's a setting like in tinymce to show it?

When in inline mode, it's using the admin theme's stylesheets rather than CKEditor's. I'm overriding a lot of things from the admin theme to make them more consistent with CKEditor's defaults in inline mode, via the InputfieldCKEditor.css file. But I don't think I've covered anything specific to tables yet, and probably need to. 

[Martijn Geerts]

Ryan: It's already there. If you know the anchor you want to link to, highlight the text you want to link, click the Link button, and type in the anchor name preceded by a "#", like "#myanchor". 

For us, so obvious. But some editors asked me how to link to an anchor. ( They don't know they have to preceded the name with a "#" )

In MODX there was a pull down in the link popup to select the target, that worked great. (no questions asked)

[Radek]

I think that "justify" CK module may be added to default module instalation. Text alignment is pretty basic feature.

Using it right now like:

Toolbar:

Format, Bold, Italic, -, RemoveFormat
JustifyLef , JustifyCenter, JustifyRight, JustifyBlock
NumberedList, BulletedList, -, Blockquote
PWLink, Unlink, Anchor
PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord
Undo, Redo
Scayt, -, Source
 

Plugins:

pwimage,pwlink,justify
 

[totoff]

wow, thanks ryan. pw becomes even more versatile with this. i always found ckeditor superior to tinymce and can't wait to give it a try.

[apeisa]

Just made pull request to update this for using ckeditor 4.1. It's automatic content cleaning is just fabulous. There might be cases (is there?) where we want to allow elements pasted that are not available from toolbar, then we need a setting for that.

Still few minor quirks with image field (loses possible link when changing alignment).

[ryan]

Just made pull request to update this for using ckeditor 4.1. It's automatic content cleaning is just fabulous. There might be cases (is there?) where we want to allow elements pasted that are not available from toolbar, then we need a setting for that.

Thanks Antti. I merged your pull request. All seems to be working well after a brief test.

Not sure why, but the 'Source' option still doesn't work in inline mode, even though they apparently fixed that in 4.1. 

I think that "justify" CK module may be added to default module instalation. Text alignment is pretty basic feature.

The problem is it isn't semantic. It's one of those things that technically belongs with a site's styles rather than in the RTE. I'm hesitant to have anything non-semantic in our default set. 

For us, so obvious. But some editors asked me how to link to an anchor. ( They don't know they have to preceded the name with a "#" )

In MODX there was a pull down in the link popup to select the target, that worked great. (no questions asked)

This could be a good idea for the future, so I'll make note of it. But the scope of it would stretch beyond just the CKEditor module, so this is something I'd like to revisit later. 

[Michael Murphy]

Thanks Ryan and Antti!

To get the source option working with inline mode you need to download the new plugin 

http://ckeditor.com/addon/sourcedialog

and then include it in the extra plugins - sourcedialog and then in the toolbar layout - Sourcedialog. 

[diogo]

I love it how the inline mode looks like in the admin!

[ryan]

Thanks Michael, I have updated it to have the Sourcedialog plugin and that seems to work nicely. It is now the default option when creating new CKEditor fields.

If you've already got CKEditor installed, you'll need to make a couple replacements in your "Setup > Fields > [field] > input" tab. In the "CKEditor Toolbar" field, replace "Source" with "Sourcedialog". For "extra plugins" replace "codemirror" with "sourcedialog" (or just add sourcedialog if codemirror isn't there).  

[adrian]

Hey Ryan,

Just started playing with this - looks very cool. Just a couple of things I noticed.

CTRL/ALT+Z seems unreliable for undo. Edit > Undo from the browser menu seems ok still. This doesn't seem to be an issue with TinyMCE. Also, I don't seem to have a problem when using the demo on the CkEditor site, so not sure what the issue is.

The other thing I noticed in the lack of ability to resize an image with the mouse. Seems like this option is not available (at least by default) with CKEditor, which is probably smart given that HTML resizing is a bad idea, but with PW's ability to actually resize the image on the server when resizing in the editor, it seems a shame that CK doesn't have this - can it be enabled?