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

希望这对某人有用。

来自Angular 6全局样式表的TinyMCE content_css

1 个答案: