LAPS Posted January 19, 2018 Share Posted January 19, 2018 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 More sharing options...
elabx Posted January 20, 2018 Share Posted January 20, 2018 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 More sharing options...
LAPS Posted January 20, 2018 Author Share Posted January 20, 2018 Hi @elabx, thank you for your reply. I followed the linked instruction for CKEditor settings: 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"): What could be the problem? Link to comment Share on other sites More sharing options...
Juergen Posted January 20, 2018 Share Posted January 20, 2018 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 8 Link to comment Share on other sites More sharing options...
elabx Posted January 21, 2018 Share Posted January 21, 2018 @LAPS browser cache maybe? Link to comment Share on other sites More sharing options...
LAPS Posted January 21, 2018 Author Share Posted January 21, 2018 On 1/21/2018 at 2:14 AM, elabx said: @LAPS browser cache maybe? Expand 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: Click the "Block Quote" button in the CKEditor menu. 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 More sharing options...
Juergen Posted January 21, 2018 Share Posted January 21, 2018 On 1/21/2018 at 11:59 AM, LAPS said: Is there a way to add <blockquote class="blockquote"> within the CKEditor content avoiding the second action? Expand 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. 2 Link to comment Share on other sites More sharing options...
gr00__ Posted October 24, 2018 Share Posted October 24, 2018 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 More sharing options...
pwired Posted October 25, 2018 Share Posted October 25, 2018 Quote So renaming mystyles did the trick. Expand I have read the same issue in older posts also Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now