Dropdown not loading with Turbolinks #257
Description
Dropdowns on the tinymce editor appear to be broken until after a hard page refresh when coming from a turbolinks:load event.
I have tried removing any editors with the tinymce.remove() call as well as making sure to only initialize editors that appear on the page.
To me it looks as if the html that get's appended to the body is only loaded after a refresh.
I am using Rails 5.2.3, tubolinks 5.2.0, and tinymce-rails 5.0.5.
To initialize my editors, I use the following code:
$(document).on("turbolinks:load", function() {
function tiny(editors) {
const defaultOptions = {
width: "100%",
height: 100,
plugins: [
"advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
"wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
"save table directionality template paste code importcss"
],
powerpaste_word_import: "clean",
powerpaste_html_import: "clean",
toolbar:
"insertfile undo redo | styleselect | bold italic strikethrough underline forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | preview code",
default_link_target: "_blank",
menubar: false,
extended_valid_elements:
"span[!class],a[href|target=_blank|class=link],img[src|class=img-responsive|width=540|style=max-width:540px|alt=],sub[class=sub-text],sup[class=sub-text]",
valid_styles: "max-width,list-style-type",
paste_data_images: true,
entity_encoding: "raw",
content_css: "/assets/tinymce.css?" + new Date().getTime(),
inline_styles: false,
importcss_append: true,
};
// Only load the ones present on the page
let filtered = editors.filter(function(editor) {
return document.getElementById(editor.selector.substr(1)) != null;
});
filtered.forEach(function(options) {
tinymce.init({ ...defaultOptions, ...options });
});
}
const tiny_editors = [
{
selector: "#content",
height: 500
},
{
selector: "#title",
toolbar: "link"
},
{
selector: "#source",
toolbar: "italic code",
extended_valid_elements: "strong[!class],p[!class]",
forced_root_block: false,
valid_styles: "max-width"
}
];
// Only run if editors are present on the page
if ($(".tinymce").length) {
tiny(tiny_editors);
}
});