Disable Whole Redactor.js WYSIWYG Editor
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!
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.
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.
To disable:
element.redactor('core.editor').attr('contenteditable', 'false');
To enable
element.redactor('core.editor').attr('contenteditable', 'true');