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

Question

如何加载自定义 CSS 文件以与 content_css 属性一起使用？

我一直在网上搜索，但我似乎无法得到这个问题的答案，或者至少我无法理解它。

所以我有一个公共(public)的 editorConfig obj，它在 HTML 的 init 函数中被调用

<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',

这会加载 TinyMCE，我的编辑器工作得很好。我按照文档和脚本加载了延迟加载。

"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/" }
 ],

但是，我无法加载我的 src/assets/content.css 文件。我一直收到 404(找不到文件)。

我已将路径添加到我的 angular.json 文件

"styles": [
    "src/styles.scss",
   "src/assets/content.css"
],

---更新---

我更新了 angular.json 文件:

"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"
   ], 

然后在编辑器组件中，我将 content_css 属性更新为:

content_css: 'src/assets/content.css',

现在文件正在加载，我不再收到 404。 但是，我的 CSS 代码似乎没有按照我的意愿更新工具栏。我所希望的改变是改变工具栏的背景颜色。

CSS 代码

/* toolbar */
.mce-toolbar-grp {
    background-color:#efeeee !important; /* uses !important or override .mce-panel background-color/image */
    background-image: none !important;
}

我从这里得到的:Changing background toolbar colour and text colour in tinymce editor

简而言之，我不确定是我的 CSS 错误还是文件的配置/加载错误。

Answer 1

老问题，但对于那些感兴趣的人，上面的失败是因为你不能在这里使用 scss。您需要先将其转换为 css。