Question

我有多个Tiny MCE编辑器，我试图禁用编辑。我尝试了多种变体：

if(@Model.hasRegular.ToString().ToLower()) 
        {
          tinymce.get('#rte').getBody().setAttribute('contenteditable', false);
        }
        if(@Model.hasSmall.ToString().ToLower())
        {
          tinymce.get('#rteSmall').getBody().setAttribute('contenteditable', false);
        }
        if(@Model.isOneSize.ToString().ToLower())
        {
          tinymce.get('#rteOneSize').getBody().setAttribute('contenteditable', false);
        }

与我的编辑所有人的定义类似：

tinymce.init({
          selector: '#rte',
          toolbar: 'bold italic underline',
          height: '200px',
          width: '420px',
          elementpath: false,
          menubar: false,
          content_style: "div {border: 50px solid red;}",

          setup: function (ed) {
            ed.on('init', function () {
              this.getDoc().body.style.fontSize = '16px';
              this.getDoc().body.style.fontFamily = 'Helvetica';
              //disables editing for non admins
              if ($('#nonAdmin').length) {
                this.setMode('readonly');
              }

            });
          }

        });

目前我正在尝试的是，我收到了一个控制台错误：Cannot read property 'getBody' of null

Answer 1

您的禁用代码中有拼写错误：

tinymce.get('#rte').getBody().setAttribute('contenteditable', false);

这一行必须是：

tinyMCE.get('rte').getBody().setAttribute('contenteditable', false);

所以删除＃符号。

因为您已经使用过setMode，所以可以这样做：

tinyMCE.get('rte').setMode('readonly');

或

tinyMCE.get('rte').setMode('code');

Snippet（小提琴：HERE）：

$(function () {
  $('#nonAdmin').on('change', function(e) {
    tinyMCE.get('rte').getBody().setAttribute('contenteditable', !this.checked);
  });


  tinymce.init({
    selector: '#rte',
    toolbar: 'bold italic underline',
    height: '200px',
    width: '420px',
    elementpath: false,
    menubar: false,
    content_style: "div {border: 50px solid red;}",

    setup: function (ed) {
      ed.on('init', function () {
        this.getDoc().body.style.fontSize = '16px';
        this.getDoc().body.style.fontFamily = 'Helvetica';
        //disables editing for non admins
        if ($('#nonAdmin').prop('checked')) {
          this.setMode('readonly');
        }

      });
    }
  });
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.4.1/tinymce.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.4.1/jquery.tinymce.min.js" type="text/javascript"></script>


<h1>TinyMCE Quick Start Guide</h1>
<form method="post">
    Disable: <input type="checkbox" id="nonAdmin">
    <textarea id="rte">Hello, World!</textarea>
</form>

Answer 2

您对tinymce.get（）的调用不正确。

get（https://www.tinymce.com/docs/api/tinymce/root_tinymce/#get）的API声明：

按id：get（id：String）：tinymce.Editor

返回一个编辑器实例

参数： id（String） - 要返回的编辑器实例ID或索引。

这不是jQuery API调用所以你的电话：

tinymce.get('#rteSmall')

......应该可能......

tinymce.get('rteSmall')

Answer 3

TinyMCE（最新版本）文本编辑器在准备好文档时以某种样式禁用。

    $(function () {
        tinymce.init({
                            selector: '#textEditor',
                            plugins: "advlist lists table paste textcolor colorpicker tabfocus link preview",
                            toolbar: "table fontsizeselect bold italic underline forecolor backcolor bullist numlist link preview code", imagetools_toolbar: "rotateleft rotateright | flipv fliph | editimage",
                            menubar: false,
                            toolbar_items_size: 'large',
                            min_height: 500,
                            max_height: 800,
                            convert_newlines_to_brs: false,
                            statusbar: false,
                            relative_urls: false,
                            remove_script_host: false,
                            language: 'en',
        
                        });
                        
                //controls disable inside sections
                tinyMCE.get('textEditor').setMode('readonly');  // disable
                setTimeout(function () {
                    $(".tox .tox-edit-area__iframe, .tox- 
                    toolbar__primary").css("background", "#eee");
                    $(".tox-tinymce").css("border", "1px solid #eee");

                }, 1000);
        });



               //if you want to enable it again, using your own button
                  $(".editFormControls").on('click', function () {
                  $(".sections form").find(".updateControl").show();
               });

通过Jquery禁用TinyMCE文本编辑器

3 个答案: