Question

我在我的angular2项目中包含了froala编辑器，它似乎出现在屏幕上并且没有错误。我已将所需模块导入app.module.ts并将jquery导入main.ts并在angular.cli.json

中包含脚本和样式

app.component.ts

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

app.module.ts

 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { AppComponent } from './app.component';
 import { TinyEditorComponent } from './tiny-editor/tiny-editor.component';
 import { SortPipe } from "app/newpipe";
 import "froala-editor/js/froala_editor.pkgd.min.js";
 import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-
 wysiwyg';
 @NgModule({
  declarations: [
  AppComponent,
  TinyEditorComponent,
  SortPipe
  ],
  imports: [
  BrowserModule,
  FormsModule,
  FroalaEditorModule.forRoot(), FroalaViewModule.forRoot()
  ],
   providers: [SortPipe],
   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);

之所以没有出现在浏览器上？

Answer 1

<强> app.component.html

<!-- Include Editor style. -->
<link href="css/froala_editor.pkgd.min.css" rel="stylesheet" />
<link href="css/froala_style.min.css" rel="stylesheet" />
<!-- Include Editor JS files. -->
<script src="js/froala_editor.pkgd.min.js"></script>

<div id="froala-editor" [froalaEditor] [(froalaModel)]="content"></div>

<强> app.component.ts

$('div#froala-editor').froalaEditor({ });

Answer 2

我发现了同样的问题，但不知怎的，我能找到解决方案

// app.module.ts file
import "froala-editor/js/froala_editor.pkgd.min.js";  
// just above:
import { FroalaEditorModule, FroalaViewModule } from 'angular2-froala-wysiwyg';

// and then in main.ts:
import * as $ from 'jquery'; window["$"] = $; window["jQuery"] = $;

请参阅此链接以获取更多信息 https://github.com/froala/angular-froala-wysiwyg/issues/17

为什么找不到froala编辑器？

2 个答案: