javascript - 如何根据屏幕宽度在 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
    });