TinyMCE content_css из глобальной таблицы стилей Angular 6

Question

Я хочу, чтобы стили редактируемой области редактора TinyMCE были такими же, как в моем приложении Angular 6. Я знаю, что могу установить content_css

content_css: 'https://testing.local/dist/styles.a9fe3df792f457e5d228.css'

Но мне приходится менять эту строку кода каждый раз, когда меняется имя файла css. Также, как мне заставить это работать, чтобы я мог проверить свое приложение с:

ng s

Tnx за ваше время

Answer 1

Хорошо, у меня есть решение моей проблемы.

Изменен contact_css для использования переменных окружения

content_css: environment.globalStylesheetUrl

В среде. У меня есть

 globalStylesheetUrl: 'http://localhost:4200/assets/css/content-styles.css'

Установлен gulp и мой gulpfile:

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var concat = require('gulp-concat');

gulp.task('styles', function () {
    return gulp.src(['./scss/bootstrap/bootstrap.scss', './scss/mdb.scss'])
        .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
        .pipe(concat('content-styles.css'))
        .pipe(gulp.dest('./src/assets/css'));
});

gulp.task('styles-build', function () {
    return gulp.src(['./scss/bootstrap/bootstrap.scss', './scss/mdb.scss'])
        .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
        .pipe(concat('content-styles.css'))
        .pipe(gulp.dest('./dist/'));
});

Также добавлены некоторые скрипты в package.json

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "development": "gulp styles && ng s -o --aot",  //added this for development
    "production": "gulp styles-build && ng build --prod"  //added this for production
  },

Теперь я могу

npm run development
npm run production

Надеюсь, это кому-нибудь пригодится.