Jump to content

CKEditor - How to automatically add CSS classes to HTML tags for outputting them to the front-end?


LAPS
 Share

Recommended Posts

I am using ProcessWire 3.0.62 and Bootstrap 4.

I have a CKEditor input field where, for example, I can add the <blockquote> HTML tag by clicking the related blockquote button of CKEditor. The CKEditor itself generates the following source code:

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

In the Admin Edit Page view of a page using the CKEditor input field I can add the <blockquote> and see that it is properly outputted within the input field with pre-defined styling. However, it outputs just the <blockquote> tag, without any CSS.

I would like to output the <blockquote> and format it "a là Bootstrap way" (<blockquote class="blockquote">) so that the output should be something as follows:

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

In the Admin Edit Field view of the CKEditor there are lots of options (e.g. Extra Allowed Content, Custom Editor CSS File, Custom Editor JS Styles Set, Custom Config Options, etc.) and I tried to set someones, but without success for outputting the <blockquote class="blockquote"> as above, automatically (i.e. auto-adding the CSS class 'blockquote' when I click the blockquote button of CKEditor).

Is it possible to make that by using PW-CKEditor? Is it the right way to proceed?

Link to comment
Share on other sites

One way to go about it is to use a custom style, you can define inside the site's InputfieldCKEEditor's folder.

Instructions here: https://github.com/processwire/processwire/blob/master/wire/modules/Inputfield/InputfieldCKEditor/README.md#custom-editor-js-styles-set. So after setting up the path, the config for the blockquote style would look something like this:

CKEDITOR.stylesSet.add( 'mystyles', [ 
  { name: 'Bootstrap Blockquote', element: 'blockquote', attributes: { 'class': 'blockquote' } },
] );

You have to actually have the cursor over the formatted blockquote text in the editor for the style option to show. (that is, if you are on a h1, the style won't be available in the dropdown)

In the same GitHub page there are instructions to actually make the blockquote look as your custom style with a custom css file, might be useful.

 

Link to comment
Share on other sites

Hi @elabx,

thank you for your reply.

I followed the linked instruction for CKEditor settings:

5a631ad929b63_CKEditorsettings.thumb.png.cc488cf9d92a3a52f11738a52cd888cb.png

I also added the <PW ROOT>/site/modules/InputfieldCKEditor/mystyles.js file but with one style for testing:

CKEDITOR.stylesSet.add( 'mystyles', [
 { name: 'Inline Code', element: 'code' }
]);

However, in the Edit Page view the Styles menu lists items that I didn't set for (e.g. "Small"):

5a631bbcecac0_Stylesmenu.png.cf1ecb31b93a7db58c002437d521fb60.png

 What could be the problem?

 

Link to comment
Share on other sites

You can also use the following code in your site/ready.php:

<?php
if($page->template->hasField('name-of-your-ckeditor-field')){
  $string = $page->name-of-your-ckeditor-field;
   //create string replace for blockquote
  $string = str_replace('<blockquote>', '<blockquote class="blockquote">', $string);
  //here you can add further manipulations....
  //..............
  //finally set the value back with manipulations
  $page->name-of-your-ckeditor-field = $string;
}

Replace "name-of-your-ckeditor-field" with the name of your field.

In this case you can use the default blockquote button from CKEditor.

Best regards

  • Like 8
Link to comment
Share on other sites

9 hours ago, elabx said:

@LAPS browser cache maybe?

The browser cache was the problem. After clearing the cache, in the Edit Page view the Styles menu lists items that I set for it:

CKEDITOR.stylesSet.add( 'mystyles', [
 { name: 'Inline Code', element: 'code' }, 
 { name: 'Inline Quotation', element: 'q' },
 { name: 'Blockquote', element: 'blockquote', attributes: { 'class': 'blockquote' } },
 { name: 'Small', element: 'small' },
 { name: 'Deleted Text', element: 'del' },
 { name: 'Cited Work', element: 'cite' }
] );

However, in order to  make the <blockquote> to have the class="blockquote" I have to make more actions that it could be needed:

  1. Click the "Block Quote" button in the CKEditor menu.
  2. Focus on the "block quoted" text and select the "Object Styles > Blockquote" item from the Styles menu.

Is there a way to add <blockquote class="blockquote"> within the CKEditor content avoiding the second action?

Link to comment
Share on other sites

17 minutes ago, LAPS said:

Is there a way to add <blockquote class="blockquote"> within the CKEditor content avoiding the second action?

Yes, if you use my code a view posts above. It works as a textformatter and adds the class automatically on the frontend everytime you use the blockquote tag. You have only to click once on the blockquote button.

  • Like 2
Link to comment
Share on other sites

  • 9 months later...

Resurrecting the old topic but...

When I was following these steps, I was getting the error in the console 'mystyles is already defined'. The styles would sometimes load and sometimes wouldn't regardless of browser cache. So renaming mystyles did the trick. 

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

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...