Tinymce not sticky in classic mode in Umbraco 13.2

[thomashdk]

Which Umbraco version are you using? (Please write the exact version, example: 10.1.0)

11.5.0

Bug summary

Richtext editor are not sticky in classic mode - so the toolbar disapear when make longe text in the richtext editor

Specifics

No response

Steps to reproduce

Use the richtext editor -

• set the mode to classic on the datatype.
• try the rich editor and paste a large text

Addingthis to the config are not working or doing anything.

"RichTextEditor": { "CustomConfig": { "toolbar_sticky": true } }

Expected result / actual result

Like in Umbraco 8 (maybe 9) let the toolbar scroll down when writing a lon text.

Umbraco 11

start

Scrolled down

Umbraco 8

start

Scrolled down

Adding this sould maybe make it work:

"RichTextEditor": { "CustomConfig": { "toolbar_sticky": true } }

---

This item has been added to our backlog AB#33389

[github-actions]

Hi there @thomashdk!

Firstly, a big thank you for raising this issue. Every piece of feedback we receive helps us to make Umbraco better.

We really appreciate your patience while we wait for our team to have a look at this but we wanted to let you know that we see this and share with you the plan for what comes next.

• We'll assess whether this issue relates to something that has already been fixed in a later version of the release that it has been raised for.
• If it's a bug, is it related to a release that we are actively supporting or is it related to a release that's in the end-of-life or security-only phase?
• We'll replicate the issue to ensure that the problem is as described.
• We'll decide whether the behavior is an issue or if the behavior is intended.

We wish we could work with everyone directly and assess your issue immediately but we're in the fortunate position of having lots of contributions to work with and only a few humans who are able to do it. We are making progress though and in the meantime, we will keep you in the loop and let you know when we have any questions.

Thanks, from your friendly Umbraco GitHub bot 🤖 🙂

[netcamo]

Hi @thomashdk I hope everything is going well for you!

Thank you for reporting the issue! I have been able to reproduce it and checked that it worked as you expected on v10.7.0
This looks like a regression bug and we will try to pick it up as soon as possible.

Have a wonderful day! 😄

[netcamo]

After more investigation I have found out that this issue first occurs on v11.0.0

[alandraper]

Has there been any progress on this? I just watched my client struggle to get the toolbar to appear at all, making her job impossibly difficult.

There's an empty space where the toolbar should be.

I've found that selecting all the content, cutting it, and pasting it back into the rich text area causes the toolbar to reappear.

grid Looking at the developer tools, I see this element `

`

If I manually delete the class "tox-editor-dock-fadeout" then the toolbar reappears.

[alandraper]

I have a hack to get the toolbar to appear, at least in Chrome.

1. Add a bookmark to your Bookmarks Bar. It doesn't matter to what page because we'll edit it.
2. Right-click on the new bookmark and choose "Edit..."
3. Change the title to "Show Umbraco Rich Text Toolbars"
4. Change the URL to the following
   javascript:document.querySelectorAll(".tox-editor-dock-fadeout").forEach(function (el){el.classList.remove("tox-editor-dock-fadeout")})
5. Click Save

Now, when on an Umbraco Page, just click the button and all the toolbars appear.

[iOvergaard]

Hi @alandraper

I am looking into issues with tinymce in Umbraco 13 (same tinymce version as Umbraco 11 used). Although your first screenshots indicated you were having trouble with all rich text editors, your screenshots in your latest comment seems to show a grid, which leads me to believe you are experiencing the same problem as described in #15515. The problem with the grid layout seems to be happening whenever the option toolbar_sticky is turned on, which it is by default for all grid layout rich text editors. Contrary to your initial issue description, setting this option in appsettings to false should solve it for rich text editors inside a grid layout.

I wonder if you have tried this out in the latest Umbraco 13.1 and could report on which of the issues persist?

[sean-p-m]

Hi @alandraper

I am looking into issues with tinymce in Umbraco 13 (same tinymce version as Umbraco 11 used). Although your first screenshots indicated you were having trouble with all rich text editors, your screenshots in your latest comment seems to show a grid, which leads me to believe you are experiencing the same problem as described in #15515. The problem with the grid layout seems to be happening whenever the option toolbar_sticky is turned on, which it is by default for all grid layout rich text editors. Contrary to your initial issue description, setting this option in appsettings to false should solve it for rich text editors inside a grid layout.

I wonder if you have tried this out in the latest Umbraco 13.1 and could report on which of the issues persist?

I am having the same issue (toolbar missing from rich text editors inside a grid layout). I have installed Umbraco 13.1 RC and can confirm the problem still exists :-(

[iOvergaard]

@sean-p-m Great to hear (not about your experience, of course). I believe we have isolated the fix and there is now a pending pull request for #15515 which describes the problem you are experiencing.

[alandraper]

Yes, it so sounds the same as 15515. I can try the config change on their site. I can't upgrade their site to 13 though. They are my one client who still has DocTypeGridEditor and I think there was a conflict that wouldn't let me upgrade.

[iOvergaard]

@alandraper the proposed workaround should work on Umbraco 11 as well, so please go ahead and try that. Would also be interested to know what kind of conflict you ran into. I know the author of DocTypeGridEditor stopped supporting it, but .NET wise it should be able to run on newer Umbracos. Umbraco 11 reached its end-of-life last year.

[iOvergaard]

This should be fixed with #15595 which we expect to release with Umbraco 13.2. Thanks for reporting this! #h5yr

[thomashdk]

Stille a issue in 13.2.0

[iOvergaard]

Hi @thomashdk

Thanks for reporting back in. We will re-verify the bug report and see what's up!

[thomashdk]

Hi @thomashdk

Thanks for reporting back in. We will re-verify the bug report and see what's up!

Sounds good, thanks.

We have a lot of frustrated clients.. :D

[iOvergaard]

I can confirm that this is still an issue, at least with the sticky_toolbar option. Back before V11 when we still used TinyMCE v4, we had some custom code to make the toolbar sticky. This code didn't work with TinyMCE v6, which we now use, and Tiny had since implemented their sticky_toolbar option. However, I simply cannot make it work with the current layout we have in the backoffice.

Interestingly enough setting inline: true on TinyMCE seems to give the same experience as a sticky toolbar of sorts, and although it doesn't position the toolbar correctly in my opinion, it is still visible within the viewport wherever you are:

Here appearing beneath the editor:

And here appearing at the top of the page when I am scrolled into the middle of an RTE:

We will have to investigate this further as it seems there is something up with the styling since the default TinyMCE configuration toolbar_sticky doesn't seem to work at all - in fact it hides the toolbar entirely.

[chriskarkowsky]

Has there been any progress on this? I just watched my client struggle to get the toolbar to appear at all, making her job impossibly difficult.

There's an empty space where the toolbar should be.

I've found that selecting all the content, cutting it, and pasting it back into the rich text area causes the toolbar to reappear.

grid Looking at the developer tools, I see this element
If I manually delete the class "tox-editor-dock-fadeout" then the toolbar reappears.

I have this exact same issue in 12.2.