通过Jquery禁用TinyMCE文本编辑器 [英] disable TinyMCE text editor via Jquery

问题描述

我拥有多个Tiny MCE编辑器，试图禁用这些编辑器.我尝试了以下几种变化:

I ahave multiple Tiny MCE editors which I am trying to disable editing on. I have tried multiple variations of:

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

所有编辑器的定义都类似:

with my editors all defined similarly like:

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

currently with what I am trying, I am getting a console error: Cannot read property 'getBody' of null

推荐答案

您的禁用代码中有错字:

You have a typo in your disable code:

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

此行必须为:

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

因此删除#符号.

由于您已经使用过setMode，因此可以执行以下操作:

Because you already used setMode you can do:

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

或

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

摘要(小提琴:这里):

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

这篇关于通过Jquery禁用TinyMCE文本编辑器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！