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#33388

[github-actions[bot]]

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 :robot: :slightly_smiling_face:

[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 commented 11 months ago

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 commented 10 months ago

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 commented 10 months ago

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 commented 10 months ago

@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 commented 10 months ago

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 commented 10 months ago

@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 commented 10 months ago

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

thomashdk commented 8 months ago

Stille a issue in 13.2.0

iOvergaard commented 8 months ago

Hi @thomashdk

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

thomashdk commented 8 months ago

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 commented 8 months ago

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 commented 7 months ago

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.

mikeranscombe commented 6 months ago

Is this issue being addressed? We've just upgraded from v10 to v13.3.1 and this issue is still occuring on the vanilla RTE; the toolbar won't stay at the top of the RTE viewport but moves off when it is scrolled.

We've implement a CSS/config workaround that allows for a "floating" toolbar but that is just annoying to our content managers, as it gets in the way when editing content and is a bit flakey - it can disappear whilst editing.

asawyermarathon commented 6 months ago

This is also a serious issue for us in 13.3.2. I've found the best workaround is to set a static RTE height, 630 seems right on a 1080p screen.

I've tried enabling toolbar sticky:

"RichTextEditor": {
  "CustomConfig": {
    "toolbar_sticky": "true" //buggy, not applying until height changes
  }
},

this, coupled with custom css:

ng-form[name="infiniteEditorForm"] .tox-editor-header {
    max-width: 800px !important;
    position: fixed !important;
    border: 1px solid #d8d7d9 !important;
    margin-left: -1px !important;
    margin-top: -1px !important;
}
ng-form[name="infiniteEditorForm"] .tox-sidebar-wrap {
    margin-top: 87px !important;
}

This almost works, but unfortunately, the height is not properly computed until the RTE height changes. This means the toolbar isn't sticky until an editor enters text that changes the RTE height.

My guess is that the tinymce initialization event is not calculating the RTE with the sticky rule.

oscar-zm commented 5 months ago

To add onto asawyermarathon; I'm also experiencing this issue on Umbraco 13.3.1. The toolbar in the Rich Text Editor is not sticky, which makes editing longer texts quite cumbersome as I have to scroll back up frequently to access the toolbar.

Has there been any progress on resolving this issue, or are there any official workarounds or updates available? Your help and any insights would be greatly appreciated!

wadrschall commented 5 months ago

A clarification on the functionality we are seeing in regards to the sticky menu in 13.2+ versions.

If you are using the "toolbar_sticky" appconfig option, it does technically work when using the richtext property directly on a document type. There does appear to be a bug however as it doesn't line up directly with the text area:

If you use the RichText editor/property in a block list/element, the stick ability doesn't appear to work at all.

Is this what everyone else is seeing? Is there a roadmap to get this addressed fully?

jcrittenden commented 4 months ago

Still an issue in 13.3.0.

I believe this is related to this bug #16829 because the RTE also grows with the content without a max-height ever.

My temporary workaround is to put a max-height on the rte container. Then inject an "overflow-y: scroll" into the rte.

Backoffice CSS: .tox.tox-tinymce { max-height: 500px; }

TinyMCE CSS: body#tinymce { overflow-y: scroll !important; }

Injected by appsettings: "RichTextEditor": { "CustomConfig": { "content_css": "/css/RTEworkaround.css" } }

iOvergaard commented 1 week ago

Hi everyone, To summarise what I have understood from the conversation: The issue seems to arise because the editor does not have a fixed height by default in Umbraco, which creates a race condition where TinyMCE cannot calculate where to place the sticky toolbar.

As stated before, we used to override the CSS in the older version of TinyMCE to make this work as it was not a native feature. It has since become a native feature in TinyMce 6, but it has never worked properly in Umbraco.

We'd be happy to take this up again and give it another stab, but I am not sure whether we can solve this without workarounds seeing, that it would probably require some kind of fixed height, which would cause trouble for the Auto Height feature we also need to support. I am wondering if some of it could be toggleable to let users decide on the behavior they want.

I will make sure this gets included in a development sprint.

leekelleher commented 1 day ago

Follow up on this, I'd been investigating if we can support toolbar_sticky with the "autoresize" (auto-height) feature, but so far, my attempts have been unsuccessful. 😖

• © Githubissues.
• Githubissues is a development platform for aggregating issues.

[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.

[mikeranscombe]

Is this issue being addressed? We've just upgraded from v10 to v13.3.1 and this issue is still occuring on the vanilla RTE; the toolbar won't stay at the top of the RTE viewport but moves off when it is scrolled.

We've implement a CSS/config workaround that allows for a "floating" toolbar but that is just annoying to our content managers, as it gets in the way when editing content and is a bit flakey - it can disappear whilst editing.

[asawyermarathon]

This is also a serious issue for us in 13.3.2. I've found the best workaround is to set a static RTE height, 630 seems right on a 1080p screen.

I've tried enabling toolbar sticky:

"RichTextEditor": {
  "CustomConfig": {
    "toolbar_sticky": "true" //buggy, not applying until height changes
  }
},

this, coupled with custom css:

ng-form[name="infiniteEditorForm"] .tox-editor-header {
    max-width: 800px !important;
    position: fixed !important;
    border: 1px solid #d8d7d9 !important;
    margin-left: -1px !important;
    margin-top: -1px !important;
}
ng-form[name="infiniteEditorForm"] .tox-sidebar-wrap {
    margin-top: 87px !important;
}

This almost works, but unfortunately, the height is not properly computed until the RTE height changes. This means the toolbar isn't sticky until an editor enters text that changes the RTE height.

My guess is that the tinymce initialization event is not calculating the RTE with the sticky rule.

[oscar-zm]

To add onto asawyermarathon; I'm also experiencing this issue on Umbraco 13.3.1. The toolbar in the Rich Text Editor is not sticky, which makes editing longer texts quite cumbersome as I have to scroll back up frequently to access the toolbar.

Has there been any progress on resolving this issue, or are there any official workarounds or updates available? Your help and any insights would be greatly appreciated!

[wadrschall]

A clarification on the functionality we are seeing in regards to the sticky menu in 13.2+ versions.

If you are using the "toolbar_sticky" appconfig option, it does technically work when using the richtext property directly on a document type. There does appear to be a bug however as it doesn't line up directly with the text area:

If you use the RichText editor/property in a block list/element, the stick ability doesn't appear to work at all.

Is this what everyone else is seeing? Is there a roadmap to get this addressed fully?

[jcrittenden]

Still an issue in 13.3.0.

I believe this is related to this bug #16829 because the RTE also grows with the content without a max-height ever.

My temporary workaround is to put a max-height on the rte container. Then inject an "overflow-y: scroll" into the rte.

Backoffice CSS: .tox.tox-tinymce { max-height: 500px; }

TinyMCE CSS: body#tinymce { overflow-y: scroll !important; }

Injected by appsettings: "RichTextEditor": { "CustomConfig": { "content_css": "/css/RTEworkaround.css" } }

[iOvergaard]

Hi everyone, To summarise what I have understood from the conversation: The issue seems to arise because the editor does not have a fixed height by default in Umbraco, which creates a race condition where TinyMCE cannot calculate where to place the sticky toolbar.

As stated before, we used to override the CSS in the older version of TinyMCE to make this work as it was not a native feature. It has since become a native feature in TinyMce 6, but it has never worked properly in Umbraco.

We'd be happy to take this up again and give it another stab, but I am not sure whether we can solve this without workarounds seeing, that it would probably require some kind of fixed height, which would cause trouble for the Auto Height feature we also need to support. I am wondering if some of it could be toggleable to let users decide on the behavior they want.

I will make sure this gets included in a development sprint.

[leekelleher]

Follow up on this, I'd been investigating if we can support toolbar_sticky with the "autoresize" (auto-height) feature, but so far, my attempts have been unsuccessful. 😖