MilenKo

Wrapping text around image CKEditor

Recommended Posts

Hello guys. I feel a bit ashamed of this fact but I just needed to add an image with some text wrapped around it using CKEditor and I simply can't achieve that. I have an image field attached to the template (called images) and it is showing promptly the uploaded images. I am able to manipulate the image and I set its alignment to left side. Then I add some text and I can see in CKEditor that the text is properly surrounding the image. However, once I save the page and view it, it shows the text under the image or only a line is staying asside the image and the rest is under the image again. As far as the field used for the text (body) is set to TextMultiLang and I did not added any text formatters and chose the content type to be HTML/Markup.

In my CSS I've added some of the PW styles for the alignement as per some posts here but that did not help either. Something I am missing again? ;)

 

Spoiler

CKEDITOR-inner.png

 

 

Spoiler

CKEDITOR-frontend.png

 

Share this post


Link to post
Share on other sites

Hi,

I do it this way: in /site/modules/InputfieldCKEditor/styles.js I have:

CKEDITOR.stylesSet.add( 'mystyles', [
 { name: '1/2 left align', element: 'img', attributes: {'class': 'align_left uk-float-left uk-width-1-2@s site-mar-r-10'} },
 { name: '1/2 right align', element: 'img', attributes: {'class': 'align_right uk-float-right uk-width-1-2@s site-mar-l-10'} },
 { name: '1/3 left align', element: 'img', attributes: {'class': 'align_left uk-float-left uk-width-1-3 site-mar-r-10'} },
 { name: '1/3 right align', element: 'img', attributes: {'class': 'align_right uk-float-right uk-width-1-3 site-mar-l-10'} },
 { name: '1/4 left align', element: 'img', attributes: {'class': 'align_left uk-float-left uk-width-1-4 site-mar-r-10'} },
 { name: '1/4 right align', element: 'img', attributes: {'class': 'align_right uk-float-right uk-width-1-4 site-mar-l-10'} },
 { name: 'center image', element: 'img', attributes: {'class': 'align_center uk-align-center'} },
]);

align_left and similar are for the default I copied over from /wire/modules/Inputfield/InputfieldCKEditor/contents.css

uk-float-left and similar are for UIkit 3

This way I do not have to load the whole UIkit 3 css for CKEditor, instead I write my custom rules for the RTE in order the get what will be seen on the frontend. It is some extra work but there are not too many styles needed to be used in the RTE anyway.

  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites

Thanks, @szabesz . Initially I thought it would need some styling for the output, however I was mislead by the appearance of the content inside the editor and thought that I am not doing something properly. Your suggestion seems to be quite easy doable however I should just match the proper classes for bootstrap as I don't use uikit on this project.

  • Like 1

Share this post


Link to post
Share on other sites

Thank @theo . That is what I added to my CSS, however I forgot the fact that CKEditor is not inserting the class automatically so I will have to add the classes using myclass.js approach. Let me see how would that work out,

Share this post


Link to post
Share on other sites

It works perfectly fine now. And yes, @theo it worked with Bootstrap and uikit. Thanks again. I guess I could do the same exercise for styling ordered and unordered lists, block quotes etc.

  • 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 gregory
      Hi guys.
      I would like to show only the first image as a preview of a slideshow. The code below shows the first image but is repeated. Do you know a solution? Thank you
      //Call image foreach($story->galleria as $img) { echo "<img src='{$story->galleria->first()->url}' alt='{$story->galleria->first()->description}'>"; }  
    • By Gadgetto
      Hello,
      is it possible to configure CKEditor to have syntax highlighting enabled in Source and/or Sourcedialog? Coming from MODX i had this feature enabled and now I'm trying to find a solution for PW too.
      I'd like to have both the WysiWyg Editor and the Source editor with syntax highlighting enabled in on field.
      Andy plugins to achieve this?
      Greetings,
      Martin
    • By Smirftsch
      I've got some odd problem adding additional styles to mystyles.js. After reading some and following the article here: https://github.com/ryancramerdesign/ProcessWire/blob/dev/wire/modules/Inputfield/InputfieldCKEditor/README.md#custom-editor-js-styles-set
      I was able to add a custom style. So far so good 😉
      It is displayed in the Styles menu and can be selected there. Now the odd thing starts, if I add a custom style like this:
       
      ... { name: 'Box Top', element: 'span',attributes: { 'class': 'box_top' } }, { name: 'Box Bottom', element: 'span', attributes: { 'class': 'box_bottom' } }  
      it works and can be selected just fine.
      However, if I add this:
      { name: 'Box Top', element: 'div',attributes: { 'class': 'box_top' } }, { name: 'Box Bottom', element: 'div', attributes: { 'class': 'box_bottom' } } It is also displayed, can be selected - BUT - once the edit is saved, it is gone, won't be displayed in the page and won't be shown anymore in the editor as selected style, it goes back to "normal".
       
      Can anyone give me a hint what I missed?
    • By Guy Incognito
      I added some custom styles to the CKeditor menu bar using the example mystyles.js and the PW tutorial. This worked fine for fields when editing on the frontend. But none of our custom styles showed in the backend editor dropdown unless we edited the core copy of mystyles.js in wire/modules.
      Is this correct behaviour, a bug or a mistake on my part? Tried clearing cache, logging in/out etc but the backend ignores our custom styles in the site/modules path.
    • By Robin S
      A pet hate of mine is when an editor uses a paragraph of bold text for what ought to be a heading. When I need to tidy up poorly formatted content like this I will quickly change such lines of text into the heading of the appropriate level, but that still results in markup like...
      <h2><strong>Some heading text</strong></h2> The <strong> has no business being there, but it's a bit of a hassle to remove it because you have to drag a selection around the exact text as opposed to just placing your cursor within the line. That gets tedious if you have a lot content to process.
      I figured there has to be an easier way so started looking into the ACF (Advanced Content Filter) features of CKEditor. What I wanted is a rule that says "strong tags are disallowed specifically when they are within a heading tag". (I guess there could occasionally be a use case where it would be reasonable to have a strong tag within a heading tag, but it's so rare that I'm not bothered about it).
      With the typical string format for allowedContent and disallowedContent there is no ability to disallow a specific tag only when it is within another specific tag - a tag is allowed everywhere or not at all. But I found there is an alternative object format for these rules that supports a callback function in the "match" property. So I was able to achieve my goal with the following in /site/modules/InputfieldCKEditor/config.js:
      CKEDITOR.editorConfig = function(config) { config.disallowedContent = { // Rule for the <strong> element strong: { // Use "match" callback to determine if the element should be disallowed or not match: function(element) { // Heading tag names var headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']; // The parent of the element (if any) var parent = element.parent; if(typeof parent !== 'undefined') { // If there is a parent, return true if its name is in the heading names array return headings.indexOf(parent.name.toLowerCase()) !== -1; } else { // There is no parent so the element is allowed return false; } } } } };  
      Another tip: if you want to debug your allowedContent or disallowedContent rules to make sure they are being parsed and applied successfully you can log the filter rules to the console. For convenience I used /site/modules/InputfieldCKEditor/config.js again.
      // Get the CKEditor instance you want to debug var editor = CKEDITOR.instances.Inputfield_body; editor.on('instanceReady', function() { // Log the disallowed content rules console.log(editor.filter.disallowedContent); });