Question

我是Froala Editor的新手，并试图将其集成到我的Angular 5项目中，但是在集成样式和CSS之后不适用于Froala Editor。遵循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-wysiwyg

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() ... ],
   ...
})

打开 angular.json 文件，并将新条目插入样式数组

"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"
]

在 angular.json 文件中，将新条目插入脚本数组

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

打开src / app / app.component.html并添加

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

注意：

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

"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

2 个答案: