Tinymce Angular7: Not loading custom css file via content_css property - css

Question

How do I load custom CSS file to use with content_css property?
I have been searching around the web, but I can't seem to get the answer to this question or at least I couldn't understand it.
So I have a public editorConfig obj which gets called in the init function of the HTML
<editor
[init]="editorConfig"
[(ngModel)]="articleObj.text" name="text" id="text"
(ngModelChange)="onChangeWordCount()">
</editor >
public editorConfig = {
plugins: 'lists advlist image code media link table wordcount',
menubar: false,
statusbar: false,
branding: false,
browser_spellcheck: true,
content_css: 'src/assets/content.css',
This loads TinyMCE and my editor works great. I followed the docs and the scripts load with the lazy loading.
"assets": [
"src/favicon.ico",
"src/assets",
{ "glob": "**/*", "input": "node_modules/tinymce/skins", "output": "/skins/" },
{ "glob": "**/*", "input": "node_modules/tinymce/themes", "output": "/themes/" },
{ "glob": "**/*", "input": "node_modules/tinymce/plugins", "output": "/plugins/" }
],
However, I am not able to load my src/assets/content.css file. I keep getting a 404 (file not found).
I have added the path to my angular.json file
"styles": [
"src/styles.scss",
"src/assets/content.css"
],
--- Update ---
I updated the angular.json file:
"assets": [
"src/favicon.ico",
"src/assets",
{ "glob": "**/*", "input": "node_modules/tinymce/skins", "output": "/skins/" },
{ "glob": "**/*", "input": "node_modules/tinymce/themes", "output": "/themes/" },
{ "glob": "**/*", "input": "node_modules/tinymce/plugins", "output": "/plugins/" },
{ "glob": "**/*", "input": "src/assets", "output": "/src/assets" }
],
"styles": [
"src/styles.scss"
],
Then in the editor component, I am updating content_css property as:
content_css: 'src/assets/content.css',
Now the file is getting loaded and I am no longer getting a 404.
However, my CSS code doesn't seem to update the toolbar as I wanted. The change I was hoping for, was to change the toolbar background color.
CSS Code
/* toolbar */
.mce-toolbar-grp {
background-color:#efeeee !important; /* uses !important or override .mce-panel background-color/image */
background-image: none !important;
}
Which I got from here: Changing background toolbar colour and text colour in tinymce editor
In short, I am not sure if my CSS is wrong or is the configuration/loading of the file which is wrong.

Answer 1

Old question but for those interested, above fail is due to the fact that you can't use a scss here. You need to convert it to css before.

Answer 2

It looks like you are loading your content_css from a relative URL. When you enter a relative URL for content_css, it is resolved in relation to the URL of the HTML file that includes TinyMCE, not relative to TinyMCE itself (source).
So, your URL of src/assets/content.css is getting called as http://example.com/src/assets/content.css.
You can either set the content_css part of your config to where that CSS file will be after it is outputted from the bundler, or host that CSS file outside of the bundling process, and set its URL directly.