Make TinyMCE readonly depending on the textarea's readonly property in AngularJS?

Question

I need to make a read-only TinyMCE Editor. Can this be achieved using the readonly property of the textarea element instead of dealing with the TinyMCE's internal API's?

I am using TinyMCE 4, AngularJS and the ui-tinymce plugin and here is what I am doing currently:

$scope.tinymceOptions = {

    setup: function(editor) {
        // only the focus event worked in my app
        editor.on('focus', function(event) {
            var editor = event.target;
            if (editor.readonly === true) {
                event.target.setMode('readonly');
            }
        })
    }
}

Is there a better way to do this? The "focus" event work in my app but any on initialization event would be better.

It would have been nice if something like the below worked automatically. But it doesn't work even in the standard TinyMCE fiddle (without AngularJS):

<textarea readonly ui-tinymce ng-model="tinymceModel"></textarea>

Answer 1

If you want to be able to place an attribute on the textarea tag and have ui-tinymce set the editor to readonly mode you would need to address that with the developer of the ui-tinymce directive.

That directive is released under the MIT license so you can (as an alternative) modify the source code as needed to address your requirements.