TinyMCE: disable/enable editing by javascript

Question

How can I disable/enable editing a tinymce textarea in javascript?

I think i have something wrong with my components. All the solutions I have found on internet, don't work on my side.

The controller code is:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace #####.Controllers
{
    public class PruebaController : Controller
    {
        // GET: Prueba
        public ActionResult Index()
        {
            return View();
        }
    }
}

The view code is:

    <textarea class="mceEditor" id="Cabecera_contratos_tinymce" name="content">sakjdgfaskdjgfdgjsdjsquoagsd</textarea>

<script>
        tinymce.init({
            mode : "exact",
            elements: "Cabecera_contratos_tinymce",
            theme: "modern",
            entity_encoding: "raw",
            width: "100%",
            plugins: [
                 "link paste code",
                 "preview",
                 "searchreplace wordcount visualblocks visualchars fullscreen insertdatetime nonbreaking",
                 "table contextmenu directionality"
            ],
            extended_valid_elements: "img[*],i[*],div[*]",
            paste_word_valid_elements: "b,strong,i,em,h1,h2,a[href|name|target],p",
            relative_urls: false,
            toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link | preview fullscreen code" //| forecolor backcolor emoticons
        });

        debugger;
        var theEditor = tinymce.get('Cabecera_contratos_tinymce');
        //At this point theEditor=null. So the next instruction throws an exception
        var theContent = theEditor.getContent();
        $('#Cabecera_contratos_tinymce').attr("disabled", true);
</script>

In the layout of the view, these scripts are loaded:

<script src="/Scripts/kendo/2015.2.902/jquery.min.js"></script><style type="text/css"></style>
    <script src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <script src="/Scripts/kendo/2015.2.902/jszip.min.js"></script>
    <script src="/Scripts/kendo/2015.2.902/kendo.all.min.js"></script>
    <script src="/Scripts/kendo/2015.2.902/kendo.aspnetmvc.min.js"></script>
    <script src="/Scripts/kendo.modernizr.custom.js"></script>


    <script src="/Scripts/kendo/kendo.culture.es-ES.min.js"></script>

    <script src="/Scripts/jquery.maskedinput.min.js"></script>

    <link href="/Content/bootstrap.min.css" rel="stylesheet">
    <script src="/Scripts/bootstrap.min.js"></script>
    <script src="/Scripts/jquery.cookie.js"></script>
    <link href="/Content/hover-min.css" rel="stylesheet">

    <script src="/Scripts/sindi.js"></script>
    <script src="//tinymce.cachefly.net/4.1/tinymce.min.js"></script>

    <script type="text/javascript">

        //set current to the "en-GB" culture script
         kendo.culture("es-ES");
    </script>

The control render correctly and works as expected. However if i can't retrieve it, i don't know how to disable it. This picture shows the rendering on my side. As you can see, the component is displayed correctly (also works correctly), but I cannot retrieve it anyway:

I tried so far:

• Get activeeditor as recomended here: make readonly/disable tinymce textarea
  Activeeditors is null:

  • Iterate over editors as recomended here tinyMCE get editor returns null Despite of editors.lenght = 3 (strange, i only have 1 text area), editor[0] = null, editor1 = null, editor[2] = null:

  • Hide text area, as recomended here make readonly/disable tinymce textarea Text area is always visible and enabled

  • Access directly to $("#Cabecera_contratos_tinymce") > No matter what property i set. It has no efect.

Answer 1

I finally found the problem.

Despite my code it's declared after tinymce.init, it is executed before tinymce.init ends.

So the solution for anyone on my situation is:

1. Manage this event: http://archive.tinymce.com/wiki.php/Configuration3x:oninit
2. On the event, disable the editor with: tinymce.EditorManager.execCommand('mceRemoveEditor',true, textarea_id);
3. To enable the editor use: tinymce.EditorManager.execCommand('mceAddEditor',true, textarea_id);

Answer 2

Please see this TinyMCE fiddle for an example of how to get a reference to the editor via JavaScript:

http://fiddle.tinymce.com/Oqfaab/1

This uses most of the code you included above and can successfully access the editor in the disableAll() method. As you don't show all of your code it is hard to say what might be the issue but the fiddle works and returns information about the editor to the JavaScript console.