Question

如何在javascript中禁用/启用编辑tinymce textarea？

我认为我的组件出了问题。我在互联网上找到的所有解决方案都不适合我。

控制器代码为：

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();
        }
    }
}

视图代码为：

    <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>

在视图的布局中，将加载这些脚本：

<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>

控件正确呈现并按预期工作。但是如果我无法检索它，我就不知道如何禁用它。这张照片显示了我身边的渲染。如您所见，组件正确显示（也正常工作），但无论如何我无法检索它：

我到目前为止尝试过：

按照此处的建议获取主动投票人：make readonly/disable tinymce textarea
Activeeditors为null：
- 在此处推荐对编辑进行迭代tinyMCE get editor returns null尽管编辑器.lenght = 3（奇怪，我只有1个文本区域），编辑器[0] = null，编辑器1 = null ，编辑[2] = null：
- 隐藏文字区域，如此处所示[{3}}文字区域始终可见并已启用
- 直接访问$（＆＃34;＃Cabecera_contratos_tinymce＆＃34;）＆gt;无论我设置什么属性。它没有效果。

Answer 1

我终于找到了问题。

尽管我的代码是在tinymce.init之后声明的，但是在tinymce.init结束之前执行它。

因此，针对我的情况的任何人的解决方案是：

管理此活动：http://archive.tinymce.com/wiki.php/Configuration3x:oninit
在活动中，请使用以下内容禁用编辑器：tinymce.EditorManager.execCommand('mceRemoveEditor',true, textarea_id);
要启用编辑器，请使用：tinymce.EditorManager.execCommand('mceAddEditor',true, textarea_id);

Answer 2

请参阅此TinyMCE小提琴，了解如何通过JavaScript获取对编辑器的引用的示例：

HM software manual

这使用了您上面包含的大部分代码，并且可以使用disableAll()方法成功访问编辑器。由于您没有显示所有代码，因此很难说可能是什么问题，但小提琴的工作原理并将有关编辑器的信息返回给JavaScript控制台。

TinyMCE：通过javascript禁用/启用编辑

2 个答案: