如何根据屏幕宽度在 Rails App 中编辑 TinyMCE 编辑器的宽度

Question

我正在尝试根据屏幕大小在 Rails 5 应用程序中编辑 TinyMCE 编辑器的宽度。

我最初尝试使用下面的代码，当您手动刷新页面时，这似乎有时会起作用，但是如果您导航到我的网站的另一个页面上有 TinyMCE 编辑器而不单击刷新按钮，则设置不会生效。

if (screen.width < 700) {
    tinymce.init({
      selector: '.tinymce',  // change this value according to your HTML
      plugins: ['image', 'link', 'codesample', 'preview'],
      toolbar: 'styleselect | bold italic | undo redo | link image | codesample | preview',
      branding: false,
      width: 250,
      height: 250
    });
} else {
    tinymce.init({
      selector: '.tinymce',  // change this value according to your HTML
      plugins: ['image', 'link', 'codesample', 'preview'],
      toolbar: 'styleselect | bold italic | undo redo | link image | codesample | preview',
      branding: false,
      width: 700,
      height: 250
    });
}

根据 StackOverflow 上关于 turbolinks 的一些建议，我尝试将上述代码包装在以下函数中，但这导致设置根本不生效：

document.addEventListener("turbolinks:load", function() {
})

任何帮助将不胜感激。只是想找出根据屏幕大小（或窗口大小也可以）编辑 TinyMCE 宽度的最佳方法。

注意：我也尝试了这里的解决方案，但没有任何运气：How to make TinyMCE Responsive

Answer 1

你试过了吗：

tinymce.init({
      selector: '.tinymce',  // change this value according to your HTML
      plugins: ['image', 'link', 'codesample', 'preview'],
      toolbar: 'styleselect | bold italic | undo redo | link image | codesample | preview',
      branding: false,
      width: (screen.width < 700) ? 250 : 700,
      height: 250
    });