Jump to content

CKEditor basics


rsi
 Share

Recommended Posts

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!



 

Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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!! :)

Link to comment
Share on other sites

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; }

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...