Tinymce Angular7：不通过 content_css 属性加载自定义 css 文件答案

【问题标题】：Tinymce Angular7: Not loading custom css file via content_css propertyTinymce Angular7：不通过 content_css 属性加载自定义 css 文件
【发布时间】：2023-04-09 10:27:01
【问题描述】：

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

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

所以我有一个公共 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 是错误的还是文件的配置/加载错误。

【问题讨论】：

标签： css tinymce angular7

【解决方案1】：

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

【讨论】：

【解决方案2】：

您似乎正在从相对 URL 加载您的 content_css。当您输入content_css 的相对 URL 时，它会根据包含 TinyMCE 的 HTML 文件的 URL 进行解析，而不是相对于 TinyMCE 本身 (source)。

因此，您的src/assets/content.css 网址被称为http://example.com/src/assets/content.css。

您可以将配置的 content_css 部分设置为该 CSS 文件将在从捆绑器输出之后的位置，或者在捆绑过程之外托管该 CSS 文件，然后设置直接访问它的 URL。

【讨论】：

我已经更新了问题，如果你可以看看？