Open thomashdk opened 10 months ago
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 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:
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! 😄
After more investigation I have found out that this issue first occurs on v11.0.0
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.
I have a hack to get the toolbar to appear, at least in Chrome.
javascript:document.querySelectorAll(".tox-editor-dock-fadeout").forEach(function (el){el.classList.remove("tox-editor-dock-fadeout")})
Now, when on an Umbraco Page, just click the button and all the toolbars appear.
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?
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 tofalse
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 :-(
@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.
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.
@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.
This should be fixed with #15595 which we expect to release with Umbraco 13.2. Thanks for reporting this! #h5yr
Stille a issue in 13.2.0
Hi @thomashdk
Thanks for reporting back in. We will re-verify the bug report and see what's up!
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
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.
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.
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.
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.
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!
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?
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" } }
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 -
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_