Trouble using custom skins within the TinyMCE for flow Vaadin component

Question

I'm working on a project where I'm using the vaadin component "TinyMCE for flow" (https://vaadin.com/directory/component/tinymce-for-flow) and this component utilizes a setConfig method which takes a string argument for json, which you would use for configuring the special options that the init for regular tinymce would configure. I found a custom skin for the version of tinymce this component uses (4.9) and used the setConfig function to configure the skin_url attribute as follows:

editor.setConfig("{ \"selector\": \"textarea\", \"skin_url\": \"charcoal\"}");

Where the skin file charcoal is inside the same directory as the file I'm calling this method inside of. Am I using this incorrectly for setting the skin of this component? I have also tried using the complete file path for the skin file but that has also not worked out, all both of these does is just returns an invisible tinyMCE editor. Any idea what could be happening here?

(Note: this component is using tinyMCE 4.9, its not 5. Meaning, id try to use the new built in dark mode features but that isn't available in this component)

Answer 1

Seems to work ok for me as long as I store the charcoal directory under the static resources folder in my app. I have a Spring Boot test app, so in that case, the directory is at src/main/resources/META-INF/resources/charcoal. In a non-Spring project, it would be /src/main/webapp/charcoal. See more about storing resources in the docs here: https://vaadin.com/docs/v14/flow/importing-dependencies/tutorial-ways-of-importing.html#resource-cheat-sheet