Disable Whole Redactor.js WYSIWYG Editor

Question

Like you can disable a <textarea disabled>...</textarea> component, I would like to disable a redactor editor, but still display it on my page.

I would expect Redactor to read the disabled attribute on the textarea I am initializing, and disable the editor as appropriate, but it does not work and creates a fully functional editor instead.

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

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

I'm using Redactor 9.1.9, but am willing to upgrade if necessary. Thanks!

Answer 1

If you want to disable the editor, please try to set the contenteditable attribute to false. If you check the source code in the browser (with Firebug for example), you will see that the div which wraps the editor has the contenteditable="true" attribute. So try to change this with 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 a timeout in order to make sure the content from the editor is fully generated and you have access to its attributes.

Answer 2

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

In that example, clicking the textarea 'enables' Redactor by loading it and clicking save 'disables' by destroying it.

With your example, $(".redactor").redactor('destroy') would remove the Redactor bells and whistles and leave you with a disabled textarea. $(".redactor").redactor() would enable it again.

Not sure if it's the best solution but like you mentioned, their API doesn't appear to have a different way to do it.

Answer 3

To disable:

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

To enable

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