You need to be logged in to post in the forum - Log In

An active JCE Pro Subscription is required to post in the forum - Buy a Subscription

Support is currently Offline

Official support hours
Monday to Friday
09:00 - 17:00 Europe/London (BST)

Please create a new Ticket and we will get back to you as soon as we can.

#115877 JCE Pro 2.9.60 doesn't work with the Regular Labs Modal-Plugin?

Posted in ‘Editor’
This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Latest post by acwalter on Sunday, 21 January 2024 11:21 GMT

Friday, 19 January 2024 20:29 GMT

acwalter
Hello,

I use the JCE Editor and the "Modal" plugin from Regular Labs with Joomla 4.4.2.

If an image in the JCE editor is given the class "modal" so that the modal plugin is activated in the frontend, the image will from now on be displayed so large in the editor that it overlays everything else. Everything works as expected in the frontend, but a post can no longer be configured in the backend unless I temporarily remove the class again.

I've tried to find a solution in both the JCE editor settings and the plugin settings, unfortunately without success so far. 🙁

What can trigger this behavior?

P.S.: I have already used the JCE editor and the modal plugin in Joomla 3, always without any problems.

Saturday, 20 January 2024 10:50 GMT

Ryan
If an image in the JCE editor is given the class "modal"


"modal" is also a Bootstrap class, so if your template uses Bootstrap, then these classes would be loaded into the editor for styling. They would then be applied to an element that has the class "modal". - https://getbootstrap.com/docs/5.3/components/modal/#examples

I would suggest you speak to RegularLabs about this, and see if they can change the identifier for there modal, perhaps using a data attribute, eg: data-modal="1" or something that won't conflict with Bootstrap.

As a workaround, you can set the Editor Styles option in the JCE Global Configuration to "Default" so the template styles are not loaded into the editor, but you will lose the styling of editor content.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Saturday, 20 January 2024 11:05 GMT

Ryan
Another option is to create a css override for the modal class in the editor, eg: 

.modal {
    position: inherit;
    display: inherit;
    width: inherit;
    height: inherit;
    overflow: inherit;
}
Which template are you using?

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Edited by Ryan on 2024-01-20 11:06 GMT

Sunday, 21 January 2024 11:21 GMT

acwalter
Hello Ryan,

thank you very much for your quick response on a Saturday!

There is an option to change the Regular Labs Modal plugin keyword to any value. This can be done quickly in the plugin, but the class would also have to be revised in all articles, in which it has already been used in the past, which would be more complex.

The workaround you suggested is the solution for me:
After I set the Editor Style Options to "default", all images in the editor are displayed correctly again. I don't need the modal function in the editor itself.

Thank you for this tip and the quick support.

Best regards

Andreas