CKEditor basics

[rsi]

Hi everyone!
I have to say that i am so happy that i have found Processwire. It is great to work with, although I'm just starting and am probably doing many things more complicated than necessary

I am at a point now where I would like to automatically add a certain class (img-responsive) to images that are added to a page via CKEditor.

I tried to find information on how to customize CKEditor and i found 61 pages here on this forum, but i had a hard time figuring out where to put a config.js file or how to call it!
Writing a plugin for CKE is what came up most, but it seemed a bit too much...

Maybe there is a basic introduction to CKE in processwire that i missed?

Please someone point me in the right direction

thank you all!



 

[Robin S]

Hi Nancy Reagan fan,

There are a number of different ways you could do this, but if you want the class added to all images inserted via CKEditor then the simplest is to do it client-side with jQuery.

1. In your template file(s), wrap the output of your CKEditor field(s) with a div so you can identify them:

echo "<div class='cke-content'>$page->body</div>";

2. In a Javascript file:

$(function() {
    $('.cke-content img').addClass('img-responsive');
});

But consider if you really need to add this class or not. If you wrap your CKEditor content as in step 1 then you can target the images in your CSS/JS with ".cke-content img" without needing to add a class to the images themselves.

[rsi]

thank you for your help.
using jquery is a way and i have thought about it...

[pwired]

echo "<div class='cke-content'>$page->body</div>";

Good code example of processwire doing things the decoupled way without limits

[tpr]

perhaps this could work too

echo str_replace('<img', '<img class="img-responsive"', $page->body);

 

[rsi]

thanks for your suggestions.
is there a hook i could use to process the TextArea before writing to the database?
it seems like a hack to me to use jquery to inject a class that i could add to the tag the moment i create it and never touch it again. instead of adding it to client side code...
but that's probably my idea of doing it the clear/right way...

 

still i'm interested in how to configure CKE in processwire...

• where do i put config files?
• how do i name them?
• do i have to write a plugin?

is there a primer on CKE in processwire and i just haven't found it?!

thank you all!!

[Robin S]

3 hours ago, rsi said:

is there a hook i could use to process the TextArea before writing to the database?

Here is a recent example of how you can parse HTML content when a page is saved: 

3 hours ago, rsi said:

still i'm interested in how to configure CKE in processwire

Via the field settings: Setup > Fields > [your CKEditor field] > Input > CKEditor Settings

But I'm still not convinced it is necessary to add this class. Not sure if you understood what I was getting at in my last post, but if for instance you are wanting to add this class because you are using the Bootstrap framework you can simply add a line of CSS to apply the same styling as 'img-responsive'.

.cke-content img { max-width:100%; height:auto; display:block; }