title: Tinymce Angular7: Not loading custom css file via content_css property
body: <p><strong>How do I load custom CSS file to use with content_css property?</strong></p>
  
  <p>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.</p>
  
  <p>So I have a public editorConfig obj which gets called in the init function of the HTML</p>
  
  <pre><code>&lt;editor 
    [init]="editorConfig"
    [(ngModel)]="articleObj.text" name="text" id="text"
    (ngModelChange)="onChangeWordCount()"&gt;
  &lt;/editor &gt;
  
  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',
  </code></pre>
  
  <p>This loads TinyMCE and my editor works great. I followed the docs and the scripts load with the lazy loading.</p>
  
  <pre><code>"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/" }
   ],
  </code></pre>
  
  <p>However, I am not able to load my src/assets/content.css file. I keep getting a 404 (file not found).</p>
  
  <p>I have added the path to my angular.json file</p>
  
  <pre><code>"styles": [
      "src/styles.scss",
     "src/assets/content.css"
  ],
  </code></pre>
  
  <p><strong>--- Update ---</strong></p>
  
  <p>I updated the angular.json file: </p>
  
  <pre><code>"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"
     ], 
  </code></pre>
  
  <p>Then in the editor component, I am updating content_css property as:</p>
  
  <pre><code>content_css: 'src/assets/content.css',
  </code></pre>
  
  <p>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.</p>
  
  <p><strong>CSS Code</strong></p>
  
  <pre><code>/* toolbar */
  .mce-toolbar-grp {
      background-color:#efeeee !important; /* uses !important or override .mce-panel background-color/image */
      background-image: none !important;
  }
  </code></pre>
  
  <p>Which I got from here: <a href="https://stackoverflow.com/questions/24642448/changing-background-toolbar-colour-and-text-colour-in-tinymce-editor/24642595">Changing background toolbar colour and text colour in tinymce editor</a></p>
  
  <p>In short, I am not sure if my CSS is wrong or is the configuration/loading of the file which is wrong.</p>