Programmatically cannot enable Tinymce editor after page load

Programmatically cannot enable Tinymce editor after page load

Hi there,

In my .net MVC app, I have I'm using an editor template where I have initialized the Tinymce editor like this

  1.     (function(){
    
                tinymce.init({
                selector: 'textarea',
                theme: 'modern',
                mobile: { theme: 'mobile' },
                menubar: 'edit insert format table tools help',
                plugins: 'print preview fullpage paste searchreplace autolink directionality visualblocks visualchars fullscreen link table charmap hr toc advlist lists textcolor wordcount imagetools contextmenu colorpicker textpattern help',
                toolbar1: 'formatselect | bold underline italic strikethrough forecolor backcolor | link unlink | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat',
                image_advtab: true,
                browser_spellcheck: true,
                branding: false,
                readonly:true
          });
    
        })();

So when the page loads , contentarea, menubar and toolbar are readonly just like I want. I have three textareas in a view and three checkboxes. When I manually toggle the checkbox, I can toggle the readonly state of Tinymce without any problem.

When my Edit view loads, say chkbox1 is checked and but Tinymce in related textarea is displayed in readonly state. On page load, I would like make the textarea and Tinymce editor active if the related checkbox is checked.  I'm not able to accomplish this. There are no JavaScript errors.

Here is my jQuery code,

  1. $(document).ready(function () {
            if ($('#chkBox1').prop('checked')) {
                $("#textarea1").rules("add", "required");
                tinymce.get('textarea1').setMode('design');
            }
            else {
                tinymce.get('textarea1').setMode('readonly');
                tinymce.get('textarea1').setContent('');
                $("#textarea1").rules("remove", "required");
                $("#textarea1-error").hide();
            }
          });

I hope someone here has used Tinymce and shed some light.

Thanks

Joe