將變量發送到TinyMCE 4.0，同時在重新初始化瀏覽器窗口時調整大小

Question

我想知道是否有方法將字符串發送到TinyMCE 4.0的工具欄設置，並在重新調整瀏覽器窗口大小時重新初始化。

這裏我使用「inquire」作爲處理變化的腳本，但我不介意任何技術。我嘗試了ed.on（'init'）和PreInit，沒有任何希望。

只需要發送BAR1和BAR2的更新的變量，並重置編輯

<script> 


    var bar1 =''; 
    var bar2 = ''; 


    _simpleInt = { 
     mode: 'exact', 
     elements: "TEXT_ID", 
     selector: "textarea:not(.advanced-editor)", 
     editor_selector: "simple-editor", 
     theme: "modern", 
     editor_deselector: /(mceNoEditor|NoRichText)/, 
     width: '100%', 
     height: '200', 
     toolbar_items_size: 'small', 
     setup: function (ed) { 
      ed.on('init', function (args) { 

      }); 
     }, 

     plugins: [ 
      "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker template", 
      "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking", 
      "save table contextmenu directionality emoticons template paste textcolor dotNetImage qrcode youtube autosave" 
     ], 
     toolbar1: bar1, 
     toolbar2: bar2, 
     image_advtab: true 
    } 
    enquire.register("screen and (max-width: 1024px)", { 
     setup: function() { 

     }, 
     match: function() { 
      bar1 = 'bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist | '; 
      bar2 = 'undo redo | cut copy paste | table | emoticonsqrcode image | link unlink anchor qrcode | '; 
      tinymce.EditorManager.execCommand('mceRemoveEditor', false, "TEXT_ID"); 
      tinymce.init(_simpleInt); 
      //alert("a") 
     }, 
     unmatch: function() { 
      bar1 = 'bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist | | ltr rtl | outdent indent | | forecolor backcolor | searchreplace | '; 
      bar2 = 'undo redo | cut copy paste | table | emoticonsqrcode image | link unlink anchor qrcode | hr nonbreaking inserttime | visualchars visualblocks | removeformat restoredraft | '; 
      tinymce.EditorManager.execCommand('mceRemoveEditor', false, "TEXT_ID"); 
      tinymce.init(_simpleInt); 


     } 
    }); 

tinymce.init(_simpleInt); 
</script> 

Answer 1

我已經找到一種方法。我創建了一個CodePen與解決方案。我還使用了一個函數來在調整停止大小後將init延遲。

var myBar1; 
    var myBar2; 

    function iniTinyMce() { 
     if($(window).width() > 1100) { 
      myBar1 = "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"; 
      myBar2 = "print preview media | forecolor backcolor emoticons"; 
      setTimeout(function() { 
       tinymce.EditorManager.execCommand('mceRemoveEditor', true, "example"); 
       tinymce.init(_settings); 
      }, 100); 
     } 
     else { 
      myBar1 = "insertfile undo redo | styleselect | bold italic | alignleft aligncenter "; 
      myBar2 = "print preview media | bullist numlist outdent indent | link image"; 
      setTimeout(function() { 
       tinymce.EditorManager.execCommand('mceRemoveEditor', true, "example"); 
       tinymce.init(_settings); 
      }, 100); 
     } 
     var _settings = { 
      selector: 'textarea', 
      height: 500, 
      theme: 'modern', 
      plugins: ['advlist autolink lists link image charmap print preview hr anchor pagebreak', 'searchreplace wordcount visualblocks visualchars code fullscreen', 'insertdatetime media nonbreaking save table contextmenu directionality', 'emoticons template paste textcolor colorpicker textpattern imagetools'], 
      toolbar1: myBar1, 
      toolbar2: myBar2, 
      image_advtab: true, 
      templates: [{ 
       title: 'Test template 1', 
       content: 'Test 1' 
      }, { 
       title: 'Test template 2', 
       content: 'Test 2' 
      }] 
     } 
    } 
    // Init tinyMce on load 
    iniTinyMce(); 

    // After Resize end 
    $(window).bind('resizeEnd', function() { 
     // Init tinyMce 
     iniTinyMce(); 
    }); 

    $(window).resize(function() { 
     if(this.resizeTO) clearTimeout(this.resizeTO); 
     this.resizeTO = setTimeout(function() { 
      $(this).trigger('resizeEnd'); 
     }, 500); 
    });