CKEditor basics

7 posts in this topic

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!


Share this post

Link to post
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.

2 people like this

Share this post

Link to post
Share on other sites

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

Share this post

Link to post
Share on other sites
echo "<div class='cke-content'>$page->body</div>";

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

Share this post

Link to post
Share on other sites

perhaps this could work too

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


1 person likes this

Share this post

Link to post
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!! :)

Share this post

Link to post
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; }


1 person likes this

Share this post

Link to post
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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Cody Connor
      I installed the InputfieldCKEditor module and am using the ck editor in all of the fields on my processwire website.  I need to be able to drag images into the CKEditor field so I downloaded a CKEditor plugin called simpleuploads put it into /site/modules/InputfieldCKEditor/plugins/ and added the plugin to the field I am working on.  I have tried doing it many different ways and the plugins still are not working and I have no idea where to go from here.
      I am working with processwire version 3.0.61.
      I am using CKEditor version 4.4.2.

    • By billjoseph
      Weirdest thing just happened to me.  I updated blank site from 3.0.42 to 3.0.61 then started adding fields.  I have two instances of FieldsetOpen areas in the template, and a few CKEditor textareas (both inside those fieldsets and outside). 
      I added an image field to the template and placed it near the top of the template fields.  Once I did that I was unable to toggle either Fieldset, and the CKEditor stopped working.
      When I moved the image field to the bottom of the template fields, the CKEditor loaded, but the fieldsets still wouldn't toggle.  When I deleted the image field, the editor and toggle return to normal.  (Adding a new image field re-introduces the issues.)
      I've tried adjusting the settings on the image field but the result is the same - even with all default settings.  I tried adding an image field to a different template - same result.
      What am I missing here?
    • By holmescreek
      This question has probably been beaten to death - think I'm approaching this wrong. 
      Anyway, I've got a textarea input field that uses ckeditor.
      Under the fields Input section I managed to add my custom style sheet in the 'Custom Editor CSS File (regular mode) section for instance:

      This seems to work fine.
      What I'm trying to do now is add a custom style to the ckeditor styles menu, for instance, called .green_button
      (p.s. in the ckeditor styles.js I added this to the inline section : { name: 'Green Button', element: 'a', attributes: { 'class': 'button' } },
      Ok, onto the problem...
      I notice that PW, by default, is using  /wire/modules/inputfield/inputfieldCKEditor/ckeditor-4.5.10/styles.js
      So, I copied this into /site/templates/js/mystyles.js
      Next, I added the above to the 'Custom Editor JS Styles Set' field, however, it doesn't seem to load myckeditorstyles.js -- rather continues to load the one from the /wire/modules... folder.
      I cleared all history and caching in Safari (also tried Chrome, etc).

      I'm wondering if there is something else I need to do to have PW load my /site/templates/js/myckeditorstyles.js instead of the one in /wire/modules.../ckeditor-4.5.10/styles.js ?


    • By zota
      installing a CKEditor plugin seems easy:
      - download,
      - extract to /site/modules/InputfieldCKEditor/plugins/[folder with the plugin name will sit here/]
      - on admin setup > fields > any field that works with CKEditor > tab Input > scroll down and you will see the new plugin waiting activation:

      Ooops, only shows the default extra plugins...
      What am I missing?
      EDIT: it was a simple permission problem. One should check and change the permissions of downloaded stuff...
    • By Andreas Augustin
      How can I modify CkEditor in Processwire?
      I want to change the output for the uploaded images. Instead of an html <img> tag, I want to insert an Shortcode/Hanna-Code.
      E.g. [[image caption="Some Caption Text" src=""]]
      Can someone help me?