TinyMCE Insert/Edit Modal Window without editable fields

PHPMaker General Discussion (PHPMaker)
1

In editable fields with TinyMCE enabled, the modal windows that opens when executing the “Insert → Link… (Ctrl+K)” commands, the fields URL, Text to Display and Title are not editable.

Is there any suggestion on how to make these fields editable?

Thank you

2

They are editable, you can enter info manually. If you are a registered user, you may also use the FileManager extension to select file.

3

I am a registred user with the latest version of PHPmaker.

I tried to enter info manually but it doesn’t work. Once the mouse is over a field, it changes to the cursor icon, but clicking the mouse button does not activate the field for editing (ie no cursor symbol in the editable field). Using the keyboard to enter info is without effect.

I tried on Firefox, Chrome an Edge on two different Windows machines without success. Also on localhost and on an online instance. Everywhere the same problem.

4

Which version are you using? I cannot reproduce with v2025.

If you are a registered user, you better enable FileManager, then make sure you re-generate all scripts and then press Ctrl + F5 in your browser to reload all *.js.

Press F12 in your browser and check if there is any JavaScript errors.

5

I use v2025.12 and I enabled Filemanager (which works perfectly)

Again I tested on Edge, Firefox and Chrome. Mostly there was no error found but only in Chrome in the default profile (which is not logged in to a Google-Account), after Ctrl+F5 on the list page there is this error here:

rgsbackloglist:262 Unchecked runtime.lastError: The message port closed before a response was received.

The error is located at the DIV opening Tag :

...

    <div class="wrapper ew-layout">
        <!-- Main Header -->
        <!-- Navbar -->
        <nav class="main-header navbar navbar-expand navbar-red navbar-dark border-bottom-0">
            <div class="container-fluid">
                <!-- Left navbar links -->
                <ul id="ew-navbar" class="navbar-nav">
                    <li class="nav-item d-block">
                        <a class="nav-link" data-widget="pushmenu" data-enable-remember="true" data-ew-action="none">
                            <i class="fa-solid fa-bars ew-icon"></i>
                        </a>
                    </li>
                    <a class="navbar-brand d-none" href="#" data-ew-action="none">
                        <span class="brand-text">Spacebook</span>
                    </a>
                </ul>
                <!-- Right navbar links -->
                <ul id="ew-navbar-end" class="navbar-nav ms-auto"></ul>
            </div>
        </nav>
        <!-- /.navbar -->
        <!-- Main Sidebar Container -->

...

Though a specific js error was not found.

However, I tested the other modal forms as well. Everywhere there is the same problem except the Ctrl+F command which works as expected.

Further search brought me to a similar problem discussed on StackOverflow:

In this case the problem was solved by setting a colorbox option trapFocus: false. The solution is described here:

I found the answer once I narrowed down the actual issue was that I was loading the TinyMCE into a jquery.colorbox popup. Colorbox prevents any type of focus event/action to happen outside of its defined container. Where as TinyMCE pops its stuff up through iframes, not actually in the colorbox container.

the fix was simple: in colorbox options set trapFocus: false and all works as it should. Understand tho, this means the user can tab out of the focused colorbox to elements behind the overlay.

could this be related?

6

The JavaScript you posted is probably unrelated because it occurred in “rgsbackloglist” which is probably your List page, but TinyMCE should be in your Add/Edit page.

Your problem with loading TinyMCE in colorbox was related to the focus problem. Did you use modal dialog for the Add/Edit page? If so, there may be similar problem with Bootstrap modal. Bootstrap modal also has a focus option (default is true), you may try add data-bs-focus="false" to the <div id="ew-modal-dialog"> (in layout.php). However, note that if you don’t focus the modal, there may be some undesired effect, e.g. the user could still tab into the background content, which breaks the expected “focus trap” behavior by Bootstrap.

7

Indeed, the problem is related with the modal dialog option for the Add/Edit page. I disabled it and the Add/Edit pages work as expected.

Setting data-bs-focus="false" is not really an option as it breaks the “focus trap” as you noted.

Could there be another way to get TinyMCE to work correctly in a modal window without loosing the “focus trap”?