Search code examples
reactjstinymcetinymce-5

TinyMCE 5: Is there an out-of-the-box way to enable toolbar buttons when the editor is disabled?


By "out-of-the-box" I mean using TinyMCE 5 properties, events and/or methods. I'm using tinymce-react so I can't use javascript to highjack the DOM like I normally would.

I have an editor that starts in disabled mode until an 'Edit' button is clicked. (The editor uses an iframe, whichever mode that is.) When the editor is disabled, the entire toolbar is also disabled. However, I would like to have a few buttons still functional, like Fullscreen, Source code and Print. Does anyone know if TinyMCE 5 supports this, or anything like it?

I was hoping for an init option like 'readonly_toolbar' but for some reason that doesn't exist, sadly.

Using javascript (I know, I know) I was able to manually set the text editing area to readonly by adding attribute 'contenteditable=false' to the iframe body, but that leaves all buttons functional which is also not what I want. I would then have to add the 'disabled' attribute to all of the buttons I want disabled, which is do-able but unpleasant. But, back to the restriction of working in ReactJS where editing the DOM outside of React is forbidden - this solution is really not ideal at all.

I found two old questions that are essentially duplicates but they are not specifically TinyMCE 5, and they go outside of TinyMCE for the solution. TinyMCE readonly but with print option enabled only has one answer and it's not great, while TinyMCE Enable button while in read only mode has answers along the same lines of my non-React-friendly javascript solution above.


Solution

  • Tiny employee here. Unfortunately no, the read-only mode completely disables the editor including all buttons. We want to improve that to enable preview, print and other non-edit features in read-only mode but I got no dates for you at this time, sorry.