Module: CKEditor

[alan]

+1 For Pete's suggestion up there ↑

[Joss]

I must admit I have been fighting CKEditor a bit - I find it harder to customise, but that may just be because I know Tiny better.

Also, Tiny 4 really should be evaluated first. It also has inline capability.

http://www.tinymce.com/tryit/basic.php

The other thing that should be looked at is some of the simpler HTML5/JQuery editors - very lightweight and probably all that is needed for many fields.

[Pete]

Joss has a good point with the lightweight editors.

A drawback I noticed with CKEditor is no mobile support.

[Joss]

Yeah, could have at least fitted it with a tow bar ....

[adrian]

@adamspruijt

Have the same issue, but when I ad a link to an external js file. ( Custom Editor JS Styles Set )

Then the issue is gone, even if the file is empty. (weird)

Is anyone else still have this blank content issue. I tried Martijn's trick, but it didn't work. I ended up having to go with inline mode, which always seems to work fine.

[arjen]

I still have the same problem. I initially thought I fixed the issue, but it's still here. It's really strange since it seems random.

Inline mode always works here too.

[Martijn Geerts]

Haven't seen the issue for a while, but I think it's still in there. Somehow it's hard to track this down. I've spend some few hour on this but couldn't find anything suspicious.  

[renobird]

Hi Ryan,

I just noticed the autogrow plugin isn't included with the latest CKEditor version. If I want to add the plugin back, what is the best method so it won't be overwritten on updates?

Perhaps there is another method to accomplish the same thing with the new version?

[SchmidtchenSchleicher]

Hi,

there seems to be a problem with the module. I'm using version 1.1.8.
The value that is finally sent to the server by the POST request when "Save" is clicked (captured with LiveHTTPHeaders) looks like this:
 

...
Content-Type: multipart/form-data; boundary=---------------------------28096310386738
Content-Length: 3032
-----------------------------28096310386738
...
-----------------------------28096310386738
Content-Disposition: form-data; name="body_repeater1056"

<div class="grid2column"><img alt="" src="/site/templates/images/demo/sample-image1.jpg" /></div>

<div class="grid2column lastcolumn">
<h3>Überschrift</h3>

<p>Text</p>
</div>

-----------------------------28096310386738
...

The CKEditor module is configured for a field named "body" with the following settings:

Tab "Details": content type = Unknown. I have tried "Markup/HTML" also, no success.
Tab "Input": Editor Mode = "Regular Editor" / Use ACF? = "No" / Use HTML Purifier? = "No".

All I want is that the transferred HTML code does not get verified or modified in any way by the server. Take the data, store the data, thanks. No need to do anything else with it.

The value that you can see in the POST's form-data above is exactly the HTML Code that I want to save to the DB, but the stored result must have been modified somewhere during the saving process, because "$repeater_element->body" gets this:
 

<div class="grid2column"><img alt="" src="/site/templates/images/demo/sample-image1.jpg" /></p>

<div class="grid2column lastcolumn">
<h3>Überschrift</h3>

<p>Text</p>
</p>

The <div> - Tag should of course be closed by a "</div>", but it's closed with "</p>" instead.

Is there a solution for this?

Thank you!
 

[Martijn Geerts]

All I want is that the transferred HTML code does not get verified or modified in any way by the server. Take the data, store the data, thanks. No need to do anything else with it.

If you want to add as-it-is, don't just an editor at all, go for the plain textarea. Most data handled with a wysiwyg editor is done clientside btw.

If you want to have columns in your text, you're better of with other possibilities.  I sometimes use the <hr> in the text to make columns.

$out = '';
$body = str_replace('<hr />', '<hr>', $page->body); // make all rulers to <hr>
$columns = explode('<hr>', $body); // create columns (array)
$column_count = count($columns);

if ($column_count) {
    $out .= "<div class='row'>";
    foreach ($columns as $key => $column) {
        $last = ($key + 1 == $column_count) && $column_count > 1 ? ' last' : '';
        $out .= "<div class='column col-{$column_count}{$last}'>"; 
        $out .= $column;
        $out .= "</div>";   
    }
    $out .= "</div>"; // .row
}
echo $out;

[SchmidtchenSchleicher]

Ok, I found the solution thanks to Ryan's post.

The line 271 in "InputfieldCKEditor.module"

$value = str_replace(array('<div>', '</div>'), array('<p>', '</p>'), $value);

is "no good"   Think of HTML code like this:

<div class="red">TEST</div>

The end tag gets replaced, the start tag does not... After I commented out the line the module works like expected

[renobird]

bump

I can manually add this, just curious if it's coming back.

[Ralf]

Sorry renobird for straddling between...

But for beginner like me I have found a table with all commands that are included in the full toolbar and I thought that might be interesting for others?!

See here the full range of possibilities -> CKEditor Buttons at the Full Toolbar

And here is a PDF File with the Complete List of Toolbar Items for CKEditor

So with this List you can now easily customize the Buttons from CKEditor in PW (Setup -> Fields -> your Field with a CKEditor (for example "body") -> Input) and under CKEditor Toolbar you can post your individual sequence.

This is for example my sequence:

