Updating editor.content_css with dynamic URL?

[NiklasBr]

We use Webpack which has asset versioning enabled, this means that the URL to the CSS and JS files for example may change after each rebuild (they contain content hashes). The actual URL looks like /static/site.57f5daf0.css

This means that content_css which takes a string or an array of strings cannot be dynamically populated using a function.

However, I have discovered setup and init_instance_callback and tried using them in .init({}) like so:

tinymce.init({
    // Other config trimmed
    setup: (editor) => {
        (async () => {
            let response = await fetch("/static/manifest.json");
            await response.json().then((data) => { editor.content_css = data["static/site.css"]; });
        })();
    },
});

and also tested like so:

tinymce.init({
    // Other config trimmed
    init_instance_callback: (editor) => {
        (async () => {
            let response = await fetch("/static/manifest.json");
            await response.json().then((data) => { editor.content_css = data["static/site.css"]; });
        })();
    },
});

The test with setup did work as far as editor.content_css actually contains the correct path to the CSS file (but TinyMCE does not load the file), but the init_instance_callback did not work at all. What is wrong here?

[TheSpyder]

editor.content_css = won't do anything. The options are not properties on editor. You could try editor.options.set(), but you're participating in a race condition.

setup is a callback that fires before the editor initialises. During the init process the content_css option value is used to initialise the content. By the time you get init_instance_callback the editor has completely loaded.

Could you calculate the value before calling tinymce.init()? Or give it a stable URL that calculates the correct value server-side and returns a 301 response?

[NiklasBr]

We can't do a static URL known in advance because the URL sometimes changes on each deploy and we can't move the content hash to a query variable (e.g. /static/site.css?v=57f5daf0) because that has caused issues in the interaction of multiple servers and CDN:s caching old versions under new version hash query param. Using a unique URL is the most reliable and bug-free way we have to ensure that visitors and editors have the correct style sheets.

[TheSpyder]

Right, I understand. Delaying the call to tinymce.init until the manifest has been fetched seems like the most reliable solution.