2017-05-15 59 views
0

我正在爲每個選定的用戶創建多個tinymce編輯器。 如果用戶數量較少(低於10),編輯人員可以正確創建。 如果用戶數量超過10個,那麼編輯將只應用於幾個文本區域,而不適用於幾個文本區域。問題動態創建多個ui tinymce編輯器angularjs

Please refer this image for my issue.

請參考上面的圖片。 我的看法是:

<div ng-repeat="selnominee in pepsicoNomination.selectedNomineesforContribution track by $index"> 
<textarea class="contri_txtarea" 
             ng-model="selnominee.NomineeDetails.Contribution" ui-tinymce="tinymceNominee.options" rows="13" cols="80" required></textarea> 
</div> 

基於「pepsicoNomination.selectedNomineesforContribution」的長度,文本區域的號碼將被創建和編輯,需要應用到這些文本區域。

我的腳本是:

$scope.tinymceNominee = { 
      cmtsCharLength: 0, 
      options: { 
       height: 175, 
       theme: 'modern', 
       plugins: [ 
        "advlist autolink lists link image hr anchor charcount autoresize" 
       ], 
       toolbar1: "bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link", 
       menubar: false, 
       browser_spellcheck: true, 
       gecko_spellcheck: true, 
       content_css: [ 
        '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i', 
        '//www.tinymce.com/css/codepen.min.css' 
       ], 
       resize: true, 
       elementpath: false, 
       autoresize_min_height: 175, 
       autoresize_max_height: 600, 
       setup: function (ed) { 

        ed.on('resizeeditor', function (e) { 
         $('.mce-tinymce').width("100%"); 
        }); 

        ed.on('keydown', function (e) { 
         var allowedKeys = [8, 35, 36, 37, 38, 39, 40, 45, 46]; 
         if (allowedKeys.indexOf(e.keyCode) != -1) return true; 

         var txtLength = CountCharacters(ed.id); 
         if (txtLength >= $scope.pepsicoNomination.Band.ContributionCharCount) { 
          e.preventDefault(); 
          e.stopPropagation(); 
          return false; 
         } 
         $scope.cmtsCharLength = txtLength; 
         return true; 
        }); 

        ed.on('keyup', function (e) { 
         var count = CountCharacters(ed.id); 
         $scope.cmtsCharLength = count; 
        }); 
       }, 
       mode: 'exact' 
      } 
     }; 
+0

我提供超時加載該div。'

'我已經在頁面加載的某些情況下顯示此div。在那個地方只有一些用戶被決定。在這種情況下,我嘗試瞭如下超時:'$ timeout(function(){$ scope.showContribution = true;},500);'在創建時,所有文本編輯器都正確顯示。但在編輯時,發生了同樣的問題。 –

回答

0

有一些版本的TinyMCE的錯誤。該指令生成的ID有時具有相同的名稱。打開你的用戶界面,tinymce.js文件並更改以下行:

attrs.$set('id', ID_ATTR + '-' + (new Date().valueOf())); 

到:

attrs.$set('id', ID_ATTR + '-' + (new Date().getTime().valueOf())); 

這將確保所有ID都是唯一的。