Medium Editor in Modal does not work

Wappler Version : 4.9
Operating System : Windows
Server Model: PHP
Bootstrap Version: 5

How to reproduce

<div class="modal" id="modal1" is="dmx-bs5-modal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="form2">
            <div class="form-group mb-3">
                <label for="textarea2" class="form-label">Your text</label>
                <textarea id="textarea12" class="form-control" is="dmx-medium-editor"></textarea>
            </div>
        </form>
      </div>
    </div>
  </div>

Work Around

Remove the Close button as in

<div class="modal" id="modal1" is="dmx-bs5-modal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
      </div>
      <div class="modal-body">
        <form id="form2">
            <div class="form-group mb-3">
                <label for="textarea2" class="form-label">Your text</label>
                <textarea id="textarea12" class="form-control" is="dmx-medium-editor"></textarea>
            </div>
        </form>
      </div>
    </div>
  </div>
1 Like

This is even worse than I had initially thought. If the Medium editor is preceded by other form inputs, then the toolbar does not function.

This is also true for Node applications.

Has anything been done yet to fix this functionality? I still cannot get any text editors to work within modals. Frustrating

Got medium editor ALMOST to work on desktop browsers
but toolbar obscured by cut, copy, paste etc toolbar when selecting on mobile devices…
and update styling does not show in text area…
:frowning:

General thought as I see this is an ongoing thing for others as well:

I find 99% of these JS content editors to be an endless nightmare, no matter what solution we’ve tried to use them with (aka, not just in Wappler).

I try to approach any user input using template-style inputs via a styled form wherever possible. This allows the data to be much more useful and granular for my purposes and allows users to just type in content without worrying about style (or being able to inject anything).

It saves a lot of hassle when sanitizing inputs, too - sanitizing the output from JS editors is a whole additional hurdle when you do get them working reliably across all devices.

The killer for me is that once you get it working in your environment, just try it on an iPad or an Android device… we have had the best luck with https://trix-editor.org/ when we needed something quick and dirty that just worked everywhere, but that may be because I was familiar with it from years of use. Unfortunately – or fortunately, if you hate updates – it hasn’t seen an update in almost 2 years.

Still works for us, though. We’ve also had situations where we offloaded the input and sanitization to https://tiny.cloud before their prices went up.

2 Likes

Hi Nomad,
Checked out trix, looks great, tried to find info on adding youtube links, adding and removing buttons but couldn’t find anything…there’s a lot of videos out there for rails but not js, html wappler implementation.

sanitizing the output from JS editors is a whole additional hurdle

I understood that prepared statements would avoid any issues with sql injection, is this not the case?

Do you mean to have a card appear when someone adds a YouTube link in the text within Medium/Summernote/etc?

If so, you’d need to do this yourself manually. It wouldn’t be hard, just not built in to Trix.

https://gist.github.com/bachmeil/7c19e72b9a5c49a85e8cecb0b7a7f3ca#file-simple-editor-html I would recommend starting here, as it was the simplest template to begin with (if using Trix; you’ll need to set up bindings via DMX bind in code)

Although you my be correct, better safe than sorry - especially if allowing HTML input. Here’s my approach and here’s a comment from patrick re: sanitizing if helpful :slight_smile:

1 Like

Thanks Nomad your comments have been really helpful.
Had a look at sight engine looks like something I could implement at a later stage.

In terms of sql injection, if I carry out server side encryption on the the html before updating the db
would I be correct in thinking this would make safe any input from js editors or would this be unnecessary?

1 Like

That’s a fantastic question, but not one I know the answer to unfortunately. Generally I try to validate on input (be sure email address is an email, etc.) and sanitize on output, but that can be a weird balance when you’re dealing with a content generator like these HTML editors.

I think if you are consider going through the step of encrypting the data just for this purpose, you may instead be use something like DOMPurify as it will be less work for the server

Worth considering just sanitizing on output sometimes – otherwise, your sanitize step on every save could cause issues (for example, Summernote keeps saving X but you’re stripping X out on every save, causing a weird issue when repeatedly saving – just an example of why it can be better sometimes to leave Summernote’s output data alone somewhere in the DB and just sanitize whatever is being used for output)

1 Like

Just to pitch in here, I’m getting the same issues with Medium/Summernote in an offcanvas page I’m working on. It wont work for me either.

In addition, having wrestled with Summernote a lot over the years, this is great advice: