I spent a good chunk of yesterday trying to figure out how to change the state of the TinyMCE textbox from readonly to edit mode. Or to set the values to enable and disable the box properly. After much trial, error, and research I found this post which links to this post that explains that it is just not possible to do it cleanly. These posts are a few years old but in the rest of my research I couldn’t find anything that contradicted them. I tried many different workarounds suggested by other people and each one had something that just didn’t work quite right. Here is the brute force solution that I came up with:
I created two TinyMCE editors one that is readonly and one that is not. Then I show and hide them via a button click.
Another problem that I came across is properly showing and hiding the editors. When I tried to use the built in options they would not show properly when toggling. I had problems with the textareas being set to visible. To solve this problem I wrapped the original textarea inside a div and I show and hide the divs instead of the actual text area.
I like so many things about the TinyMCE editor but these problems were very frustrating and took up far too much of my time.
One thought on “#TinyMCE: Disable/Enable Brute Force Solution”
[…] When my TinyMCE boxes load I find that there is brief moment when it flickers, the users don’t like that. Looking closely I found that the flicker is a brief glimpse of the underlying HTML that is rendered before the TinyMCE box finishes loading and is displayed. To fix it I do some fancy hide/show work. Initially the page is loaded with the control hidden, then when it is done loading it shows it. Since I had the code already put together, I left in an example of a read-only version of the editor. […]