How to make Medium Editors Functioning in a Modal

OS info

  • Operating System : Mac OSX 17.5.0
  • Wappler Version : 1.0.0

Problem description

Medium Editor formatting buttons pop up as they should but do not do anything when Medium Editor is in a modal.

https://dashboard.wlstudiotheatre.ca/testmediummodal.php

Same problem here in Windows 10. Have been linking to a new page instead of using a modal. Same problem in DW extension.

Hello guys,
It is the default tabindex="-1" property of bootstrap 4 modals which causes the issue with the editor. Removing it should fix this.

1 Like

And to think that I spent (ashamed to admit) 2 days on trying to solve the problem. Decided on going to another page instead. Thank you for finally giving me a good night’s sleep (hopefully).

3 Likes

There is still a small issue when trying to use the ‘add image’ functionality.
‘+’ sign appears below the modal.

Maybe a style only for the current page that would bring the + sign over the modal.

Thank you

ok not really fixed but close. just added this code inside the ‘head’ of the page that wanted to use the Medium Editor within a Modal.

  <style>
.medium-editor-insertbar{z-index: 1500 !important; position: fixed;}
  </style>

but for some reason sometimes it works and some not.

Thank you

PS. When you edit the Modal from Wappler UI it adds the ‘tabindex=-1’ . This was the reason that it was not working. So just add the css and make sure ‘tabindex’ is not there :slight_smile:

2 Likes

Just now arriving at this issue my.
Question where do I locate to the tabindex=1 to remove it?
Thanks!

In the code view, added to the modal tag.

Thanks found it in the DOM panel!

One more thing.
can you tell me how you fixed this issue with the add image button showing up in the back of the modal. I am having this same issue.

Apologies for bumping this I know this is a really old topic, however this is my exact issue. I have never managed to make my Medium editor buttons actually do anything when inside a modal. They work perfectly when not in a modal and yes I have removed the “tabindex=-1” with no change, I’m really stumped on this one, has anyone encountered problems with this recently?