Disable the entire Redactor.js WYSIWYG editor.

Question

As you can disable the <textarea disabled>...</textarea> component, I would like to disable the editor of the editor, but still display it on my page.

I would expect Redactor to read the disabled attribute in the text box that I initialize, and disable the editor as needed, but it does not work and instead creates a fully functional editor.

 <textarea class="redactor" disabled></textarea> ... <script type="text/javascript"> $(function () { $('.redactor').redactor(); }); </script> 

Is there an additional API command or workaround that I can use to create a disabled editor? An easy way to disable and enable it would be preferable. I can not find anything in the Redactor documentation or API on how to do this.

I am using Redactor 9.1.9, but I am ready to upgrade if necessary. Thanks!

Answer 1

I had the same problem when I needed to enable / disable Redactor in certain situations. Ended up with something like this: http://imperavi.com/redactor/examples/click-to-edit/

In this example, by clicking the 'enable' Redactor text box, loading it and clicking save, disable it by destroying it.

In your example, $(".redactor").redactor('destroy') will remove the bells and whistles of Redactor and leave you with the text box disabled. $(".redactor").redactor() will enable it again.

Not sure if this is the best solution, but as you already mentioned, their API does not seem to have another way to do this.

Answer 2

If you want to disable the editor, try setting the contenteditable attribute to false . If you check the source code in a browser (for example, with Firebug), you will see that the div that the editor wraps has the attribute contenteditable="true . So try changing this using jQuery, for example:

$ ('. redactor-editor'). attr ('contenteditable', 'false');

or Angular (in my case):

angular.element ('. redactor-editor'). attr ('contenteditable', 'false');

You can try to do this with timeout to make sure that the content from the editor is fully generated and that you have access to its attributes.

Answer 3

To disable:

 element.redactor('core.editor').attr('contenteditable', 'false'); 

To turn on

 element.redactor('core.editor').attr('contenteditable', 'true');