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

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

Answer 1

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

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

我说不出确切的原因，但确实有效果。

要停用turbolinks，我按照link

进行了操作

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

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

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

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

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

TinyMCE仅在页面刷新时加载

3 个答案: