Froala 编辑器 CSS 未应用 angular 5

Question

我是 Froala Editor and trying to integrate it in my Angular 5 Project but after integration styles and css not applying on Froala Editor. Following guide from here

的新手

我试过如下。

angular.json

"styles": [
              "src/styles.css",
              "node_modules/froala-editor/css/froala_editor.pkgd.min.css",
              "node_modules/froala-editor/css/froala_style.min.css",
              "node_modules/font-awesome/css/font-awesome.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/froala-editor/js/froala_editor.pkgd.min.js"
            ],

文件夹结构

app.module.ts

//..Other Imports 

import "froala-editor/js/froala_editor.pkgd.min.js";
import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FroalaEditorModule.forRoot(), 
    FroalaViewModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import * as $ from 'jquery';
window["$"] = $;
window["jQuery"] = $;


if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

app.component.html

<div [froalaEditor]>Hello, Froala!</div>

输出

描述

不知道为什么结果很奇怪。如果有任何想法，请与我们分享。

Answer 1

终于我找到了答案，但我犯了愚蠢的错误，但我想详细回答我自己的问题，这样对其他人有帮助。

正在安装@angular/cli

注意：如果您已经生成了应用程序，则可以跳过此部分。

npm install -g @angular/cli
ng new my-app
cd my-app

添加angular-froala-所见即所得

npm install angular-froala-wysiwyg --save   

open src/app/app.module.ts and add

// Import Angular plugin. 
import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';

@NgModule({
   ...
   imports: [FroalaEditorModule.forRoot(), FroalaViewModule.forRoot() ... ],
   ...
})

open angular.json file and insert a new entry into the styles array

"styles": [
  "styles.css",
  "../node_modules/froala-editor/css/froala_editor.pkgd.min.css",
  "../node_modules/froala-editor/css/froala_style.min.css",
  "../node_modules/font-awesome/css/font-awesome.css"
]

in angular.json file insert a new entry into the scripts array

"scripts": [
  "../node_modules/jquery/dist/jquery.min.js",
  "../node_modules/froala-editor/js/froala_editor.pkgd.min.js"
]

open src/app/app.component.html and add

<div [froalaEditor]>Hello, Froala!</div>

注：

确保在 build 部分中添加 styles 和 scrips，如下所示。因为我犯了同样的错误，所以我在这里提问。所以请你不要那样做。

"build": {
          //..other code
            "styles": [
              "src/styles.css",
              "./node_modules/froala-editor/css/froala_editor.pkgd.min.css",
              "./node_modules/froala-editor/css/froala_style.min.css",
              "./node_modules/font-awesome/css/font-awesome.css"
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/froala-editor/js/froala_editor.pkgd.min.js"
            ]
          },
          //..other Code
        },

Answer 2

我遇到了同样的问题，解决方案更基本：请记住重新启动您的开发服务器。 angular.json 上的更改不会自动检测到，需要手动重启。

Froala 编辑器 CSS 未应用 angular 5

Froala Editor CSS not applying angular 5

froala

angular