rsi

CKEditor basics

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!



 

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.

  • Like 2

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

 

  • Like 1

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

 

  • Like 1

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 sebr
      Hi
      I'm working on my tempate to provide an AMP (Accelerated Mobile Page) template version.
      But there is a problem with CKEditor. AMP needs width AND height attributes to all images. Then when I instert an image in my body field from CKEditor the source code juste includes width attributes.
      How can I add automaticaly height width CKEditor ? Or if not possible width CKEditor, how can I dow from URL image to get height image ?
      Thanks in advance
    • By Jon
      Hello All,
      One of my clients is having problems with the alignment of images with captions within the body. The problem is once the image has been inserted into the body and we try and move it by drag and drop this only moves the image and leaves the caption behind.
      Anyone know of a fix for this so the whole figure is moved rather than just the image? 
      Cheers
      Jon
    • By Robin S
      Headings Case
      A plugin for CKEditor fields in ProcessWire CMS/CMF. Adds a toolbar button for changing the case of all headings or selected headings between sentence case and title case.
      This is useful when you are copy/pasting text from a document that has been supplied with an inconsistent or incorrect system of capitalisation.
      Installation
      The plugin folder must be named "headingscase" – if needed, rename the folder to remove the "-master" suffix added by GitHub. Copy the "headingscase" folder to /site/modules/InputfieldCKEditor/plugins/
      In the field settings for each CKEditor field that you want to activate the plugin for:
      Check the "headingscase" checkbox at Input > Plugins > Extra Plugins Add "HeadingsCase" at Input > CKEditor Settings > CKEditor Toolbar Usage
      To change the case of all headings, click the toolbar button with no text selected in CKEditor. The first click applies sentence case; the second click applies title case.
      To change the case of a single heading, select all or part of the heading in CKEditor before clicking the toolbar button.

      There can be situations where the results need manual correction: proper names, acronyms, etc.
      Exceptions for small words
      Certain short English prepositions and conjunctions (three letters or less) are excluded from capitalisation when title case is applied. Edit the exceptions array in the plugin source code if you want to customise this list of exceptions.
       
      https://github.com/Toutouwai/headingscase
    • By Jonathan Lahijani
      Looks like CKEditor 5 is on the way:
      https://ckeditor.com/blog/CKEditor-5-A-new-era-for-rich-text-editing/
      https://news.ycombinator.com/item?id=15497972 (HackerNews comments of the above article)
      Home page:
      https://ckeditor.com/
      Demo:
      https://ckeditor5.github.io/
      Feature Video:
       
    • By euphoricrun
      I was wondering if there's a way to set an absolute path instead of relative when linking to a file in CKEditor? Any help would be appreciated.