Tinymce Angular7: не загружается пользовательский файл CSS через свойство content_css

Question

Как загрузить пользовательский файл CSS для использования со свойством content_css?

Я искал в Интернете, но не могу получить ответ на этот вопрос илипо крайней мере, я не мог этого понять.

Так что у меня есть публичный редакторConfig obj, который вызывается в функции инициализации 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',

Это загружает 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;
}

Что я получил отсюда: Изменение фоновой панели инструментовЦвет и цвет текста в редакторе tinymce

Короче говоря, я не уверен, что мой CSS неправильный или это неправильная конфигурация / загрузка файла.

Answer 1

Похоже, вы загружаете content_css с относительного URL. Когда вы вводите относительный URL-адрес для content_css, он разрешается относительно URL-адреса HTML-файла, который включает в себя TinyMCE, а не относительно самого TinyMCE ( source ).

Итак, ваш URL src/assets/content.css вызывается как http://example.com/src/assets/content.css.

. Вы можете установить часть content_css в вашей конфигурации, где этот CSS-файл будет после он выводится из упаковщика или размещает этот CSS-файл вне процесса связывания и устанавливает его URL-адрес напрямую.