TinyMCE 仅在页面刷新时加载答案

【问题标题】：TinyMCE only loads on page refreshTinyMCE 仅在页面刷新时加载
【发布时间】：2014-11-16 22:49:54
【问题描述】：

我正在将 Tinymce-Rails 与 Ruby on 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);

有谁知道为什么当我第一次浏览页面时这实际上不起作用，但只在第二次时起作用？

【问题讨论】：

标签： javascript jquery ruby-on-rails

【解决方案1】：

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

而不是让浏览器重新编译 JavaScript 和 CSS 在每次页面更改之间，它使当前页面实例保持活动状态，并且仅替换头部中的正文和标题

具体原因我说不清楚，但确实有效果。

为了禁用 turbolinks，我关注了这个link

1) 从您的 Gemfile 中删除“gem “turbolinks””并运行 bundle。

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

3) 删除布局中的所有“data-turbolinks-track”属性。

【讨论】：

我也遇到了同样的问题，但是我已经禁用了 turbolinks，但还是 tinyMCE 第一次无法加载，只有在刷新后才能加载？有什么想法吗？

【解决方案2】：

我无法通过禁用 turbolinks 或使用 event listener 使其工作所以我偶然发现的解决方案是添加

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，因此您的解决方案可能会有所不同

【讨论】：

【解决方案3】：

聚会迟到了，但我通过将 TinyMCE 函数包装在事件侦听器中解决了这个问题。这样我就不必完全禁用涡轮链接，因为是的，我喜欢它。

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'
  });
});

【讨论】：