2016-08-10 36 views
1

我有多個Tiny MCE編輯器,我試圖禁用編輯。我已經嘗試的多種變化:定義同樣喜歡通過jquery禁用TinyMCE文本編輯器

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

+0

檢查控制檯。如果有任何錯誤。 。 –

+0

如果有多個,請嘗試此操作。 。 tinyMCE.get('rte')。getBody()。setAttribute('contenteditable',false); –

+0

也從版本4.3.x開始,您可以使用以下代碼進行只讀模式.. 其類似tinymce.activeEditor.setMode('readonly'); –

回答

6

你在你選擇禁用代碼有一個錯字:

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

片段(小提琴: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> 
2

您的來電to tinymce.get()不正確。

對於GET(https://www.tinymce.com/docs/api/tinymce/root_tinymce/#get)的API規定:

按id返回編輯器實例:得到(ID:字符串):tinymce.Editor

參數: ID(字符串) - 編者實例ID或索引返回。

這不是一個jQuery的API調用,以便您的來電:

tinymce.get('#rteSmall') 

...應該有可能是......

tinymce.get('rteSmall')