TinyMCE只有在页面刷新时才会加载。

Question

我正在使用Ruby on Rails中的Tinymce-Rails，并尝试弄清楚为什么除非我刷新页面，否则TinyMCE文本编辑器框不起作用。

所以我已经按照所有文档的要求进行了设置...但是唯一的问题就是它只有在我第一次刷新页面后才能正常工作。这里是负责初始化TinyMCE的JavaScript代码：

var ready;

ready = function(){
  tinyMCE.init({
    selector: "textarea.tinymce",
    toolbar: ["styleselect | undo redo | bold italic underline | bullist | outdent indent"],
    menubar: false,
    statusbar: false,
    style_formats: [{"title":"Headers","items":[{"title":"Header 1","format":"h1"},{"title":"Header 2","format":"h2"},{"title":"Header 3","format":"h3"}]},{"title":"Inline","items":[{"title":"Bold","icon":"bold","format":"bold"},{"title":"Italic","icon":"italic","format":"italic"},{"title":"Underline","icon":"underline","format":"underline"},{"title":"Code","icon":"code","format":"code"}]}],
    content_css: "/assets/tinymce.css"
  });

};

$(document).ready(ready);
$(document).on('page:load', ready);

有人知道为什么我第一次浏览页面时它实际上没有起作用，但只有第二次才有效吗？

- LewlSauce

Answer 1

我偶然发现了你的问题，因为我也遇到过同样的问题。花费了大约一个小时后，我发现是turbolinks导致了这个问题。从官方github上引用：

不让浏览器在每次页面更改时重新编译JavaScript和CSS，而是保持当前页面实例的活动状态，并仅替换head中的body和title

我无法确定确切的原因，但它确实产生了影响。

要禁用turbolinks，我按照这个链接进行操作

1）从Gemfile中删除“gem“turbolinks””并运行bundle。

2）从application.js中删除“//= require turbolinks”。

3）从您的布局中删除任何“data-turbolinks-track”属性。

- Jay-Ar Polidario

---

我遇到了同样的问题，但我已经禁用了 turbolinks，但是 tinyMCE 仍然不能在第一次加载时加载，只能在刷新后加载？有什么想法吗？ - Henry D

Answer 2

我无法通过禁用 turbolinks 或使用 事件监听器 使其正常工作，因此我在偶然的情况下找到了解决方案，即添加

tinymce.remove()

我曾因 content 和 skins 出现控制台错误。

skin: false,
content_css: false

我的示例代码：

import tinymce from 'tinymce/tinymce'
import 'tinymce/plugins/table';
import 'tinymce/plugins/lists';
import 'tinymce/themes/silver/theme'
import 'tinymce/icons/default/icons'
import 'tinymce/skins/ui/oxide/skin.min.css'
import 'tinymce/skins/ui/oxide/content.min.css'
import 'tinymce/skins/content/default/content.css'

function tinyMce() {
    tinymce.remove();    
    tinymce.init({
        selector: 'textarea#default',  // change this value according to your HTML
        height: 400,
        plugin: 'a_tinymce_plugin',
        a_plugin_option: true,
        a_configuration_option: 400,
        skin: false,
        content_css: false
       })}
   
export { tinyMce };

注意，我正在使用Rails 6和Webpacker，因此您的解决方案可能会有所不同。

- cratag

Answer 3

虽然有点晚了，但我通过在事件监听器中包装我的TinyMCE函数来解决了这个问题。这样我就不必完全禁用Turbo Links，因为我喜欢它。

document.addEventListener("turbolinks:load", function() {
  tinymce.init({
    selector: '.tinymce',
    height: 500,
    skin: false,
    menubar: false,
    plugins: [
      'wordcount'
    ],
    toolbar: 'undo redo | formatselect | ' +
      'bold italic backcolor | alignleft aligncenter ' +
      'alignright alignjustify | bullist numlist outdent indent | ' +
      ' removeformat'
  });
});

- Yoko