Format, Bold, Italic, Underline, -, RemoveFormat
TextColor
NumberedList, BulletedList, Blockquote, -, Outdent, Indent, -, JustifyLeft, JustifyCenter, JustifyRight
PWLink, Unlink, Anchor
PWImage, Table, HorizontalRule, SpecialChar

PasteText, PasteFromWord
Undo, Redo
Scayt, -, Sourcedialog

much fun with it

[adrian]

Hi Ralf,

The only thing I would say is make sure you trust your site content authors/editors before giving them TextColor control. Things can get very ugly very quickly

[Ralf]

  I know from other projects ... but current it was a requirement.

[LostKobrakai]

I don't know when multilanguage image descriptions made it's way into processwire, but the pwimage plugin for ckeditor doesn't use it, if the textfield is also multilanguage. It would be nice, if it would be aware of the different fields.

Also is there a way to get the plugin to update the alt text, if the image description gets changed, this would be nice and convenient, especially for clients.

[teppo]

@LostKobrakai: multi-language image description part makes sense, but I'm not so sure about the latter suggestion. IMHO these (image desc and alt text in RTE) are not the same thing and shouldn't be connected in such a way. Description being used as the default alt text is pretty good compromise, actually.

For an example, I've used one image multiple times with different alt texts quite often. There's also the point that in this case the alt text should be updated for other pages too, which would make this rather complicated to implement (if it's updated for some cases where the image is used but not all of them, that's just plain confusing).

On the other hand this is something I've had to explain to others multiple times, so perhaps some sort of "[ ] define here: ___________ / [x] inherit from image" option would be an optimal solution, though I'm still not quite sure how cases where image from another page is used should be handled..

[LostKobrakai]

… though I'm still not quite sure how cases where image from another page is used should be handled..

yeah, didn't think of that. I have a imagefield below the rte for the insertable images and it would be so convenient to tell the client to just update the description fields without reminding to update the rte code. It would also be more visible, that the texts are missing on a page. The description texts won't be used for other things beside the alt text.

[teppo]

Might want to consider a simple module for that task. In a situation like yours, where all affected fields are most likely well known, it wouldn't require too much magic to hook after image descriptions are changed, find references to said images in specific field(s), replace alt texts and then save the field(s).

Some regexp required, but that's just about all there is to it

[Zahari M.]

Hi guys

Been trying out and been busy configuring CKEditor for the first time and it is going well! Thanks to all of you who have done so much work here integrating CKEditor into ProcessWire!

Just one question. I was trying to swap out the automatically applied <p> tags that surround each <img> tag by changing them instead to <figure> tags. To do this, I click on the source button and just delete the two p's and insert in their place figure. As soon as I close the source modal, CKE has swapped the <figure> tags back to <p> tags.

Currently I have ACF and HTML Purifier turned on as I believe that's a good thing.

I'm just wondering how we can white list or configure CKE to allow any extra tags we might need such as <figure> and <figcaption> whilst still keeping ACF and Purifier on.

Any suggestions / thoughts how we can configure what tags are allowed and not automatically swapped to p tags?

Cheers guys!

[kongondo]

Zahari,

On dev branch, CKEditor is currently the default editor. It is highly configurable. Go to the field using CKEditor -> Input -> scroll down to 'Format Tags'. There's a bunch of other extras in there as well

[Zahari M.]

Thanks Kongondo!

I dont know if it's my setup or what.... but when I add some new tags.... when I go to edit a page all the text in the CKE editor field goes blank! If I remove the tags back to the default set then the text returns....

Could you, if at all possible... pretty please... consider having a try and see if you can add tags there Kongondo and see if your editor still works? If I add a div tag things still work but if I add say figure or figcaption, then the text in my editor disappears. Or is it just mine that hides my body text after adding new tags??

Im using latest PW dev 2.4

Cheers

[kongondo]

I did (as shown in that screenshot) and it worked just fine....I tested the editor after adding 'div' to the list of allowed tags. I also tested with the 'extra allowed content' - div[class](*) to allow me to give classes to the divs. Worked fine. The edits stuck even after closing the page I was editing. . Not sure what's going on in your setup but maybe try the latest dev?

[Zahari M.]

Hi kongondo

Thanks so much for looking at this. Much appreciated.

If I use div, that does work for me too.

But what I really want to try and add are some html5 tags like figure and video.

I don't have any luck adding these type of tags in.

Does your setup allow these types of tags?

Cheers!

[kongondo]

Ah, I see. Yes, it doesn't work directly with video and figure if you add these to the 'Format Tags' box.

It worked for me this way though.

1. Add figure, video, etc to the extra allowed content box - see screenshot

2. Switch off HTML purifier - otherwise it strips off your html5 tags later (after save)

3. Use source code editor in CKEditor...

It works - i.e. the tags don't get stripped (but no video was loaded )

Now, I am not saying this is how it should be done. I don't know much about the HTML purifier but maybe there is a way to have it allow some tags. Also, there are other ways of customising CKEditor as shown in this tut http://www.flamingruby.com/blog/processwire-weekly-14/#1-4 using a custom config settings file. I don't know if that works with tags though...

Edited September 2, 2014 by kongondo