Module: CKEditor

[ryan]

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.

I don't think we are changing any defaults in this area, unless Antti can think of anything? But we are using the 4.1 (dev) rather than the 4.0 (stable) version of CKEditor, so maybe that's where the difference comes from. 

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?

As far as I know, CKEditor doesn't have that capability. It's possible there may be a CKEditor plugin that provides it though, but I've not seen one yet. 

[apeisa]

Not changed anything (at least not intentional) regards undo. It might be something that needs to be enabled (plugin? setting?).

[PawelGIX]

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.

For me CTRL+Z works fine (chrome on windows)

Is there any chance to include custom.css file in inline editor?

[adrian]

I can't reproduce the undo problem now either - sorry. I know it happened several times in a row the other day though

[adrian]

Regarding the image resizing - it looks like CK does support it (works fine in FF), but webkit has a bug that prevents it working. TinyMCE has implemented a workaround for webkit.

Here are some relevant discussions:

http://dev.ckeditor.com/ticket/6668

http://drupal.org/node/1459176

http://www.tinymce.com/forum/viewtopic.php?id=29222

[Joss]

On a slight aside...

I am wondering whether TinyMCE should become a /site/ module rather than a wire module - basically so it can be uninstalled, or not installed in the first place.

If someone decides to use CK instead (or any other future RTF system), it seems daft to have tinyMCE still sitting in there.

(Or has this been already discussed and I missed it .... again.)

[PawelGIX]

I have trouble with Iframe button.

Editor saves IFrame placeholder, instead iframe. The final result:

<p><img class="cke_iframe" alt="IFrame" title="IFrame" src="/site/modules/InputfieldCKEditor/ckeditor-4.1.0/plugins/fakeobjects/images/spacer.gif?t=D26E" style="width:600px;height:500px;"><br></p>

[Nico Knoll]

On a slight aside...

I am wondering whether TinyMCE should become a /site/ module rather than a wire module - basically so it can be uninstalled, or not installed in the first place.

If someone decides to use CK instead (or any other future RTF system), it seems daft to have tinyMCE still sitting in there.

(Or has this been already discussed and I missed it .... again.)

Just wanted to link here: http://processwire.com/talk/topic/2535-inputfieldtinymce-should-be-in-sitemodules/

[ryan]

I am wondering whether TinyMCE should become a /site/ module rather than a wire module - basically so it can be uninstalled, or not installed in the first place.

Yes, I think that a lot of modules currently in the core should be removed from the core. But we can't just remove modules from the core because that could break someone's site during an upgrade. So it has to be part of a longer plan that involves a custom-download packager (enabling one to download PW with user-chosen modules included), and tied to a major version where users would be expecting something more to an upgrade process.

I actually think CKEditor's download packager is a pretty good example of what would work well for us. You can browse their plugin directory and click "add to cart" (or something like that) to add any given plugin to your CKEditor download. Then when you "checkout", you are downloading a CKEditor ZIP with all the plugins you wanted, ready-to-go.

[AnotherAndrew]

Here's how to add your own styles in case someone is wondering. Before doing so, you need to add it into your text field under input, cke editor settings, cke toolbar, and add "Styles". Then you can modify styles.js under "inputfieldCKEditor/ckeditor-4.1.0/styles.js".

Pretty cool. You can add block styling and inline styling. Though the block styling could cause problems with site layout and look if you are not careful.

[ryan]

Here's how to add your own styles in case someone is wondering. Before doing so, you need to add it into your text field under input, cke editor settings, cke toolbar, and add "Styles". Then you can modify styles.js under "inputfieldCKEditor/ckeditor-4.1.0/styles.js".

You probably already know this, but you can also specify a path to your own "contents.css" file. It's basically the same as in TinyMCE, where you would want to copy out the default copy and place it somewhere in your /site/ structure, and then modify it to suit your needs. 

[AnotherAndrew]

Ryan, yes I figured that out. But modifying the content.css file just updates the styling of the editor field. It is helpful for a user to understand what it would look like on the site design.

I wish just modifying the content.css file would also modify the ckeeditor styles sheet. : (

It's kinda a pain to modify the ckeeditor style sheet. But maybe I'm just been a bit lazy.

[Marty Walker]

Are there plans to have a different location for a custom version of "inputfieldCKEditor/ckeditor-4.1.0/styles.js"?

[ryan]

Are there plans to have a different location for a custom version of "inputfieldCKEditor/ckeditor-4.1.0/styles.js"?

I don't totally understand what that option does, but I've gone ahead and added it. You should see it in the latest commit. 

I wish just modifying the content.css file would also modify the ckeeditor styles sheet. : (

 

So long as you aren't using inline mode, it should allow you to specify the styles?  Though to be honest, I don't use these options myself. I like to keep the client thinking about content and not design when in the editor. So displaying the same styles on the front-and-back end is counterproductive towards that. 

[apeisa]

Ryan, I don't think styles.js is about matching backend styles to frontend styles - it is about adding site specific "style blocks" with classes. Like

CKEDITOR.stylesSet.add( 'my_styles',
[
    // Block-level styles
    { name : 'Blue Title', element : 'h2', styles : { 'color' : 'Blue' } },
    { name : 'Red Title' , element : 'h3', styles : { 'color' : 'Red' } },
 
    // Inline styles
    { name : 'CSS Style', element : 'span', attributes : { 'class' : 'my_style' } },
    { name : 'Marker: Yellow', element : 'span', styles : { 'background-color' : 'Yellow' } }
]);

http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Styles

[onjegolders]

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

I'm still not that sure how this inline thing will work in the backend? Can anyone take a screenshot for me?

[diogo]

Here you go:

-----

[onjegolders]

Thanks mate! 

So it just remove all the formatting buttons until clicked on?

Looks nice and clean.

[apeisa]

That is the end result. Biggest thing though is that it doesn't load those editors until mouseover. So if you have three textfields with five languages, it doesn't have to load 3*5 = 15 editors at page load.

[alan]

Excited to try this new editor, thanks Ryan, apesia et al who have made it so.

One question, does anyone know if out of the box it has keyboard shortcuts for H2, H3, P etc (as TinyMCE does (I think))?

Edit: OK, so Alt+F10 allows you to access the menu and then cursor/enter to choose a tag (H2 etc). That's a good start.

Edited March 24, 2013 by alanfluff

[antknight]

Has anybody had issues with the anchor button? For me it just seems to grey out the entire screen and I can't do anything until I refresh the page, which I have to do by clicking refresh as it also disables the keyboard shortcut.

[apeisa]

Which browser? Clear cache and check what console/firebug or similar says when freezing?

[ryan]

Same here, anchor button doesn't work, and it grays the whole screen with no way out other than to exit the page. Tested in the latest Chrome. Doesn't matter whether it's normal or inline mode. No Javascript errors, so not clear about what's going on here. 

[apeisa]

I'll take a look!

[apeisa]

Hmm.. I am not able to reproduce it (chrome). Latest InputfieldCKeditor and 2.3 stable pw.