TinyMCE content_css 来自 Angular 6 全局样式表

Question

我希望 TinyMCE 编辑器的可编辑区域样式与我的 Angular 6 应用程序相同。我知道我可以设置 content_css

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

但是每次 css 文件名更改时我都必须更改这行代码。还有我如何让它工作，以便我可以测试我的应用程序：

ng s

谢谢你的时间

Answer 1

好的，我找到了解决问题的方法。

已更改 contact_css 以使用环境变量

content_css: environment.globalStylesheetUrl

在environmant.ts我有

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

已安装 gulp 我的 gulp 文件是：

'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

希望这对某人有用。

TinyMCE content_css 来自 Angular 6 全局样式表

TinyMCE content_css from Angular 6 global stylesheet

css

tinymce

angular